lunes, 20 de mayo de 2013

Botones en HTML5

Ahora que sabemos los elementos principales de una pagina web comenzaremos a crear botones. primeramente definimos nuestra lista


<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