Table of contents
Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS puede transformar menús HTML aburridos en atractivas barras de navegación.
Barra de navegación = Lista de enlaces
Una barra de navegación necesita HTML estándar como base.
En nuestros ejemplos construiremos la barra de navegación a partir de una lista HTML estándar.
Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene mucho sentido:
Ejemplo:
Ahora eliminemos las viñetas, los márgenes y el relleno de la lista:
Ejemplo explicado:
list-style-type: none;- Elimina las viñetas. Una barra de navegación no necesita marcadores de lista.Establece
margin: 0;ypadding: 0;para eliminar los estilos predeterminados del navegador.
El código del ejemplo anterior es el código estándar que se usa en las barras de navegación verticales y horizontales, sobre el cual aprenderá más en los próximos capítulos.
Resumen
Con CSS, es posible transformar menús HTML en barras de navegación atractivas. Una barra de navegación es básicamente una lista de enlaces, por lo que se usa la lista HTML estándar. Para eliminar los estilos predeterminados del navegador, se establece list-style-type: none;, margin: 0; y padding: 0;.
Traducido con 💚 desde W3Schools.com