En la navegación web, tuberías son las líneas finas que separan los elementos de menú. A menudo, los diseñadores hacen estos sutiles, y se suman a las señales visuales que hacen que la navegación más fácil de usar. Desde los menús del sitio web se codifican como listas con viñetas en HTML y convierten a los menús en CSS, debe agregar las tuberías, dando a cada elemento de la lista una frontera de la derecha. El problema con este método es que añade un borde al último elemento, que no siempre va a querer. Usando ": último niño", sin embargo, se puede decir que el navegador no añadir un borde al último elemento de lista.
Instrucciones
1
Abra la hoja de estilos para su sitio web en el Bloc de notas o un editor de código. Encuentra los estilos para su barra de navegación:
navbar {
propiedades y los valores van aquí
}
Cómo su apariencia de código pueden dependiendo grandemente en cosas como los nombres de identificación y de clase utilizados.
2
Añadir un borde en el derecho de cada elemento de la lista en la barra de navegación:
navbar li {
float: left;
border-right: 1px solid negro;
}
Use un color hexadecimal o nombre del color como se muestra. La regla de estilo en el que añadir la frontera ya tendrá "float: left" ajustado, ya que hace que la horizontal de navegación. Ahora verá una tubería entre todos los eslabones de la barra, incluyendo el último elemento.
3
Utilice la opción ": el último niño" pseudo-clase para eliminar la última tubería porque se ve torpe y no es necesario. Crear una nueva regla de estilo y establecer la frontera a cero:
navbar li: last-child {
border-right: 0;
}
Consejos y advertencias
- Experimente con diferentes estilos de borde que no sean "sólidos" para crear diferentes estilos de tubería. Las posibilidades incluyen "estrellados" y "doble".
- Cuando se usa ": última niño," es importante que no existan otras etiquetas anidadas en los "<ul>" etiquetas que crean el menú. De lo contrario, el navegador no reconocerá el último elemento de la lista como el último hijo de la lista de viñetas.