ترتيب العناصر
جزء من قسم 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)تحدي المراجعةتدرّب بنفسك: Playground لـ Web