ubiquitour.com

Cómo hacer una barra de navegación de una lista

Muchas de las barras de navegación olorful que ves en Internet no son más que listas. Una lista HTML es un elemento de la Página Web que contiene valores de texto como el hogar, contacto y FAQ. Usted pudo haber visto barras de navegación con esas palabras antes. Los desarrolladores web añaden color y estilos a HTML listas usando hojas de estilo en cascada o CSS. Al aprender unas reglas CSS, puede convertir una simple lista en una barra de navegación impresionante para su sitio Web.

Instrucciones

1 Lanzamiento de "Bloc de notas."

2 Abra una de sus páginas Web y añadir el siguiente texto a la sección body de tu código HTML:

< div >

< ul id = "navBar" >

< id li = "activo" >< a href = "Home & lt; /a > & lt; /li" > http://www.whitehouse.gov "> Inicio & lt; / a > & lt; / li >

< li >< a href = "productos & lt; /a > & lt; /li «> http://www.whitehouse.gov" > productos & lt; / a > & lt; / li >

< li >< a href = "contacto & lt; /a > & lt; /li «> http://www.whitehouse.gov" > Contacto & lt; / a > & lt; / li >

< li >< a href = "apoyo & lt; /a > & lt; /li «> http://www.whitehouse.gov" > soporte & lt; / a > & lt; / li >

< /ul >

< / div >

Esto crea una lista desordenada simple. Listas sin ordenar son las listas que no tienen una secuencia de numeración, como 1, 2 y 3. La etiqueta "ul" de HTML define la lista desordenada. La etiqueta "ul" hace referencia a una clase CSS llamada "barra de navegación." Esa clase define la apariencia de todo en la lista. Cada elemento de la lista tiene un valor de texto único. En este ejemplo, esos valores son "Inicio", "Productos", "Contactos" y "Apoyo".

3 Tenga en cuenta las etiquetas de "href" en los elementos de lista. Cada una apunta a una dirección URL. En este ejemplo, todos señalan a la Web de Whitehouse. Cambiar las URL a cualquier cosa que te gusta.

4 Agregue el texto siguiente a la sección "head" de su código HTML:

estilo de < >

UL #navBar

{

White-space: nowrap;

margen izquierda: 0;

padding-left: 0;

}

li de la barra de navegación {

lista-estilo-type: none;

Mostrar: en línea;

}

barra de navegación un {padding: 4px 12px;} barra de navegación a: link, #navBar un: visitado {

texto-decoration: none;

color: blanco;

color de fondo: verde;

}

barra de navegación un: hover {

texto-decoration: none;

color: amarillo;

color de fondo: negro;

}

< / estilo >

Este código define la clase de "navBar" hace referencia a la lista. Se establece la propiedad "tipo de estilo de lista" a "ninguno". El valor '' quita las balas normales que ves alrededor de elementos de lista. Se establece la propiedad "display" a "en línea". Esto crea una barra de navegación horizontal. Para producir una barra de navegación vertical, cambie el valor de "en línea" a "bloque".

5 Observe la propiedad de "relleno". Controla el espaciado alrededor del texto en los elementos de lista. El primer valor, "4px," crea 4 píxeles por encima y por debajo de cada artículo. El segundo valor "12px" determina el número de pixels entre cada lista. Aumentar ese valor para crear barras de navegación más amplia.

6 Busque la línea que lee "#navBar un: link, #navBar a: visitado." La propiedad "color" de ese bloque de código define el color de fuente. En este ejemplo, color es el blanco. El color de fondo es verde. También puede cambiar estos colores. El bloque de código final, "#navBar un: hover," controla cómo un elemento de la lista va a cambiar cuando se pase el cursor del ratón sobre él. En este caso, el color de fuente cambia a amarillo y el color de fondo cambia a negro. También puede utilizar sus propios colores para crear el aspecto que prefiera.

7 Guarde la página de la Web y abra en su navegador. Verás una barra que contiene los elementos de la lista de navegación. Mueva su ratón sobre los elementos. Sus colores cambian a medida que pasa el cursor sobre ellos. Haga clic en uno de los elementos de la barra de navegación. Su navegador navegar a la URL que definiste en la lista.

Consejos y advertencias

  • Experimentar con diferentes colores, espaciado y otras propiedades de estilo. Probando varias combinaciones de estilos, puede garantizar una navegación coordina bien con otros elementos de la barra en su página Web.