ترتيب العناصر
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 73 من 76.
التحدي
سهللنمارس flexbox لإنشاء شريط تنقل أفقي بسيط. استخدم CSS لتنسيق القائمة لتطابق التصميم في الصورة أدناه.
اتبع الخطوات أدناه:
- قم بتعيين شريط التنقل كحاوية flex.
- أضف مسافة بين الروابط.
- استخدم
justify-content: space-aroundلتوزيع الروابط بالتساوي.
- استخدم
- قم بتنسيق شريط التنقل.
- قم بتعيين لون الخلفية إلى
dark blue. - أضف بعض الـ padding لإنشاء مساحة حول الروابط.
- قم بتعيين لون الخلفية إلى
- قم بتنسيق روابط التنقل.
- حدد عناصر
<a>. - قم بتعيين لون النص إلى
white. - قم بإزالة التسطير الافتراضي.
- قم بتعيين حجم الخط إلى
18px. - أضف
8px 15pxpadding لمساحة أفضل.
- حدد عناصر
جرّب بنفسك
<html>
<head>
<title>Arrange Items</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة