انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 68
دورة لغة CSS

اشرطة التنقل في لغة CSSCSS Navigation Bar

ستتعلم في هذا الدرس كيفية بناء أشرطة التنقل أو قوائم التنقل بلغة HTML ثم في الدروس المقبلة كيفية إضافة تأثير عليها بلغة CSS لتظهر بشكل ومظهر جيد.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,989
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Navigation Bar اشرطة التنقل في لغة CSS

اشرطة التنقل هي عبارة عن أشرطة تنقل رأسية أو أشرطة تنقل أفقي وهي ضرورية لكل تطبيق ويب لكي يتم التنقل بين الصفحات يمكنك باستخدام لغة CSS تحويل قوائم HTML الي قوائم جيدة المظهر.

CSS Vertical Navigation Bar

أشرطة التنقل العمودية في لغة CSS.

CSS Horizontal Navigation Bar

أشرطة التنقل الأفقية في لغة CSS.

Cretae Navigation Barin HTML إنشاء أشرطة التنقل بلغة HTML

لعمل شريط تنقل أفقي أو رأسي بلغة HTML يجب إستخدام عنصر <ul> لعمل حاوية القائمة وعنصر <li> بداخلة <a> لعمل روابط تنقل.

Result

جرّب بنفسك

CSS navigation bar

إنشاء شريط تنقل في لغة CSS.

HTML 
<ul>
  <li><a href="#default">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
جرّب بنفسك

CSS remove padding and bullets from Navigation إزالة الهوامش الداخلية والعلامات من القوائم في لغة CSS

  • إزالة bullets علامات القوائم عن طريق خاصية  list-style-type: none وإزالة الهوامش الداخلية من القائمة عن طريق خاصية padding في لغة CSS.
جرّب بنفسك

CSS add border to navigation

إضافة إطار للقائمة بلغة CSS.

HTML 
ul
{
border:gray solid 1px;
}
جرّب بنفسك
جرّب بنفسك

CSS Remove Padding and bullets from Navigation

إزالة الهوامش وعلامات القوائم في لغة CSS.

HTML 
ul
{
border:gray solid 1px;
list-style:none;
padding:0;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات13

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 13 مفهومةأول بطاقة، أول خطوة
01 Navigation Bar شريط تنقل
للمراجعة
02 List of Links قائمة الروابط
للمراجعة
03 Links روابط
للمراجعة
04 Elements عناصر
للمراجعة
05 Attribute سمة
للمراجعة
06 Test إختبار
للمراجعة
07 Remove حذف
للمراجعة
08 Padding حشو
للمراجعة
09 Bullets نقاط
للمراجعة
10 None لاشئ
للمراجعة
11 List قائمة
للمراجعة
12 Type نوع
للمراجعة
13 Style نمط أو شكل
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة
03 Href Href
Hypertext Reference
مرجع النص التشعبي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

هل يمكننا ازالة ال bullets من ال list عن طريق خاصية list-style-type: none ؟