Al codificar una página web en HTML y CSS, el método preferido es el de crear una lista desordenada en HTML y luego aplicar a ella algo más de estilo CSS. No importa lo complicado que se convierte en un menú, la lista desordenada sigue siendo un método eficaz para la estructuración de los enlaces. Algunas cuestiones entre navegadores requieren un cuidado especial y un profundo conocimiento del código CSS para hacer un menú horizontal utilizable y evitar que se rompa.
Instrucciones
1 Abre el archivo HTML y añadir <ul> y </ ul> etiquetas a la página Web. Entre esas etiquetas, añadir enlaces envueltos en <li> y </ li> etiquetas. La etiqueta <li> significa "elemento de la lista" y se utiliza en listas de viñetas y listas numeradas, pero muchos desarrolladores también utilizan estos como base para sus menús. Aquí está un ejemplo de una lista desordenada que puede utilizar para crear un menú:
<Ul>
<Li> <a href="page1.html"> Página 1 </a> </ li>
<Li> <a href="page2.html"> Página 2 </a> </ li>
</ Ul>
El código anterior muestra dos eslabones de una lista desordenada. La mayoría de los menús muestran más conexiones que dos. Añadir tantos enlaces como desee sin perder de vista que si agrega demasiados, el menú se romperá. Cuántos se puede incluir depende de la anchura de su diseño, la anchura del menú y la anchura de la pantalla del usuario.
2 Retire balas, márgenes y el relleno de la lista no ordenada. Esto se hace mediante el establecimiento de las propiedades CSS, ya sea en un archivo CSS externo o entre <style> y </ style>.
ul {list-style: none; margin-left: 0; padding-left: 0;}
El código anterior quita el formato de la lista no ordenada para que pueda diseñarlo como un menú.
3 Alinear todos los elementos de menú a la izquierda del uno al otro, estableciendo la propiedad "flotar" a la "izquierda" para cada etiqueta <li> en la lista desordenada. Así es como se ve el código CSS:
li {float: left;}
Este código le da una línea recta de enlaces. Debe estilo de los enlaces sí mismos en lugar de los elementos de la lista, pero el establecimiento de "flotación" de los elementos de la lista en lugar de los enlaces impide "paso a paso" en algunos navegadores. "Stepping" es un error en la lista de enlaces aparece como un conjunto de pasos en lugar de mantenerlos alineados en una línea recta, horizontal.
4 Añadir relleno para todos los eslabones de CSS de este modo:
li a {padding: 5px 10px; bloqueo de pantalla;}
En el código anterior, cada eslabón tiene un acolchado de cinco píxeles en la parte superior e inferior y de 10 píxeles a la izquierda y la derecha. La aplicación de relleno para los enlaces crea un área seleccionable más grande alrededor del texto de cada enlace. Ajuste "display: block;" para hacer que los navegadores tratan a los enlaces como bloques. Tenga en cuenta que el selector CSS aquí es "li a" en lugar de "a", porque no desea que todos los vínculos de la página para parecerse a los enlaces en el menú.
Consejos y advertencias
- Usar CSS para el estilo de la etiqueta <ul> para crear el menú de fondo, la frontera y la sombra. Usar CSS en la etiqueta <a> el estilo de los elementos del menú. El: pseudo-selector de vuelo estacionario se utiliza para crear estados de la libración de los elementos del menú.
- Cuando se utiliza el código CSS, existen muchos problemas en varios navegadores. Desde los menús requieren un estilo complejo, prueba de su página web en varios navegadores, incluyendo versiones antiguas de Internet Explorer.