شرح صنع قائمة افقية بروابط مع هوفرات

بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله
اليوم راح اشرح كيفية عمل قائمة افقية جميله مع هوفرات
قبل ما نبدأ : مثال ~ : هنا

طيب اولا راح نقول كم شيء مهمات
* كل عملنا سيكون بدون اخطاء عن طريق لغات التنسيق والهيكلة Html + Css
* ساشرح كل ما اكتبه من اكواد حتى يفهم الجميع
* ياريت تستخدمو خاصية الاعجاب لهذا الموضوع حتى اكون الرابح في مسابقة اجمل طرح :shiny01:


طيب
اولا راح ننشأ كلاس نضمّن فيه كل عملنا
وسيكون كهذا
رمز PHP:

طيب الان داخل هذه المساحة سننشأ قوائم الـlists
طبعا الـ list تكون دائما داخل الوسم

رمز PHP:

طيب بين الوسمين المذكورين في الاعلى نضع الليستات
راح انوه لشيء راح نعمل الليستات ونكتب فيهم + نعطيهم روابط

طيب وسم الـlist
بيكون بهذا الشكل
رمز PHP:

طبعا وسمي a هما لاضافة الروابط فقط لاغير
نفتح ونغلقها ب

وداخلهم نضع وسم ونغلقه ب
لتصبح الليستات بهذا الشكل
رمز PHP:

الان ما راح نعمل رابط واحد راح نعمل اكثر من واحد
يعني بيصير كودنا



رمز PHP:

الان الكود الليستات مع الكلاس الرئيسي مع الul
بيكون كهذا



رمز PHP:

تمام الان سنخرج من الـHtml

طبعا كل كلامي فوق بيكون بين وسمي الHtml وهما


************************************************** ****
الان بين وسمي head راح نقله ان احنا راح نشتغل css ونكتبله هالكود
رمز PHP:

طيب الحين كتابتنا بتكون هنا


هنا الاكواد الباقية


طيب الان راح ننسق الكلاس الرئيسي
ويكون تنسيقه بهذا الشكل
رمز PHP:

background : هي الخلفية و #666666 هو لون الخلفية الذي اخترته
height : هو طول الخلية و 40px هي قيمة انا وضعتها لست ملزم بها
لاتنسو ضرووري نكتب px بلاها ما راح يتنفذ الامر
margin : هي المحاذات من كل الجوانب انا مخليها 4 0 4 0 يمكنك تغيييرها

طيب الان انتهينا من الكود الرئيسي
نجي لتنسيق الul لا ننسى انا وضعنا الul داخل الكلاس الرئيسي عشان هيك راح نضيف اسم الكلاس الرئيسي قبل كلمة ul

طيب الان تنسيقات الـul
تكون
رمز PHP:

margin : المحاذاة .
padding : ايضا لها نفس عمل margin وهي للمحاذاة ولكن تختلف قليلا لذا يجب وضعها .
margin-right : المحاذاة من اليمين لاننا راح نعمله ان الكلام يكون من اليمين .

طيب الان
تنسيقات الليستات
طبعا الليستات li موجوده داخل ul والموجوده داخل الكلاس الرئيسي
display : هذا الكود هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل

• هذه display :هذا الكود هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
  اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل
  • هذه display :هذا الكود هو لازالة الدوائر لانها تكون افتراضيه مع كل ليسته
    اذا لم ننفذ هذا الامر سيكون لدينا دوائر بجانب الكلام مثل
    
    • هذه يلا
      
      سلاموزززز
      اعطوني التقييم والاعجاب ولا اعيط :tears:
      مشترك بمسابقه اجمل طرح ..