Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: jimmorrison en 26 de Abril 2015, 01:29
-
Enunciado:
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>>
Nota: si es necesario, usa los div contenedores auxiliares que te sean necesarios.
Respuesta:
html
<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ejercicio_clear.css">
</head>
<body>
<div id="caja1" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja2" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja3" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja4" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja5" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja6" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja7" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja8" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="cajas_1" class="cajas_1">
uno cajas
</div>
<div id="cajas_2" class="cajas_1">
dos cajas
</div>
<div id="cajas_3" class="cajas_1">
tres cajas
</div>
<div id="cajas_1_4" class="cajas_2">
Curso CSS aprenderaprogramar.com
</div>
<footer>
hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;}
.cajas{
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}
#caja1{
background-color: red;}
#caja2{
background-color: blue;}
#caja3{
background-color: brown;
}
#caja4{
background-color: black;
}
#caja5{
background-color: yellow;
}
#caja6{
background-color: purple;
}
#caja7{
background-color: orange;
}
#caja8{
background-color: silver;
}
.texto{
text-align: center;
background-color: yellow;
}
.cajas_1{
width: 200;
height: 50px;
margin-right: 5px;
float: right;
}
#cajas_1{background-color: green;}
#cajas_2{background-color: blue;}
#cajas_3{background-color: orange;}
#cajas_1_4{
background-color: #DEB887;
font-size: 5em;
text-align: center;
}
footer{
text-align: center;
font-size: 50px;
font-family: arial;}
-
Hola
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.
Lo veo bien hecho
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.
Esto no lo veo, parece que falta¿?
Saludos ;)