Caso práctico
Establecemos la estrutura
Creamos la Plantilla para la estructura
Aplicamos los estilos
@charset "utf-8"; #contenedor { height: auto; width: 970px; margin-right: auto; margin-left: auto; padding-top: 5px; border: thin solid #666; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); background-color: #FFF; padding-bottom: 5px; margin-top: 5px; } aside { float: left; width: 190px; border: thin solid #A3A3A3; font-size: 0.7em; font-family: Arial, Helvetica, sans-serif; padding-top: 5px; margin-top: 40px; list-style-position: inside; list-style-type: decimal; padding-bottom: 20px; } aside a {text-decoration: none;} #contenedor #contenedor2 aside .actividades { width: 100%; padding-left: 10px; padding-bottom: 20px; padding-top: 10px; padding-right: 5px; } #contenedor #contenedor2 aside h2 { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-bottom-style: solid; border-top-color: #E8E8E8; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #E8E8E8; line-height: 20px; vertical-align: middle; text-align: center; height: 20px; background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%, #d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%, #d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50% ,#d1d1d1 51%,#fefefe 100%); /* IE10+ */ background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%, #fefefe 100%); /* W3C */ } #contenedor2 { width: 98%; margin-right: auto; margin-left: auto; } .articulo1 ul { list-style-type: square; margin-left: 20px; } body { background-image: url(imagenes/fondoIte.png); background-color: #FFF; } #navhorizontal { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; text-align: left; vertical-align: middle; /*line-height: 38px;*/ background-color: #F0F0F0; font-family: Arial, Helvetica, sans-serif; font-size: .75em; } html { background-color: #FFF; } /*Menu horizontal*/ nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(#efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(#efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 10px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(#4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(#4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(#4f5964 0%,#5f6975 40%); border-radius:7px; } nav ul li:hover a { color: #fff; border-radius:10px; } nav ul li a { display: block; padding: 10px 10px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 10px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 10px 10px; color: #fff; } nav ul ul li a:hover { background: #4b545f;border-radius:7px; } nav ul ul ul { position: absolute; left: 100%; top:0; }
Actividad:
- Analiza los estilos aplicados para obtener la estructura de la página web inicial.
- Crea la página web correspondiente y la hoja de estilo con el código suministrado.
- Comprueba el resultado en el navegador.
- Añade los estilos que faltan para obtener la estructura propuesta: section, articluo1, footer.