12 Barra de navegacion CSS

Lo siguiente que hacemos será dar formato a nuestra barra de navegación, para lo cual incluimos el siguiente código en nuestro archivo CSS:

nav{

    font-size: 1em;

    width:95%;

    padding: 3px;

    background:#404033;

    margin: 5px 1px;

}

nav ul{

    list-style-type:none;

    background:#404033;

}

nav li{

    display: inline;

 

    margin: 0px 1px 0px 0px;

}

nav li a{

    padding: 2px 7px 2px 7px;

    color:#F3F390;

    background:#404033;

    border: 1px solid #F3F390;

    text-decoration: none;

}

nav li a:hover{

    background:#F3F390;

    color:#404033;

}

 

En la etiqueta “nav” indicamos el tamaño de fuente, esta vez en vez de utilizar como medida los pixeles, usaremos “em” que pondrá el tamaño en proporción respecto a la unidad marcada, en este caso equivale a 12px que es el que se establecio al principio para todo el documento.

Despues le damos el ancho, también en proporción al total (95%), con un margen interior de 3px, el color de fondo y un margen exterior de 5px por arriba y abajo y de 1px por los lados.

Pasamos también a dar formato a la lista incluida en el nav, quitándole el estilo (bolita lateral) y dándole el color de fondo.

A los elementos de la lista “li” los ponemos para que estén en línea “inline”, prueba a no ponerlo y veras la diferencia, ya que por omisión estará en bloque, después le asignamos los márgenes respectivos.

Seguidamente damos formato a los enlaces, quitándole el subrayado (text-decoration: none), el resto parecido a anteriores formatos.

Cuando pasamos el raton por estos enlaces vamos a hacer que cambien o se inviertan los colores, por ello damos formato al “a:hover”.

En la siguiente imagen puedes ver el código y su resultado.

03 Html Css. Barra de navegacion

Creamos nuestra barra de navegacion o menu para nuestra web.