lunes, 22 de agosto de 2011

Crear menú con CSS y HTML
Bueno, vamos a crear un excelente menú con HTML y CSS, empecemos!

Comenzamos con el HTML:
Nos quedaría así


Básicamente lo que hicimos acá fue crear un div, darle un id llamado navlist. Dentro de este div le agregamos una lista con el texto que queremos darle a este menú.

Seguimos con el CSS:
body{
background-color:#222;
margin:0px;
padding:0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
a{
text-decoration:none;
}
#navlist {
float: left;
width: 170px;
margin-top: 30px;
margin-left: 5px;
}
#navlist ul {
list-style: none;
}

#navlist li a{
display: block;
height: 25px;
width: 100px;
padding: 9px;
margin: 5px;
background: inherit;
border-right: 4px solid #444;
color: #999;
text-transform: lowercase;
font-size: 0.9em;
}

#navlist li a:hover {
color: #f4f4f4;
background: #333;
border-right: 4px solid #98cb00;
}

#navlist li .active {
color: #999;
background: #333;
border-right: 4px solid #444;
}

Bueno, acá le dimos estilos al body, un fondo y el tipo de fuente. Al navlist le dimos forma, un ancho, un alto, hover, active y varias cosas más.
Y nos quedaría algo así:



No hay comentarios:

Publicar un comentario