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

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

ستتعلم في هذا الدرس انشاء قوائم افقية باستخدم ال HTML list مع مجموعة من ال CSS Properties

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

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

في الوضع الافتراضي تكون عناصر  <li> بطريقة عرض display:block وتكون أسفل بعضها لبعض ويمكن تغيير طريقة العرض عن طريق float:left أو عن طريق خاصية display:inline-block لتُصف عناصر <li> بجانب بعضها لبعض في لغة CSS لتتحول القائمة العمودية إلي قائمة أفقية.

CSS make horizontal navigation float تقليل حجم قائمة التنقل الأفقية في لغة CSS.

تظهر قائمة أو شريط التنقل بملئ الشاشة لأن عنصر <ul> من النوع display:block فيجب أن يكون عرضة علي قدر المحتوي الداخلي فيجب علينا أن نستخدم display:inline-block أو flaot:left في لغة CSS.

جرّب بنفسك
جرّب بنفسك

CSS horizontal navigation with float

القائمة الأفقية مع تقليل حجم العرض في لغة CSS.

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

CSS create horizontal navigation bar إنشاء قائمة أفقية في لغة CSS

عمل شكل للقائمة الأفقية وعمل خلفية للعناصر الداخلية في الوضع الثابت وعند تمرير مؤشر mouse علي كل عنصر في لغة CSS.

CSS create horizontal navigation bar

ضبط القائمة العمودية في لغة CSS.

جرّب بنفسك

CSS horizontal navigation bar with hover

تغيير الخلفية مع تمرير مؤشر mouse في لغة CSS.

جرّب بنفسك

CSS horizontal navigation active current link ضبط الصفحة الحالية للقائمة الأفقية في لغة CSS

قم بإضافة active class لعمل link حالي داخل الصفحة ليعلم الزوار اي صفحة مفتوحة حالياً.

جرّب بنفسك

CSS horizontal navigation active current link

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

HTML 
.active
{
background:#007bff;
color:white;
}
جرّب بنفسك

CSS horizontal navigation center links توسيط النصوص داخل القائمة الأفقية في لغة CSS

عن طريق خاصية text-align:center يمكن توسيط النصوص داخل horizontal navigation القائمة الأفقية في لغة CSS.

جرّب بنفسك

CSS horizontal navigation center links

توسيط النصوص داخل القائمة العمودية في لغة CSS.

HTML 
ul a
{
border:solid 1px white;
padding:8px 16px;
display: block;
text-decoration: none;
background:#ecf0f1;
color:black;
text-align:center;
}
جرّب بنفسك

مشاركة

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

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

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

المصطلحات23

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

0 / 23 مفهومةأول بطاقة، أول خطوة
01 Navigation Bar شريط تنقل
للمراجعة
02 Horizontal أفقي
للمراجعة
03 Properties خصائص
للمراجعة
04 List قائمة
للمراجعة
05 Inline مضمن
للمراجعة
06 Floating تعويم
للمراجعة
07 Items عناصر
للمراجعة
08 Elements عناصر
للمراجعة
09 Display شاشة
للمراجعة
10 Float عائم
للمراجعة
11 Left يسار
للمراجعة
12 Padding حشو
للمراجعة
13 Height ارتفاع
للمراجعة
14 Width عرض
للمراجعة
15 Margin هامش
للمراجعة
16 Active نشط / فعال
للمراجعة
17 Current الحالي
للمراجعة
18 Class فئة
للمراجعة
19 Right يمين
للمراجعة
20 Align محاذاة
للمراجعة
21 Links روابط
للمراجعة
22 Border حد
للمراجعة
23 Dividers تقسيمات
للمراجعة

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

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

الاختصارات2

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

0 / 2 مفهومةأول بطاقة، أول خطوة
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>
للمراجعة

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

مساحة التحدي

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

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

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

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

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

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

في الوضع الافتراضي ال li elements هي display block elements شكل رأسي ؟

02

display: block تسمح بإضافة padding و height و width و margin لل li elements ؟