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

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

لنقم بإضافة تنسيق لعناصر القائمة؛ باستخدام هذا، ستتمكن من ضبط الأيقونات بشكل صحيح.

التحدي

سهل

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

قم بتعيين الارتفاع (height) والعرض (width) إلى 35px والهامش (margin) إلى 1rem.
قم بتعيين الحشوة (padding) إلى 0 1rem.
قم بتعيين اللون (color) إلى أي شيء تفضله! (موصى به: white)
قم بتعيين نصف قطر الحدود (border-radius) إلى 50%.
قم بتعيين display إلى flex، و align-items، و justify-content إلى center.

أضف التنسيق أدناه:

cursor: pointer;
transition: all 0.2s linear;

جرّب بنفسك

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