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:

 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>