MÓDULO: LENGUAJES DE MARCAS Y SISTEMAS DE GESTIÓN DE LA INFORMACIÓN

Administración de Sistemas Informáticos en Red

 

CSS3XSLTDTDRSSXSD

Caso prácticoCaso práctico

Establecemos la estrutura

Diseño web fijo

Creamos la Plantilla para la estructura

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;
}

 

ActividadActividad:

  1. Analiza los estilos aplicados para obtener la estructura de la página web inicial.
  2. Crea la página web correspondiente y la hoja de estilo con el código suministrado.
  3. Comprueba el resultado en el navegador.
  4. Añade los estilos que faltan para obtener la estructura propuesta: section,  articluo1, footer.

 

Mostrar / Ocultar


Próximos Eventos LM

No se han encontrado eventos

U2. Utilizar HTML, HTML5 y CSS3