ubiquitour.com

Cómo usar CSS para hacer un cuadro de menú

Hojas de estilo en cascada es un lenguaje de hoja de estilo para diseñar sitios web y a menudo se utiliza para crear menús estilizados para la navegación del sitio. La combinación de CSS con HTML, puede crear su propia caja de menú con una lista desordenada de HTML. Listas sin ordenar son las listas marcadas con viñetas, creados en HTML usando la etiqueta < ul >. CSS permite al estilo de las listas sin ordenar y transformar listas de puntos en un sola línea en caja menú.

Instrucciones

1 Abrir Bloc de notas y llenar en los nombres de los elementos que desee aparecer en tu menú con una lista desordenada de HTML:

< div id = "pizzarie" >

< ul >

< li >< un href="item1.html" > artículo 1 < /a >< /li >

< li >< un href="item2.html" > artículo 2 < /a >< /li >

< li >< un href="item3.html" > artículo 3 < /a >< /li >

< /ul >

< / div >

2 Agregue el siguiente CSS en la sección < head > de HTML para extraer las balas:

< estilo tipo = "text/css" >

pizzarie ul {

lista estilo: ninguno;

}

< / estilo >

3 Agregue el siguiente CSS dentro de las etiquetas < estilo > para hacer la lista caen en una línea:

pizzarie li {

Float: left;

}

4 Agregue el estilo de cuadro de menú en tu CSS:

li pizzarie un {

altura: 2em;

altura de línea: 2em;

Float: left;

anchura: 9em;

Mostrar: bloquear;

frontera: 1px solid #ccc;

color: #000;

texto-decoration: none;

texto-alinee: Centro;

}

5 Guárdelo como un archivo HTML.

Consejos y advertencias

  • Definir estilos más dentro del selector CSS "#menubox li un" para personalizar la apariencia del cuadro de menú.