Las barras de navegación son algo que nos encontramos en casi todas las páginas web. Hacer una es bastante sencillo e importante al momento de maquetar con HTML y CSS. Aqui te enseño como hacerlo, con la ayuda de la propiedad display:flex.
Paso 1: Configura tu estructura HTML
Primero, crea la estructura HTML para tu barra de navegación. En este ejemplo, utilizaremos una lista desordenada <ul> para representar los elementos de la barra de navegación y luego cada elemento de la lista en un <li>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<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>
</body>
</html>
Paso 2: Estilo con CSS
A continuación, crea un archivo CSS para aplicar estilos a la barra de navegación. En este ejemplo, utilizaremos display: flex para alinear los elementos de la lista en línea horizontalmente.
*{
margin: 0;
padding: 0;
}
nav {
background-color: #333;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around; /* Distribuye los elementos equitativamente */
padding: 0;
}
li {
margin: 0;
padding: 10px;
}
a {
text-decoration: none;
color: #fff;
}
li:hover{
transition: 250ms;
background-color: #000000;
}
Paso 3: Vincula el archivo CSS
Asegúrate de vincular el archivo CSS que creaste en el paso anterior al archivo HTML en la sección <head> del documento.
.
Paso 4: Prueba tu barra de navegación
Abre el archivo HTML en un navegador para ver tu barra de navegación con display: flex. Deberías ver los elementos de la barra de navegación alineados horizontalmente y con espacios equitativos entre ellos.
.
Este es un ejemplo básico de cómo crear una barra de navegación simple con display: flex. Puedes personalizar aún más el diseño y los estilos según tus necesidades. ¡Espero que esto te ayude a empezar!
Curso de Frontend Developer
