Tecnología

Inicio

Cómo hacer barras de exploración horizontal en CSS

July 11

Tradicionalmente, las barras de navegación horizontales se hacen con HyperText Markup Language (HTML) tablas, pero este método utiliza el código de exceso que ralentiza su página. En su lugar, Cascading Style Sheets (CSS) que ofrecen una solución que funciona con su HTML, por lo que se puede hacer un elegante menú que se ve bien en su página web y en todos los navegadores. Utilice el software de editor de texto para aplicar el CSS que hace que una barra de navegación horizontal.

Instrucciones

1 Comience el software de edición de texto y abrir el documento de página web en la que desea que la barra de navegación horizontal.

2 Coloca el cursor antes de la etiqueta de cierre </ head> y escriba el siguiente código CSS:
<Style type = "text / css">
ul {}
li {}
</ Style>

La lista desordenada (ul) regla gestiona la lista desordenada en el código HTML, y la lista (li) regla controla los distintos eslabones de la navegación.

3 Tipo "list-style-type: none;" dentro de la regla de lista no ordenada para ocultar los elementos de viñeta que aparecen automáticamente en una lista desordenada. Además, el tipo "margin: 0;" y "padding: 0;" para asegurar que su barra de navegación horizontal aparece en la esquina superior izquierda de la página. Para ilustrar:
ul {-style-type lista: ninguno; margin: 0; padding: 0; }

4 Enter "display: inline;" en la regla de lista de estilos para asegurar los enlaces en su navegación aparecen horizontalmente. Su CSS completa ahora se ve así:

<Style type = "text / css">
ul {-style-type lista: ninguno; margin: 0; padding: 0; }
li {display: inline; }
</ Style>

5 Enter "<ul> <li> <a href="#"> Nombre </a> </ li> </ ul>" en virtud de la apertura <body> dónde quiere que su navegación hasta que aparezca. Vuelva a colocar la etiqueta de hash en el elemento de anclaje con una dirección de archivo deseado, e introduzca el título del enlace preferido en lugar del "Nombre" en el código. Por ejemplo:
<Ul>
<Li> <a href="#home.htm"> principal </a> </ li>
</ Ul>

6 Escriba los elementos de lista adicionales para añadir más enlaces a su barra de navegación. Por ejemplo:
<Ul>
<Li> <a href="#home.htm"> principal </a> </ li>
<Li> <a href="#about.htm"> Sobre </a> </ li>
<Li> <a href="#contact.htm"> Contacto </a> </ li>
</ Ul>

7 Guarde el archivo. Una vista previa en un navegador Web para ver el menú horizontal.

Consejos y advertencias

  • La lista no ordenada en el código HTML crea un soporte para los elementos de menú que puede CSS estilo.