Buenas noches a todos, espero que me puedan ayudar con este problema porque hace rato que me tiene loco, estos haciendo un curso de html y me han pedido hacer lo siguiente con etiquetas div
El diseño, indicado de arriba a abajo y de izquierda a derecha debe ser el siguiente:
1º) Caja de 1000 px de ancho por 400 px de alto
2º) Tres cajas de 250 px de ancho por 40 px de alto
3º) Dos cajas cuadradas de 500 px
4º) En en lateral izquierdo dos cajas cuadradas de 350 px y en el lateral derecho una caja rectacgular de 600 px de ancho por 710 px de alto
He realizado lo siguiente:
!DOCTYPE html>
<html lang="es">
<bacgroud>
<head>
<meta charset="UTF-8">
<title>Ejercicio 4</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body bgcolor="black">
</body>
<h1 id="cabecera"> Ejercicio 4</h1>
<div id="section1"></div>
<div id="cuadro2"></div>
<div id="cuadro3"></div>
<div id="cuadro4"></div>
</div>
<div id="cuadro5">Cuadrado Rojo 1</div>
<div id=="cuadro6"></div>
</div>
<div id="cuadrado3"></div>
<div id="cuadrado4"></div>
</div>
</body>
</html>
CSS:
#cabecera {
background-color: white;
text-align: center;
}
#section1 {
height: 400px;
width: 1000px;
background-color: green;
margin-top: 20px;
margin-left: 20px;
}
#cuadro2 {
height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}
#cuadro3 {
height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}
#cuadro4 {
height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}
#cuadro5 {
height: 500px;
width: 500px;
background-color: red;
margin-top: 100px;
margin-left: 20px;
}
#cuadro6 {
height: 500px;
width: 500px;
background-color: red;
margin-top: 100px;
float: left;
}pero no puedo alinear los dos cuadrados de 500px como me pide, por favor ayuda ya no se que hacer
Tema: Como alinear dos divs en html 5 crear un diseño en cajas según instrucciones (Leído 3512 veces)
RSS -
WAP2