Elemente anordnen

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 73 von 76.

Aufgabe

Einfach

Lass uns Flexbox üben, um eine einfache horizontale Navigationsleiste zu erstellen. Verwende CSS, um das Menü so zu gestalten, dass es dem Design im Bild unten entspricht.

Folge den unten stehenden Schritten:

Lege die Navigationsleiste als Flex-Container fest.
Füge Abstände zwischen den Links hinzu.
1. Verwende justify-content: space-around, um die Links gleichmäßig zu verteilen.
Gestalte die Navigationsleiste.
1. Setze die Hintergrundfarbe auf dark blue.
2. Füge etwas Padding hinzu, um Platz um die Links zu schaffen.
Gestalte die Navigationslinks.
1. Wähle die <a>-Elemente aus.
2. Setze die Textfarbe auf white.
3. Entferne die standardmäßige Unterstreichung.
4. Setze die Schriftgröße auf 18px.
5. Füge 8px 15px Padding für bessere Abstände hinzu.

Probier es selbst

<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>