Cómo hacer una barra de navegación simple en CSS

Introduzca el código CSS que hace una sencilla barra de navegación o un menú. 

NAVEGACIÓN SIMPLE

Sitio web de navegación barras se crean normalmente utilizando HyperText Markup Language (HTML) tablas, pero una mejor manera de hacer esto es usar Cascading Style Sheets (CSS). Con CSS, puede crear un menú que aparece con éxito en la mayoría de los navegadores y que requiere menos código, dando lugar a tiempos de carga de página más rápido. Utilice el programa editor de texto de su ordenador para entrar en el código HTML y CSS que hace una sencilla barra de navegación de la página.

Inicie su programa de edición de texto y abrir un archivo de sitio web. Coloque el cursor en el lugar donde desea que la navegación aparezca bar.

Introduzca el código de una lista desordenada HTML para crear el cuerpo de la barra de navegación. Escriba un par de li / li etiquetas para cada elemento del menú que desea mostrar e introducir la dirección del enlace correspondiente entre estas etiquetas como en el siguiente ejemplo:

ul

lia href = "home.html" Home / a / li

lia href = "about.html" Acerca de / a / li

lia href = "contact.html" Contacto / a / li

/ Ul

Desplácese hasta la parte superior de la página y escriba el siguiente código CSS antes del elemento de cierre / head:

Tipo style = "text / css"

ul {}

{li}

/ Estilo

La lista sin ordenar (ul) crea una regla que maneja el aspecto general de la lista, mientras que la lista (li) hace un estilo para cada elemento de la lista.

Enter "de tipo list-style: none;" dentro de los corchetes regla lista desordenada de quitar las balas por defecto de la lista. Además, el tipo de "margen: 0px;" y "padding: 0px;" para deshacerse de los ajustes impuestos por su navegador. Para ilustrar:

ul {tipo list-style: none; margen: 0px; padding: 0px;}

Tipo "display: inline;" dentro de la regla de la lista para crear un menú de navegación horizontal o bar. El código CSS acabada para la barra de navegación es la siguiente:

Tipo style = "text / css"

ul {tipo list-style: none; margen: 0px; padding: 0px;}

li {display: inline;}

/ Estilo

Guarde el archivo.