تنسيق القائمة غير المرتبة

الدرس 10 من 12 في دورة شريط التنقل السفلي - مشروع HTML/CSS على Coddy.

دعونا نزيل نقاط القائمة غير المرتبة ونقوم بمحاذاة الأيقونات أفقياً.

التحدي

سهل

استهدف القائمة غير المرتبة من فئة التنقل .navigation ul:

اضبط الخاصية display على flex.
اضبط الخاصية justify-content على space-around.
اضبط الخاصية list-style على none.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

جميع دروس شريط التنقل السفلي - مشروع HTML/CSS

1شريط التنقل (Navigation Bar)

إعداد الكود الحاوية الرئيسية (main-container)

شريط التنقل (Navbar)

القائمة غير المرتبة والعنوان

عناصر القائمة والعناوين

2التنسيق

تنسيق القائمة غير المرتبة درس مشروع

تنسيق عناصر القائمة

تحريك الأيقونة عند Hover