Ya has visto cómo crear listas HTML. Sin embargo, uno de los usos más populares de la lista HTML es para la navegación. Verás cómo funciona esto ahora. Lo que haremos es crear este tipo de lista de navegación:

Uso de listas HTML para ayudar a la navegación

Cuando el ratón esté sobre uno de los enlaces de arriba, verás esto:

Uso de listas HTML para ayudar a la navegación

La lista de navegación anterior comienza como una simple lista no ordenada de hipervínculos:

Uso de listas HTML para ayudar a la navegación

Luego usas CSS para cambiar el estilo de la lista HTML. Veamos cómo.

Abre el código de tu página about.html. En la parte superior de la página, cambie su de la hoja de estilo a esto:

TIPO DE HOJA DE ESTILO ="text/css" HREF="../css/nav_list.css">

Vamos a crear una hoja de estilo llamada nav_list.css , y el el código anterior coloca un enlace a él en el HTML.

Para crear la lista no ordenada, cambie su código por el siguiente:

Uso de listas HTML para ayudar a la navegación

Lo que tenemos aquí es una lista no ordenada con seis elementos de la lista. Cada elemento de la lista es un hipervínculo. Sólo tenemos tres páginas, así que las partes de la HREF han sido copiadas y pegado. Fíjense que cada hipervínculo se coloca entre dos etiquetas LI.

La otra cosa que hay que notar son las etiquetas DIV que rodean la lista no ordenada. Vamos a aplicar una CLASE a estas etiquetas DIV. Esto afectará a cualquier cosa entre ellas. Como un ejemplo, echa un vistazo al siguiente DIV con un estilo aplicado:

Uso de listas HTML para ayudar a la navegación

Así es como se verá el código anterior en un navegador:

Uso de listas HTML para ayudar a la navegación

Lo único que hemos hecho aquí es aplicar un borde alrededor de algún texto. Aviso que el borde se extiende a lo largo de la página. Podemos aplicar un poco de relleno, un color de fondo, y hacer flotar el DIV a la izquierda:

Uso de listas HTML para ayudar a la navegación

Cuando lo hagamos, se verá así:

Uso de listas HTML para ayudar a la navegación

Debido a que hicimos flotar el DIV a la izquierda, la frontera se ha reducido. El tamaño es el el ancho de todo el texto más el relleno de 30 píxeles que especificamos.

Lo que hay que tener en cuenta aquí es que cualquier cosa entre las dos etiquetas DIV es afectado.

De vuelta a las listas, entonces. Podemos aplicar un poco de estilo a la lista no ordenada que se sienta entre nuestras dos etiquetas DIV.

Crear un nuevo archivo CSS. Guárdalo en tu carpeta de CSS y llámalo nav_list.css . Ahora agrega el siguiente CSS a tu nuevo archivo:

.navegación {

flotar: izquierda;
fuente-familia: Ginebra, Arial;
frontera: 1px sólido #000000;

}

No olvides la parada completa (punto) al comienzo de la navegación.

Vuelve a tu página about.html. Añade la información de la CLASE a la etiqueta DIV (en en negrita abajo):

Uso de listas HTML para ayudar a la navegación

Guarda tu trabajo y recarga tu página about.html en tu navegador. Su La lista de hipervínculos debería verse así:

Uso de listas HTML para ayudar a la navegación

Tenemos un borde alrededor de los enlaces, y también un cambio de fuente. El DIV también tiene ...ha sido flotado a la izquierda.

Volvamos al archivo CSS. Añade esta nueva regla debajo de la de navegación:

.navigation ul {

margen: 0px;
acolchado: 0px;
tipo de lista: ninguna; (etiqueta_1) }

Tu archivo de texto debería verse así:

Uso de listas HTML para ayudar a la navegación

Estamos extendiendo la clase de navegación con esta línea:

