ActividadesActividades

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>

 

  •  
Crear la correspondiente página web

  1. Colocar varios párrafos (Lorem and more) de 4 o 5 líneas  en cada section.
  2. Crear enlaces internos desde las opciones del menú a los encabezado de la secciones.
  3. 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.
  4. 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.

  1. ¿Cuál será el tamaño del div 'casa'?
  2. 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'.
  3. El tejado deberá estar centrado en la casa. Para ello deberá alterarse el estilo del div 'tejado'.
  4. Definir una puerta de 50px de alto y 50px de ancho de color marrón y que quede centrada en la casa.
  5. Definir 1 'ventana' para cada una de las 2 plantas de la casa (30px x 30px).

La estructura de capas:

<div id="h1" class="casa">
   <div class="tejado" />
   <div class="puerta"><h1>120</h1></div>
   <div class="ventana"></div>
   <div class="ventana2"></div>
</div>

 

El resultado final debería ser parecido al siguiente:

 

Actividad posición 2

 Fuente: Anónima

La Hoja de estilos

 

  1. <style type="text/css">
  2. div
  3. { position: absolute;
  4. border: solid black 3px;
  5. padding: 5px;
  6. }
  7. div.casa
  8. { height: 150px; width: 200px;
  9. background-color: grey;
  10. }
  11. #h1
  12. { top: 100px; left: 150px;
  13. }
  14. div.tejado
  15. { height: 30px; width: 220px;
  16. background-color: red
  17. top: -80px; left: 0px;
  18. }
  19. </style>