شريط التصفح CSS

عرض: الشريط الإرشادي

الشريط الإرشادي العمودي

الشريط الإرشادي الأفقي


الشريط الإرشادي

الشريط الإرشادي البسيط مهم جدًا لأي موقع.

من خلال استخدام CSS، يمكنك تحويل قائمة HTML المملة إلى شريط إرشادي جذاب.

الشريط الإرشادي = قائمة من الروابط

الشريط الإرشادي يحتاج إلى HTML القياسية كأساس.

في مثالنا، سنستخدم قائمة HTML القياسية لبناء الشريط الإرشادي.

الشريط الإرشادي أساسًا هو قائمة من الروابط، لذا من المهم استخدام عناصر <ul> و <li>:

مثال

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

جرب بنفسك

الآن، قم بإزالة علامات القائمة والهوامش الخارجية والداخلية (الملء) من القائمة:

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

جرب بنفسك

توضيح المثال:

  • list-style-type: none; - إزالة علامات القائمة. لا تحتاج نافذة التوجيه إلى علامات القائمة.
  • إعداد margin: 0; و padding: 0; حذف الإعدادات الافتراضية للمتصفح.

الرمز في المثال السابق هو رمز معياري يستخدم في قائمة التوجيهات الافقية والعمودية، وسوف تتعلم المزيد في الفصل التالي.