Cómo agregar una pipa de navegación CSS

En la navegación web, tuberías son las líneas finas que separan los elementos del menú. A menudo, los diseñadores hacen de estas sutiles, y que se suman a las señales visuales que hacen que su navegación sea más utilizable. Desde los menús de sitios web están codificados de la lista de viñetas en HTML y se convierten en menús en CSS, se debe añadir las tuberías, dando a cada elemento de la lista un borde derecho. El problema con este método es que añade un borde a la última opción, lo que no siempre va a querer. El uso de ": last-child", sin embargo, se puede decir que el navegador no añadir un borde al último elemento de la lista.

Instrucciones

1 Abra la hoja de estilo 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 valores van aquí
}

El aspecto de su código pueden muy dependiendo en gran medida de las cosas como nombres de identificación y de clase utilizados.

2 Añadir un borde a la derecha de cada elemento de la lista en la barra de navegación:

li {navbar

flotador izquierdo;
border-right: 1px solid negro;
}

Use un color hexadecimal o color con nombre como se muestra. La regla de estilo en el que agregar el borde ya tendrá "float: left" ajustado, ya que hace que la navegación horizontal. Ahora verá una tubería entre todos los eslabones de la barra, incluyendo el último elemento.

3 Utilice: pseudo-clase para eliminar la última pipa porque se ve incómodo y no es necesario "last-child". Crear una nueva regla de estilo y establecer la frontera a cero:

navbar li: last-child {

border-right: 0;
}

Consejos y advertencias

• Experimentar con diferentes estilos de borde que no sea "sólida" para crear diferentes estilos de tubería. Las posibilidades incluyen "estrellados" y "doble".
• Cuando se utiliza ": el último niño," es importante que no hay otras etiquetas anidadas dentro de las etiquetas "<ul>" 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.