كيفية انشاء قايمة سى اس اس css 2012 ، 2013

السلام عليكم ,,

اريد ان اشرح لكم كيفية انشاء قائمه بابسط الطرق ,, وبدون تنسيق.

في ملف html :

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Test</a></li>
<ul/>

في ملف css :

ul{
 border:1px solid #ccc;
 overflow:auto;
}
ul li{
float:right;

}
ul li a{
display:block;

}

النتيجه الان .

سؤال . لماذا كتبت كود overflow ,, قم بحذفه وستجد الجواب

طبعا كود css هذا لقائمه افقيه ,, لقائمه عموديه فقط استبدل float:right ب float:none;

طبعا تلك القائمه جدا بسيطه وبالعاده يتم اضافه بعض الاكواد لجعل القائمه جميله ومتناسقه ..


مثال ,,
اضف في ul li

margin-right:5px;

تلك الاضافه ,,, تستخدم لزيادة المسافه بين الروابط ..

النتيجه .


مثال اخر
اضف في ul li

padding:5px 8px 5px 8px;
background-color:#CBE86B;

النتيجة



مثال اخير
اضف في ul li a

color:#fff;

النتيجه .

القائمه الان اصبحت اجمل

الان ارنا مهارتك ,,


في أمان الله ,,

يــ ع ـطيكـ الــ ع ـآآفيهـ على مآطرحتي لنآآ يـآآلــ غ ـلآآآ ,,

ولاتحرمينامن جديدكـ ,,,, لآعدمتي ,,, ولآهنتي