16.13. Solución ejercicio 13
/* ---- Estilos básicos ---------------------------------------------------- */ html,body{height:100%} body { margin: 0; padding: 0; background: #f2f5fe; font: 70%/160% "verdana", sans-serif; color: #192666; } a { color:#192666; } a:hover { color:#4F6AD7; } p { margin: 1em 0; padding: 0; } .clear { clear: both; } h1, h2, h3, h4, h5 { margin: 1em 0; padding:0; } h1 { font-size: 260%; font-family: "georgia", serif; font-weight: normal; } h2 { font-size:180%; font-family: "georgia", serif; font-weight:normal; } h3 { font-size:120%; font-weight:bold; } ul, ol { margin: 1em 0 1em 2em; padding:0; } /* ---- Layout ------------------------------------------------------------- */ #contenedor { width:auto; margin: 0 auto 0 auto; padding-right: 10px; padding-left: 10px; } #cabecera { background: #233c9b; width: 100%; position: relative; height: 100px; margin: 0; padding: 0; color: #FFF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.65); } #contenido { width:auto; margin: 0 5px; background: #FFF; } #contenido #principal { float: left; width: 70%; margin-top: 15px; padding: 0 20px 10px 20px; background: #FFF; } #contenido #secundario { float: left; width: 25%; margin: 15px 0 0 0; padding: 0; background: #cedbf9; border-radius: 9px; border: 1px solid #cedbf9; margin-bottom: 20px; } #footer { clear: both; height: 30px; margin-bottom: 50px; background:#f2f5fe; color: #6685CC; position: relative; } /* ---- Cabecera ----------------------------------------------------------- */ #cabecera #logo { position: absolute; top: 35px; left: 35px; margin: 0; } #cabecera #logo a { color: #FFF; display: block; line-height: 35px; } #cabecera #logo a:hover { color: #B5C4E3; text-decoration: underline; } #cabecera #buscador { position: absolute; top: 40px; right: 20px; } #cabecera #buscador legend { display: none; } #cabecera #buscador fieldset { border: none; } /* ---- Menú --------------------------------------------------------------- */ #menu { background: #192666; margin: 0 5px; padding: 10px 0 0 0; } #menu ul { margin: 0 10px; padding: 0; list-style:none; } #menu ul li { margin: 0 5px 0 0; padding: 0; float:left; } #menu ul li a { display: block; position: relative; padding: 5px 15px; border: 0; background: #253575; color: #B5C4E3; font-weight: bold; text-decoration: none; cursor: pointer; } #menu ul li a:hover { background: #31479B; } #menu ul li.seleccionado a { background: #FFF; color: #000000; } /* ---- Contenidos --------------------------------------------------------- */ #contenido .articulo { clear: both; margin: 0; padding: 20px; background: #f0f2fe; border-radius: 9px; border: 1px solid #cedbf9; margin-bottom: 20px; } #contenido .articulo h2 { margin: 0 -20px; padding: 10px; background: #DEE5FD; color: #192666; } #contenido .info { margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid #DEE5FD; color:#6685CC; } #contenido .info a { color:#6685CC; } #contenido .info a:hover { color:#192666; } #contenido .info span.fecha, #contenido .info span.categoria, #contenido .info span.autor, #contenido .info span.comentarios { padding-left:15px; } #contenido .info span.fecha { background: url("../imagenes/icono_fecha.gif") 0 50% no-repeat; } #contenido .info span.categoria { background: url("../imagenes/icono_categoria.gif") 0 50% no-repeat; margin-left: 8px; } #contenido .info span.autor { background: url("../imagenes/icono_autor.gif") 0 50% no-repeat; margin-left: 8px; } #contenido .info span.comentarios { background: url("../imagenes/icono_comentarios.gif") 0 50% no-repeat; margin-left: 8px; } #contenido #secundario h3 { padding: 10px 0 10px 10px; margin-top: 20px; background: #A0B9F3; color: #192666; } #contenido #secundario #sobremi img { float: left; margin: 4px 5px 0 0; } #contenido #secundario #sobremi p { } #contenido #secundario div { padding: 0 10px; } #contenido #secundario ul { margin: 15px 0; padding: 0; list-style:none; } #contenido #secundario li { margin: 0; padding: 0; border-bottom: 1px solid #E0E8FA; } #contenido #secundario li a { display: block; padding: 3px 0 3px 22px; background: url("../imagenes/icono_elemento.gif") 8px no-repeat; text-decoration: none; } #contenido #secundario li a:hover { background-color: #E0E8FA; color: #192666; } #contenido #secundario li.seleccionado a { background: #E0E8FA url("../imagenes/icono_elemento_seleccionado.gif") 8px no-repeat; font-weight: bold; } /* ---- footer ---------------------------------------------------------------- */ #footer p { margin: 0; padding: 0; position: absolute; top: 30px; left: 40px; } iframe{overflow: hidden;border-style: none;}
Descargar ZIP con la solución completa