Actividades
Posición1) Dada la siguiente hoja de estilos y el cuerpo de una página web:
<style type="text/css">
#contenedor {
width:1000px;
margin-right: auto;
margin-left: auto;
background-color: #C60;
}
nav {
width:300px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #D6D6D6;
background-color: #CC99FF;
text-align: left;
padding: 0px;
margin: 0px;
}
nav ul{
background-color: #C1B8CD;
margin-right: auto;
margin-left: auto;
}
nav li {
list-style-type: none;
margin-bottom: 8px;
}
/*Aplicar estilo a los enlaces*/
nav li a {
width:150px;
font-family: Arial;
font-size:11px;
text-decoration: none;
padding: 10px;
background-color: #68636F;
color: #fff;
-webkit-border-radius: 14px 4px 14px 4px;
border-radius: 14px 4px 14px 4px;
height: auto;
border: medium double #000;
display: block;
}
/*Crear efecto al pasar el rtatón*/
li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
section{
width:690px;
background-color: #096;
border: 1px dotted #000;
margin-left: 304px;
}
section p{ margin-left:10px;
margin-right:10px;}
</style>
<body> <div id="contenedor"> <nav> <ul> <li><a href="#1">Lenguajes de Marcas</a></li> <li><a href="#2">Bases de Datos</a></li> <li><a href="#3">Redes Locales</a></li> <li><a href="#4">Sistemas Operativos</a></li> </ul> </nav> <section> <h2 id=1> LENGUAJES DE MARCAS</h2> </section> <section> <h2 id=2> BASES DE DATOS</h2> </section> <section> <h2 id=3> REDES LOCALES</h2> </section> <section> <h2 id=4> SISTEMAS</h2> </section> </div> </body>
|
-
Colocar varios párrafos (Lorem and more) de 4 o 5 líneas en cada section. - Crear enlaces internos desde las opciones del menú a los encabezado de la secciones.
- Observa en el navegador como al desplazar la página hacia arriba y hacia abajo hay momentos en el que el menú de navegación se pierde.
- Modifica la hoja de estilos para que el menú de navegación quede fijo aunque desplacemos la página.
Posición2) (Actividad opcional)
Dibujando una casa con CSS: Analizar y comprender el fichero HTML que se adjunta. Todos los divs están posicionados de forma absoluta y constan de un borde negro de 3px, además de un padding de 5 px.
- ¿Cuál será el tamaño del div 'casa'?
- Alinear el tejado con la casa, haciendo que coincidan el borde inferior del tejado con el borde superior de la casa. Para ello, deberá alterarse el estilo del div 'tejado'.
- El tejado deberá estar centrado en la casa. Para ello deberá alterarse el estilo del div 'tejado'.
- Definir una puerta de 50px de alto y 50px de ancho de color marrón y que quede centrada en la casa.
- Definir 1 'ventana' para cada una de las 2 plantas de la casa (30px x 30px).
La estructura de capas:
|
El resultado final debería ser parecido al siguiente:
Fuente: Anónima
La Hoja de estilos
|