Buenas tardes. Este es el enunciado del ejercicio CU01035D del curso de fundamentos de programación web con CSS:
Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:
a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.
b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.
c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.
d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01035D
</title>
<link rel="stylesheet" type="text/css" href="estilos/CU01035.css"/>
</head>
<body>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Delectus eaque totam itaque excepturi ipsa praesentium blanditiis esse,
facilis neque nam atque ratione deleniti? Provident eveniet unde esse corporis
quasi ratione.
</p>
</div>
<div id="k"></div>
<div id="l"></div>
<div id="m"></div>
<div id="clean"></div>
<div id="n">
<p>Curso CSS aprenderaprogramar.com</p>
</div>
</body>
</html>
Acá la hoja de estilos css:
div#b{
background-color:#C5C5C5;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#c{
background-color:mediumseagreen;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#d{
background-color:crimson;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#e{
background-color:slateblue;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#f{
background-color:blue;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#g{
background-color:green;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#h{
background-color:red;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#i{
background-color:pink;
float:left;
width:50px;
height:50px;
margin-right:5px;
}
div#j{
background-color:yellow;
margin:20px 0;
width:100%;
clear:both;
}
div#k{
width:200px;
height:50px;
background-color:black;
margin-right:5px;
float:right;
}
div#l{
width:200px;
height:50px;
background-color:blueviolet;
margin-right:5px;
float:right;
}
div#m{
width:200px;
height:50px;
background-color:darkgoldenrod;
margin-right:5px;
float:right;
}
div#n{
background-color:#DEB887;
width:100%;
}
div#clean{
clear:both;
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: HTML y CSS Alinear elementos en web usando float left y right ejemplo CU01035D (Leído 2146 veces)
RSS -
WAP2