<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Prueba de Maquetado</title> | |
| <style type="text/css"> | |
| #contenedor{border: 2px solid brown; width:750px; height:400px; background-color: rgba(255,0,0,0.2); | |
| position:absolute; top:50%; left:50%; margin-top:-200px;margin-left:-375px;} | |
| #cabecera{background-color: rgba(255,0,0,0.5);height:10%;} | |
| #menu{float:left; width:150px; height:90%; background-color: yellow} | |
| #contenidos{width: 598px; height:90%;border:1px blue solid; float:left;} | |
| #principal{float:left; width: 70%; height:100%; background-color: rgba(0,0,255,0.1);} | |
| #secundarios{float: left; width: 30%; height:100%;background-color: rgba(0,0,255,0.5);} | |
| /*MENU VERTICAL*/ | |
| ul.menu{width:100%;border:solid 1px #7c7c7c; border-bottom:none;padding:0px; margin:0px; list-style-type:none; } | |
| ul.menu li{border-bottom:solid 1px #7c7c7c; border-top:1px solid #FFF; background:#F4F4F4} | |
| ul.menu li a{text-decoration:none; display:block; color:#333; padding:.2em 0em .2em .5em } | |
| ul.menu li a:hover{background:silver} | |
| /*MENU HORIZONTAL*/ | |
| ul.menuHorizontal{width:100%;border:red solid 2px;border-bottom:none;padding:0px; margin:0px; list-style-type:none; float:left;} | |
| ul.menuHorizontal li{border-bottom:solid 1px #7c7c7c; border-top:1px solid #FFF; background:#F4F4F4;float:left;} | |
| ul.menuHorizontal li a{text-decoration:none; display:block; color:#333; padding:.2em 0em .2em .5em } | |
| ul.menuHorizontal li a:hover{background:silver} | |
| </style> | |
| </5ead> | |
| <body> | |
| <div id="contenedor"> | |
| <div id="cabecera"> | |
| Esta es la CABECERA de mi página MAQUETADA | |
| </div> | |
| <div id="menu"> | |
| MENU | |
| <ul class="menu"> | |
| <li><a href="#">Opcion 1 de Menu</a></li> | |
| <li><a href="#">Opcion 1 de Menu</a></li> | |
| <li><a href="#">Opcion 1 de Menu</a></li> | |
| <li><a href="#">Opcion 1 de Menu</a></li> | |
| </ul> | |
| </div> | |
| <div id="contenidos"> | |
| <div id="principal"> | |
| <ul class="menuHorizontal"> | |
| <li><a href="#">Opcion 1 de Menu</a></li> | |
| <li><a href="#">Opcion 2 de Menu</a></li> | |
| <li><a href="#">Opcion 3 de Menu</a></li> | |
| </ul> | |
| CONTENIDOS PRINCIPALES | |
| </div> | |
| <div id="secundarios"> | |
| SECUNDARIOS | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
No hay comentarios:
Publicar un comentario
¡Danos tu opinión!