Autor Tema: Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial (Leído 3429 veces)

jimmorrison · « **en:** 26 de Abril 2015, 01:29 »

Enunciado:

Citar

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

Código: [Seleccionar]

<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

Código: [Seleccionar]

*{
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;}

Mastermind · « **Respuesta #1 en:** 26 de Abril 2015, 21:55 »

Hola

Citar

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

Citar

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial (Leído 3429 veces)

jimmorrison

Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial

Mastermind

Re:clear CSS both (CU01035D)

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias:

Autor Tema: Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial (Leído 3429 veces)

jimmorrison

Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial

Mastermind

Re:clear CSS both (CU01035D)

Preguntas y respuestas

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación