-
Cómo hacer una barra de navegación horizontal con CSS
-
Una barra de navegación ayuda a los visitantes acceder a todas las áreas de su sitio web o blog. Si desea crear una barra de navegación horizontal, en vez de una vertical, puede hacerlo mediante la creación de una lista básica en HTML (Hypertext Markup Language) y la aplicación de estilos CSS (Cascading Style Sheets) para el código. Esta lista no requiere de secuencias de comandos especiales y mostrará en cualquier navegador que soporte CSS, incluyendo los navegadores de dispositivos móviles.
Instrucciones
1 Inserte el siguiente código después de la apertura de etiquetas "<head>" en el documento HTML y antes de la etiqueta de cierre </ head>.
<Style type = "text / css">
li barra de navegación
{display: inline;
margen: 5px 0;
list-style-type: none;
}
navbar una
{text-decoration: none;
}
</ Style>
2 Pegue el código siguiente después de la etiqueta "<body>" en su elemento HTML para crear la lista que va a ser la base de la barra de navegación.
<Ul ID = "barra de navegación">
<Li> <a href="URL1"> Link 1 </a> </ li>
<Li> <a href="URL1"> Link 2 </a> </ li>
<Li> <a href="URL1"> Link 3 </a> </ li>
<Li> <a href="URL1"> Enlace 4 </a> </ li>
</ Ul>
3 Cambie los valores de "URL1", "URL2" y así sucesivamente para los enlaces reales en los que desea dirigir a sus visitantes. Cambiar el texto del enlace - "enlace1" y "Link2", entre otros - a un texto descriptivo que informar a sus visitantes en los enlaces conducen. Se puede añadir texto sin enlaces mediante la adición de una línea similar a esto en su lista:
<Li> Su texto va aquí </ li>
4 Personalizar la barra de navegación mediante la adición de estilos en el CSS en el encabezado del documento. Por ejemplo, se puede añadir un color de fondo básica (negro), color de la fuente (rojo) y el borde (gris) con los siguientes cambios:
li barra de navegación
{display: inline;
margen: 5px 0;
list-style-type: none;
padding: 5px;
frontera: 1px solid # 808080;
background: # 000;
color: # FF0000;
}
navbar una
{text-decoration: none;
color: # FF0000;
}
5 Guarde el documento HTML / Web.
Consejos y advertencias
- Si la lista es más ancha que la pantalla de su visitante, que se ajustará a la siguiente línea.
- Se puede aplicar a casi cualquier propiedad CSS a su lista, elementos de lista individuales o prueba de enlace contenido.
- los nombres de enlace deben explicar claramente la página de destino.
- Si usted tiene un archivo CSS independiente, inserte el CSS de navegación en ese archivo y guardarlo. Añadir su lista de HTML a su archivo de página / Web HTML.
