ط¯ط±ط³ ط¹ظ…ظ„ ظ‚ط§ط¦ظ…ط© ط§ط*طھط±ط§ظپظٹط© ط¨ Css (طµظˆط±ط©طŒ ط¹ظ†ظˆط§ظ†طŒ ظˆطµظپ)


أشكال وأنواع وأفكار القوائم مع css لا تنتهي. درس مفصل جديد يشرح طريقة طريقة لعمل أحد أشكال القوائم، وهي قائمة كثيرة المعلومات! تجد كل البيانات التى يمكن أن يحتاجها الزائر، عنوان للوصلة مع وصف مختصر لها وأيضا أيقونة يمكن أن تكون شعار للموقع أو صورة مصغرة، ويمكن أستخدام القائمة في قوالب المدونات، للمواقع الصديقة والروابط، وأيضا يمكن ان تستغل لروابط الأقسام الرئيسية في المواقع وغيرها...



خطوات العمل والبداية مع كتابة وتنسيق القائمة XHTML عن طريق الوسوم <ul> و <li> مع وضع القائمة داخل صندوق <div> مستقل يأخذ الفئة menu# كما يلي..




رمز Code:
<div id=&quot;menu&quot;> <ul> <li><a href=&quot;#&quot;>موقع جديد!</a></li> <li><a href=&quot;#&quot;>موقع جديد!</a></li> <li><a href=&quot;#&quot;>موقع جديد!</a></li> </ul> </div>
وسم <li> داخله وضعت الوصلات <a>.. ثم يأتي بعدها وضع صورة الأيقونة وتوضع ايضا داخل نفس الوسم وقبل الوصلة على هذا الشكل ..

رمز Code:
<div id=&quot;menu&quot;> <ul> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!</a></li> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!</a></li> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!</a></li> </ul> </div>
في هذه الحالة، وقد تم وضع صورة الايقونة داخل <li> لن تكون الصورة فعالة للضغط عن التأشير عليها، لو أردتها فعالة للضغط مع العنوان ضعها في داخل الوسم <a> هكذا..

رمز Code:
<li> <a href=&quot;#&quot;><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; />موقع جديد!</a> </li>
سأتابع الشرح طريقة أنا مع الحالة الأولي والصورة خارج الوصلة، بعد ذلك كتابة الوصف وركز جيداً في الكود code القادم، تلاحظ أن الوسم <a> أصبح يحتوى على كل من العنوان الرئيسي ومن تحته وصف يأخذ الوسم <span> ويفصل بينهما بالوسم </ br> ليبدأ من سطر جديد أسفل العنوان..

رمز Code:
<div id=&quot;menu&quot;> <ul> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!<br /> <span>وصف مختصر</span></a></li> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!<br /> <span>وصف مختصر</span></a></li> <li><img src=&quot;icon.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /><a href=&quot;#&quot;>موقع جديد!<br /> <span>وصف مختصر</span></a></li> </ul> </div>
الوسم </ br> بدلاً من <span>
يمكنك الاستغناء عن الوسم </ br> ومن ثم تعديل خصائص CSS للوسم <span> من inline في الوضع الافتراضي الى block عن طريق الخاصية display.

ثانياً تأتي مرحلة خصائص CSS للتنسيق ونبدأ مع الفئة الرئيسية للصندوق div..

رمز Code:
#menu { background: white; width: 280px; padding:10px; }
حددت العرض مع وضع لون للخلفية وبطانه داخلية ’هامش‘.. بعد ذلك نتابع مع خصائص القائمة، وكاملة بهذا الشكل..

رمز Code:
#menu ul { margin:0; padding:0; list-style: none; } #menu ul li { margin: 0; padding: 5px 0 10px; border-bottom: 1px dashed #EAEAEA; } #menu ul li img { float: right; padding: 3px 0 0 10px; } #menu ul li a { font: normal 18px &quot;Trebuchet MS&quot;, Arial; color: #007195; text-decoration:none; } #menu ul li a:hover { color:#CC3332; } #menu ul li span { font: normal 13px tahoma; color:#7D7D7D; } #menu li span:hover { color: #494949; }
التطبيق عمل قائمة مشابهة للناتج الذي استفدته من الدرس مفصل








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©