Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

Ejercicio: Crear una barra de navegación centrada

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Barra de Navegación Centrada</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="barra-navegacion">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>

    <main class="contenido">
        </main>
</body>
</html>


CSS (style.css):

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos de la barra de navegación */
.barra-navegacion {
    background-color: #f0f0f0; /* Color de fondo */
    padding: 15px;
}

.barra-navegacion ul {
    display: flex; /* Activamos Flexbox */
    justify-content: center; /* Centramos horizontalmente */
    list-style: none; /* Eliminamos los puntos de la lista */
}

.barra-navegacion li {
    margin: 0 10px; /* Espacio entre los elementos de la lista */
}

.barra-navegacion a {
    text-decoration: none; /* Eliminamos el subrayado de los enlaces */
    color: #333; /* Color del texto */
}

/* Estilos para el contenido principal */
.contenido {
    padding: 20px;
    
    Explicación:

HTML: Se crea una barra de navegación (<nav>) con una lista (<ul>) de enlaces (<a>). Se añade una clase "barra-navegacion" para aplicar estilos específicos.
CSS:
Reset: Elimina estilos predeterminados del navegador.
.barra-navegacion: Estiliza la barra de navegación (fondo, padding).
.barra-navegacion ul: Activa Flexbox (display: flex) y centra los elementos horizontalmente (justify-content: center). Elimina los puntos de la lista.
.barra-navegacion li: Añade márgenes entre los elementos de la lista.
.barra-navegacion a: Elimina el subrayado de los enlaces y establece el color del texto.
.contenido: Añade padding al contenido principal para separarlo de la barra de navegación.
Resultado:

Obtendrás una barra de navegación con los enlaces centrados horizontalmente. Puedes personalizar los estilos (colores, fuentes, etc.) según tus preferencias.

Tareas adicionales:

Prueba a alinear los elementos de la barra de navegación verticalmente utilizando align-items: center;.
Experimenta con otras propiedades de Flexbox para cambiar la distribución y alineación de los elementos.
Añade más contenido al <main> para ver cómo la barra de navegación se mantiene en la parte superior.

}