Cómo hacer un CSS Estilo Con Horizontal Navegación

Creación de una barra de navegación horizontal puede ser una forma efectiva para que los usuarios de su sitio web para ir a distintas páginas sin depender de los hipervínculos y los botones "frontal" y "atrás". Al crear una barra de navegación horizontal, debe insertar algunos de codificación HTML, así como algo de código CSS. Estos dos códigos trabajan juntos, a pesar de que se encuentran en las diferentes secciones de su documento HTML.

Instrucciones

1

Acceda a su servidor Web y abra la página HTML en la que se va a insertar la barra de navegación horizontal.

2

Haga clic en la sección <head> de la página e introduzca el código CSS:

navcontainer ul

{

padding-left: 1;

margin-left: 1;

background-color: # 036;

Color: Blanco;

float: left;

width: 100%;

font-family: Arial, Helvetica, sans-serif;

}

navcontainer ul li {display: inline; } Navcontainer ul li a

{

padding: 1em 0.2em;

background-color: # 036;

Color: Blanco;

text-decoration: none;

float: left;

border-right: #fff sólida 2px;

}

navcontainer ul li a: hover

{

background-color: # 369;

colores: #fff;

}

3

Haga clic en el <body> de la página en la ubicación en la que desea insertar la navegación horizontal y de inserción:

<Div id = "navcontainer">

<Ul id = "navlist">

<Li id = "activa"> <a href="#" id="current"> Noticias </a> </ li>

<Li> <a href="#"> Quiénes somos </a> </ li>

<Li> <a href="#"> Blog </a> </ li>

<Li> <a href="#"> Contáctenos </a> </ li>

<Li> <a href="#"> conjunta del Equipo </a> </ li>

</ Ul>

</ Div>

4

Reemplace los "blog", "Quiénes somos" y otras entradas con el texto real que usted desea que aparezca en la barra de navegación.

5

Vuelva a colocar el "#" en cada línea con la URL que desea abrir cuando se hace clic en el texto en la barra de navegación.

6

Publicar la página. Compruebe funciones.