http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ ط¹ظ…ظ„ ظ‚ط§ط¦ظ…ط© ط§ط*طھط±ط§ظپظٹط© ط¨ Css (طµظˆط±ط©طŒ ط¹ظ†ظˆط§ظ†طŒ ظˆطµظپ)
أشكال وأنواع وأفكار القوائم مع css لا تنتهي. درس مفصل جديد يشرح طريقة طريقة لعمل أحد أشكال القوائم، وهي قائمة كثيرة المعلومات! تجد كل البيانات التى يمكن أن يحتاجها الزائر، عنوان للوصلة مع وصف مختصر لها وأيضا أيقونة يمكن أن تكون شعار للموقع أو صورة مصغرة، ويمكن أستخدام القائمة في قوالب المدونات، للمواقع الصديقة والروابط، وأيضا يمكن ان تستغل لروابط الأقسام الرئيسية في المواقع وغيرها...
http://lh4.ggpht.com/_c4C63JMfp6g/Sg...n_img_list.gif
خطوات العمل والبداية مع كتابة وتنسيق القائمة XHTML عن طريق الوسومو
- مع وضع القائمة داخل صندوق
مستقل يأخذ الفئة menu# كما يلي..
رمز Code:
وسم- داخله وضعت الوصلات .. ثم يأتي بعدها وضع صورة الأيقونة وتوضع ايضا داخل نفس الوسم وقبل الوصلة على هذا الشكل ..
رمز Code:
في هذه الحالة، وقد تم وضع صورة الايقونة داخل- لن تكون الصورة فعالة للضغط عن التأشير عليها، لو أردتها فعالة للضغط مع العنوان ضعها في داخل الوسم هكذا..
رمز Code:
موقع جديد!
سأتابع الشرح طريقة أنا مع الحالة الأولي والصورة خارج الوصلة، بعد ذلك كتابة الوصف وركز جيداً في الكود code القادم، تلاحظ أن الوسم أصبح يحتوى على كل من العنوان الرئيسي ومن تحته وصف يأخذ الوسم ويفصل بينهما بالوسم ليبدأ من سطر جديد أسفل العنوان..
رمز Code:
الوسم بدلاً من
يمكنك الاستغناء عن الوسم ومن ثم تعديل خصائص CSS للوسم من 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 "Trebuchet MS", 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; }
التطبيق عمل قائمة مشابهة للناتج الذي استفدته من الدرس مفصل http://www.dzbatna.com/images/smilies/cupidarrow.gif
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
