<nav id=Menu>
<ul
id="listaMenu">
<li>
<a
href="URL_enlace1">Enlace 1</a>
</li>
<li>
<a
href="URL_enlace2">Enlace 2</a>
</li>
<li>
<a
href="URL_enlace3">Enlace 3</a>
</li>
</ul>
</nav>
Ya que tenemos nuestro menú nos dirigimos al diseño a nuestro archivo css
#Menu o #listaMenu
{
/* Aquí definimos sus dimensiones y su posición puede ser desde el nav o desde el ul*/
}
#lisaMenu li
{
display: inline;/*Con esto definimos que el orden de nuestro menú sera horizontal y no vertical */
}
#listaMenu li a
{
#listaMenu li a
{
display: block;/*Con esto comenzamos a definir el botón aun que aun no lo vemos*/
float: left;/*Nos indica si queremos ordenarlos de izquierda a derecha o al contrario(right)*/
text-decoration: none;/*Ahora desaparecemos el subrayado */
margin-right: 10px;/*Indica el margen de espacio entre botón y botón margin-right se refiere solo al margen derecho*/
text-align: center;/*Nos alinea el texto al centro del boton*/
height: 50px;/*Con esto definimos la altura del boton */
line-height: 50px;/*No basta con alinear el texto al centro tenemos que colocarlo justo en medio del botón. Este comando realiza justo esa operación*/
width: 15%;/*Se puede también definir por pixeles (px) es el ancho del botón*/
/*Y si no quieres definir alto y ancho padding: Altopx Anchopx; */
background: #bbe210;/*El color del fondo del botón*/
border-top: 2px solid #2315a3;/*Es el color del margen de arriba si no colocamos solid no lo veremos*/
border-right: 2px solid #2315a3;/*Color del margen derecho*/
border-bottom: 2px solid #2315a3;/*Color del margen inferior*/
border-left: 2px solid #2315a3;/*Color del margen izquierdo*/
color: #ffffff;/*Color del texto del boton*/
font-size: 130%;/*Tamaño de la letra*/
font-family: sans-serif;/*Estilo de letra*/
font-weight: bold;
font-style: oblique;
}
No hay comentarios :
Publicar un comentario