Disponi gli elementi

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 73 di 76.

Sfida

Facile

Facciamo pratica con flexbox per creare una semplice barra di navigazione orizzontale. Usa CSS per applicare al menu uno stile che corrisponda al design nell'immagine qui sotto.

Segui i passaggi qui sotto:

Imposta la barra di navigazione come contenitore flex.
Aggiungi spazio tra i collegamenti.
1. Usa justify-content: space-around per distribuire i collegamenti in modo uniforme.
Applica uno stile alla barra di navigazione.
1. Imposta il colore di sfondo su dark blue.
2. Aggiungi un po' di padding per creare spazio attorno ai collegamenti.
Applica uno stile ai collegamenti di navigazione.
1. Seleziona gli elementi <a>.
2. Imposta il colore del testo su white.
3. Rimuovi la sottolineatura predefinita.
4. Imposta la dimensione del carattere su 18px.
5. Aggiungi 8px 15px di padding per una spaziatura migliore.

Provalo tu

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