السلام عليكم اخوان زوار واعضاء منتديات ستار تيمز الكرام وصلتني عدة رسائل بخصوص هاته الدورة
أسف جدا جدا بخصوص التقصير في تقديمها وهدا للديق الوقت أكرر تأسفي المهم اليوم انشاء الله سوف يكون أول درس
في هاته الدورة انشاء الله يكون واضح ومفهوم الدرس حول القوائم الأفقية
في الستايلات والقوالب
coding_horizontal_navbar
على بركة الله أول خطوة وهيا انشاء الملفات المطلوبة سوف نحتاج الى ملفين
الملف الأول : index.html
الملف التامني : styles.css
ملاحظة : اد كنت تبرمج قالب من أجل بلوجر كما نعلم لن يكون هناك ملفات لاكن الموضوع سهل
سوف تقوم بدمج الملفين في ملف XML
الأن بعد أن قمنا بعمل الملفات المطلوبة يجب علينا الربط بينها عن طريق الكود التالي
لاحظ أننا وضعنا الكود في منطقة Head من أجل المزيد من المعلومات راجع الموضوع التاني
راجع دورة html
الأن نقوم بالدخول الى ملف Styles
ونقوم بكتابة الكود التالي
نلاحظ وجود
direction : نوع ترميز الخط
fonnt-size : حجم الخط
font-family : نوع الخط
الأن نقوم بالعمل على القائمة بكتابةالكود التالي
من أجل التعرف على القوائم أكتر راجع هد الدرس
راجع دورة html
وهدا هو الناتج بعد تطبيق الكود الدي في الأعلى
برافو عليك يبرنس أتمنى أن تكون الأمور وواضحة
الأن سوف نقوم بتعريف العنصر ul من أجل تنسيق القائمة
الأن نقول له list-style-type ونضع له none
الناتج سوف يكون ازالة النقط من القائمة
الأن سوف نقوم بحدف أو اخفاء الفراغ بين القائمة والمتصفح
matgin : الهوامش
padding : المسافات
overflow : المناطق المتمددة
النتيجة في المتصفح
الأن نقوم بتعريف العنصر li ونقوم بوضع التناسق حسب الغة
عربي : right
انجليزي : left
الأن كما نرى المتصفح أخد الكتابة من اليمين الى اليسار
الأن نقم بتعريف العنصر a الربط التشعبي
في المتصفح لايضهر شيء
سوف يضر المهم الصندوق أو الاطار موجود
الأن نقوم في هدا الكود بوضع مسافات للكي لا تبقى القائمة ملتصقة
width : هو المسافة هنا 115 بكسل
الأن سوف يتعرف عليها المتصفح بهدا الشكل
الأن نضع background و color و text-decoration
الناتج في المتصفح كتالي
الأن نقوم بتكبير المسافة بين الأعلى والاسفل ووضع الكتابة في الوسط
الناتج في النتصفح
الأن سوف نحدد رد فعل القائمة عند مرور سهم الماوس فوقها
الناتج على النتصفح
اتمنى أن يعجبكم الشرح والنلتي في درس قادم انشاء الله
|