الاثير الاثير
recent

آخر الأخبار

recent
جاري التحميل ...

شرح عمل قائمة أفقية html وتنسيقه بشكل متناسب css مع الكود

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
تعلم اسياسيات html 
أقدم لكم كود حصري جداااً ..  تصميم مواقع
لعمل قائمة افقية بال css


عمل قائمة أفقية css

القائمة الأفقية html  يتم جعلها أفقية باستخدام التصميم من خلال أكواد الـ CSS

في البداية و كالعادة بعد كتابة الأكواد الألزامية لأنشاء اي موقع الويب بالإضافة للكود 
اولا نعمل قائمة كما في الشكل الاتي
قائمة html

الشكل السابق قائمة مكونة من اربعه قوائم منسدلة ونريد ان تظهر بشكل افقي رائعه الان تابع معي كيفية جعل القائمة افقيه ب css

كود css لجعل القائمة افقيه

يوضع الكود بين <head> و <head> داخل وسم <style>

 
 <style>

} ul 
;list-style-type: none
;padding: 0; margin:0
;overflow: hidden
;background: #333
  {


  } li 
;float: left
 {

  } li a 
display: inline-block
;color: white
;text-align: center
;padding: 14px 16px
;text-decoration: none
{

} li a:hover
;background-color: #111
{

} ac.
    ;background-color: red
}
    
</style>


  • خاصية list-style-type الخاصية تحدد نوع عنصر القائمة علامة وللتحكم في شكل ظهورها.

  • خاصية padding  تعتبـر بمثـابه هوامـش خارجيـة حواليـن العنـصر 
  • خاصية margin تعتبـر بمثـابه هوامـش داخلـيه للعنـصر او تستطيع القـول انه العلاقه بين العنصر نفـسه وما بداخله من أبناء
  • خاصية overflow تقوم بتقطيع جزء من المحتوى, أو إضافة شريط التمرير (ScrollBar), عندما يكون المحتوى كبيرًا جدًا بحيث لا يمكن احتوائه في منطقة محددة. حيث القيمة hidden: تعني أنه سيتم تقطيع المحتوى, والجزء اﻷخر من المحتوى لن يظهر.
  • background تعني خلفية القائمة
  • التعويم float تحديد الجانب الذي تتدفق حوله العناصر الأخرى حول العنصر العائم. 
  • خاصية display وهي مسئولة عن طريقة ظهور العنصر داخل الصفحة. وتحديدا علي يظر العنصر علي نفس السطر او يفرض سطر جديد حيث inline-block  وهى دمج ميزه من ال inline و block بمعنى ان تقوم العناصر المعطى لهم هذه القيم بالمجىء بجانب بعضهم البعض و العناصر تيجـى تحت بعض
  • خاصية text-decoration لتنسيق النص كتسطيره أو تشطيبه 

القوائم css


وهكذا تكون النتيجة 👇👇

كود ملف هذا الصفحة يلي بالشكل الاتية اضغط هنا


مثال عن صفحة html

دمتم في رعاية الله.

عن الكاتب

alathir shw

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

الاثير