.navigation ul {

Haciendo esto, podemos estar en la parte de la lista de UL. Lo que estamos diciendo es, "busca la clase de navegación, y luego el artículo UL. Aplica el estilo entre corchetes rizados hasta sólo esta parte".

El estilo que estamos aplicando es no tener ningún margen ni relleno. Pero lo importante parte es esta línea:

tipo de lista: ninguno;

El estilo de la lista son las balas. Las estamos apagando junto con el no valen nada. Otros valores para la propiedad tipo lista son:

Asteriscos
box
check
circle
diamante
disc
decimal
ninguno
cuadrado

Como puedes ver, hay mucho para elegir (hay incluso más de lo que se muestra aquí). Sin embargo, no todos son compatibles en todos los navegadores.

Guarda tu trabajo en tu archivo CSS y actualiza la página web en tu navegador. El El resultado es este:

Uso de listas HTML para ayudar a la navegación

El borde negro rodea completamente los hipervínculos ahora. Y las balas han desaparecido.

Podemos continuar el estilo de nuestra lista especificando sólo las partes A de los elementos de la lista. Añade la siguiente regla a tu código CSS:

.navigation li a {

}

De nuevo, estamos ampliando la clase de navegación. Esta vez, estamos perforando aún más, escogiendo la etiqueta LI y luego la A, con un espacio que separa los tres elementos. (No se distingue entre mayúsculas y minúsculas.)

Entre los dos corchetes rizados, agregue las siguientes propiedades y valores CSS:

pantalla: bloque;
acolchado: 2px;
ancho: 180px;
color: #0000FF;
color de fondo: #D0DBF0;
decoración de texto: ninguna;

Su código CSS debería parecerse al nuestro abajo:

Uso de listas HTML para ayudar a la navegación

Llegaremos a la parte de display: block pronto. Pero las otras cinco propiedades establecer el relleno para los hipervínculos, un ancho de 180 píxeles, un color de texto y un color de fondo detrás del texto. La decoración del texto desactiva los subrayados para los hipervínculos.

Guarda tu trabajo y actualiza tu navegador. Sus enlaces de navegación se verán entonces como esto:

Uso de listas HTML para ayudar a la navegación

Con estos nuevos estilos aplicados, tenemos un color de fondo con subrayados ...apagado. Fíjese que hay más espacio entre cada enlace.

Ejercicio
Juega con los valores de tus nuevas propiedades CSS. Intenta cambiar el relleno y el ancho para ver lo que sucede. Experimentar con diferentes colores.

Ejercicio
En la primera regla del CSS, hemos hecho flotar el DIV a la izquierda. Cambie esto para que flota a la derecha. Cámbialo de nuevo cuando termines.

Para conseguir que el color de fondo cambie cuando el ratón está sobre un hipervínculo, tenemos que ir a casa en la propiedad del aerodeslizador. Hazlo así:

.navigation li a:hover {

color de fondo: #00DBF0;

}

Así que todavía tenemos .navigation li a . Después de la a, sin embargo, tenemos un colon seguido por el cerrojo de propiedades del CSS. Entre los corchetes de este nuevo regla, hemos seleccionado un color diferente.

Añade la nueva regla a tu propio código CSS. Guarda tu trabajo y actualízalo en el navegador.

Si quieres, también puedes cambiar el color del enlace cuando alguien tiene ...hizo clic en ellos:

.navigation li a:visited {

color de fondo: rojo;

}

La única cosa diferente es la palabra visitada en lugar de flotar .

Sin embargo, esto es lo que debería ser tu código CSS completo:

Uso de listas HTML para ayudar a la navegación

Y aquí hay un recordatorio de cómo debería verse tu navegador cuando te mueves tu ratón sobre un enlace:

Uso de listas HTML para ayudar a la navegación

Listas horizontales

Los enlaces de navegación no tienen que ser verticales. Puedes tener enlaces horizontales también. La forma en que esto funciona es cambiando la propiedad de visualización de bloque a en línea. El bloque de propiedades significa poner los elementos uno encima del otro. La propiedad inline significa mantenerlos en la misma línea.

Examine el siguiente código CSS:

Uso de listas HTML para ayudar a la navegación

No es tan diferente del código que tienes.

Con su nav_list.css abierto, haga clic en File > Save As . Cambie el archivo nombre a (etiqueta_13) nav_list_horizontal.css (etiqueta__13) . En el HTML para su about.html página web, cambia la referencia del archivo para tu etiqueta CSS LINK:

TIPO ="text/css" HREF="../css/%20nav_list_horizontal.css%20">

Su página about ahora obtendrá sus estilos CSS de la nueva nav_list_horizontal página.

Ejercicio
Compara tu antiguo código con el nuevo código CSS de arriba. La mayor parte es el mismo. Pero cambiar las líneas que no lo son.

Si completas este ejercicio, tu navegador debería verse así:

Uso de listas HTML para ayudar a la navegación

Nuestra lista va ahora de izquierda a derecha, en la parte superior de la página. Esto es todo el resultado de la visualización: en línea, más uno o dos ajustes más.

Dejaremos las listas HTML y seguiremos adelante. Para más listas de navegación, mira esto sitio:

http://css.maxdesign.com.au/listamatic/

Hay un uso muy creativo de las listas de navegación en el sitio anterior. Bueno que vale la pena visitar, si el enlace todavía funciona. (Envíenos un correo electrónico, si el enlace está roto.)

En la siguiente sección, aprenderás a posicionar elementos con CSS.

| Hojas de estilo externas | Modelo de caja CSS

Volver a la página de inicio

Recomendado para ti