Dibuja una casa con CSS: Todas las Div se colocan en posición absoluta y 3px bordes negros y 5px relleno no se hacen.
1.- Fortalecer los bordes inferiores del techo en la parte superior de la casa, alinear el techo con la casa. Para esto, el estilo del div del 'techo' se debe cambiar.
2.- El techo debe estar centrado en casa. Para ello, el 'techo' debe cambiarse al estilo div.
3.- Se centran en la altura y el ancho de 50px y la puerta con un color pardusco en el centro de la casa.
4.- (30px x 30px), ambas ventanas están posicionadas.
El HTML final sería el siguiente
casa.html
<!DOCTYPE html> <html> <head> <title>Casa</title> <link href="casa.css" rel="stylesheet" type="text/css"> </head> <body> <div id="h1" class="casa"> <div class="techo"></div> <div class="pueta"><h1>120</h1></div> <div class="Ventana1"></div> <div class="Ventana2"></div> </div> </body> </html>
casa.css
div { position: absolute; border: solid black 3px; padding: 5px; } div.casa { height: 150px; width: 200px; background-color: grey; } #h1 { top: 100px; left: 150px; } div.techo { height: 30px; width: 220px; background-color: red; top: -80px; left: 0px; }