ط´ط±ط* طµظ†ط¹ ظ‚ط§ط¦ظ…ط© ط§ظپظ‚ظٹط© ط¨ط±ظˆط§ط¨ط· ظ…ط¹ ظ‡ظˆظپط±ط§طھ
بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله
اليوم راح اشرح طريقة كيفية عمل قائمة افقية جميله مع هوفرات
قبل ما نبدأ : مثال ~ : هنا
طيب اولا راح نقول كم شيء مهمات
* كل عملنا سيكون بدون اخطاء عن طريق لغات التنسيق والهيكلة Html + Css
* ساشرح طريقة كل ما اكتبه من اكواد حتى يفهم الجميع
* ياريت تستخدمو خاصية الاعجاب لهذا الموضوع حتى اكون الرابح في مسابقة اجمل طرح
طيب
اولا راح ننشأ كلاس نضمّن فيه كل عملنا
وسيكون كهذا
رمز PHP:
<code style="white-space:nowrap"> <code>
<div class="all">
هنا ستكون القوائم
</div>
</code> </code>
طيب الان داخل هذه المساحة سننشأ قوائم الـlists
طبعا الـ list تكون دائما داخل الوسم
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
</ul>
</code> </code>
طيب بين الوسمين المذكورين في الاعلى نضع الليستات
راح انوه لشيء راح نعمل الليستات ونكتب فيهم + نعطيهم روابط
طيب وسم الـlist
بيكون بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> <li><a href="#" > الرئيسية </a></li>
</code> </code>
طبعا وسمي a هما لاضافة الروابط فقط لاغير
نفتح <li> ونغلقها ب </li>
وداخلهم نضع وسم <a> ونغلقه ب </a>
لتصبح الليستات بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> <li><a href="#" > الرئيسية </a></li>
</code> </code>
الان ما راح نعمل رابط واحد راح نعمل اكثر من واحد
يعني بيصير كود codeنا
رمز PHP:
<code style="white-space:nowrap"> <code> <li><a href="#" > الرئيسية </a></li>
<li><a href="#" >العجوري </a></li>
<li><a href="#" > ديزاد باتنة</a></li>
<li><a href="#" > ابو عطا لخدمات التصميم </a></li>
<li><a href="#" > عربيون هوست </a></li>
</code> </code>
الان الكود code الليستات مع الكلاس الرئيسي مع الul
بيكون كهذا
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="bc">
<ul>
<li><a href="#" > الرئيسية </a></li>
<li><a href="#" >العجوري </a></li>
<li><a href="#" > ديزاد باتنة</a></li>
<li><a href="#" > ابو عطا لخدمات التصميم </a></li>
<li><a href="#" > عربيون هوست </a></li>
</ul>
</div>
</code> </code>
تمام الان سنخرج من الـHtml
طبعا كل كلامي فوق بيكون بين وسمي الHtml وهما <body> </body>
الان بين وسمي head راح نقله ان احنا راح نشتغل css ونكتبله هالكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <style type="text/css">
</style>
</code> </code>
طيب الحين كتابتنا بتكون هنا
<
رمز PHP:
<code style="white-space:nowrap"> <code>
<style type="text/css">
هنا الاكواد الباقية
</style>
</code> </code>
طيب الان راح ننسق الكلاس الرئيسي
ويكون تنسيقه بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> .bc {background:#666666;
height:40px;
margin: 4px 0px 4px 0px;
}
</code> </code>
background : هي الخلفية و #666666 هو لون الخلفية الذي اخترته
height : هو طول الخلية و 40px هي قيمة انا وضعتها لست ملزم بها
لاتنسو ضرووري نكتب px بلاها ما راح يتنفذ الامر
margin : هي المحاذات من كل الجوانب انا مخليها 4 0 4 0 يمكنك تغيييرها
طيب الان انتهينا من الكود code الرئيسي
نجي لتنسيق الul لا ننسى انا وضعنا الul داخل الكلاس الرئيسي عشان هيك راح نضيف اسم الكلاس الرئيسي قبل كلمة ul
طيب الان تنسيقات الـul
تكون
رمز PHP:
<code style="white-space:nowrap"> <code> .bc ul {
margin:0px;
padding:0px;
margin-right:18px;
}
</code> </code>
margin : المحاذاة .
padding : ايضا لها نفس عمل margin وهي للمحاذاة ولكن تختلف قليلا لذا يجب وضعها .
margin-right : المحاذاة من اليمين لاننا راح نعمله ان الكلام يكون من اليمين .
طيب الان
تنسيقات الليستات
طبعا الليستات li موجوده داخل ul والموجوده داخل الكلاس الرئيسي << متاهة
يكون التنسيق لها هكذا
رمز PHP:
<code style="white-space:nowrap"> <code> .bc ul li {
display:block;
float:right;
padding:2px;
color:#FFF;
}
</code> </code>
display : هذا الكود code هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل
- هذه <
float : الكود code هنا يقلنا ودي لنا كل شيء لليمين .
padding : ايضا لها نفس عمل margin وهي للمحاذاة ولكن تختلف قليلا لذا يجب وضعها .
color : لون الكتابة.
الحين دور الa الي وضعناها داخل li وال li الموجوده داخل ul ولul الموجوده داخل الكلاس الرئيسي << متاهة
تنسيقها بيكون بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #dd .bc ul li a {
display:block;
float:right;
padding:8px;
color:#FFF;
text-align:center;
text-decoration:none;
}
</code> </code>
display :هذا الكود code هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل
- هذه <
float : الكود code هنا يقلنا ودي لنا كل شيء لليمين .
padding : ايضا لها نفس عمل margin وهي للمحاذاة ولكن تختلف قليلا لذا يجب وضعها .
color : لون الكتابة
text-align : لعمل توسيط للكتابة داخل المربع الي عملناه .
text-decoration : لازالة الخطوط من تحت الروابط .
الان نجي للهوفر يعني لما نضع الماوس يتغير الشكل
نفس الاعدادات العليا ولكن مع تغيير اللون ولون الخلفية
رمز PHP:
<code style="white-space:nowrap"> <code> .bc ul li a:hover { list-style-type:none;
display:block;
float:right;
line-height:20px;
text-decoration:none;
padding:8px;
color: #000;
background:#FFFFFF;
}
</code> </code>
display :هذا الكود code هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل
- هذه <
float : الكود code هنا يقلنا ودي لنا كل شيء لليمين .
padding : ايضا لها نفس عمل margin وهي للمحاذاة ولكن تختلف قليلا لذا يجب وضعها .
color : لون الكتابة
text-align : لعمل توسيط للكتابة داخل المربع الي عملناه .
text-decoration : لازالة الخطوط من تحت الروابط .
background : الخلفية عند وضع الماوس .
الان انا انتهيت
الكود code كامل
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bc {background:#666666;
height:40px;
margin: 4px 0px 4px 0px;
}
#dd .bc ul {
margin:0px;
padding:0px;
margin-right:18px;
}
#dd .bc ul li {
display:block;
float:right;
padding:2px;
/*
text-decoration:none;*/
padding:8px;
color:#FFF;
}
#dd .bc ul li a {
display:block;
float:right;
padding:8px;
color:#FFF;
text-align:center;
text-decoration:none;
}
#dd .bc ul li a:hover { list-style-type:none;
display:block;
float:right;
line-height:20px;
text-decoration:none;
padding:8px;
color: #000;
background:#FFFFFF;
}
</style>
</head>
<body>
<div id="dd">
<div class="bc">
<ul>
<li><a href="#" > الرئيسية </a></li>
<li><a href="#" >العجوري </a></li>
<li><a href="#" > ديزاد باتنة</a></li>
<li><a href="#" > ابو عطا لخدمات التصميم </a></li>
<li><a href="#" > عربيون هوست </a></li>
</ul>
</div>
</div>
<ul>
</ul>
</body>
</html>
</code> </code>
يلا
سلاموزززز
اعطوني التقييم والاعجاب ولا اعيط
مشترك بمسابقه اجمل طرح ..
التعديل الأخير كان بواسطة العجوري; 14 - 08 - 2014 الساعة 00:28
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
