CSS Horizontal Navigation Bar
شريط التنقل الأفقي في لغة CSS
ستتعلم في هذا الدرس انشاء قوائم افقية باستخدم ال HTML list مع مجموعة من ال CSS Properties
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Horizontal Navigation Bar
شريط التنقل الأفقي في لغة CSS
</>
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.
ul
{
border:gray solid 1px;
list-style:none;
padding:0;
float:left;
}
</>
CSS create horizontal navigation bar
إنشاء قائمة أفقية في لغة CSS
عمل شكل للقائمة الأفقية وعمل خلفية للعناصر الداخلية في الوضع الثابت وعند تمرير مؤشر mouse علي كل عنصر في لغة 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.
.active
{
background:#007bff;
color:white;
}
</>
CSS horizontal navigation center links
توسيط النصوص داخل القائمة الأفقية في لغة CSS
عن طريق خاصية text-align:center يمكن توسيط النصوص داخل horizontal navigation القائمة الأفقية في لغة CSS.
CSS horizontal navigation center links
توسيط النصوص داخل القائمة العمودية في لغة CSS.
ul a
{
border:solid 1px white;
padding:8px 16px;
display: block;
text-decoration: none;
background:#ecf0f1;
color:black;
text-align:center;
}
شريط تنقل
أفقي
خصائص
قائمة
مضمن
تعويم
عناصر
عناصر
شاشة
عائم
يسار
حشو
ارتفاع
عرض
هامش
نشط / فعال
الحالي
فئة
يمين
محاذاة
روابط
حد
تقسيمات
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعلم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة. نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي، لذا فإننا نركز على التعلم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن. هذه الخبرة ننقلها لك تحت إشراف مهندسين العباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
