Listenpunkt-Styling

Lektion 11 von 12 im Kurs Untere Navigationsleiste - HTML/CSS Projekt von Coddy.

Fügen wir Styling für Listenelemente hinzu; damit können Sie Icons korrekt anpassen.

Aufgabe

Einfach

Sprechen Sie Listenelemente aus der Navigationsklasse und der ungeordneten Liste .navigation ul li an:

Setzen Sie die Höhe (height) und Breite (width) auf 35px und den Außenabstand (margin) auf 1rem.
Setzen Sie den Innenabstand (padding) auf 0 1rem.
Setzen Sie die Farbe (color) auf einen beliebigen Wert! (empfohlen: white)
Setzen Sie den Rahmenradius (border-radius) auf 50%.
Setzen Sie display auf flex, sowie align-items und justify-content auf center.

Fügen Sie das folgende Styling hinzu:

cursor: pointer;
transition: all 0.2s linear;

Probier es selbst

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