Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 11 de Septiembre 2016, 19:32
-
Respuestas al ejercicio CU01035D del curso de programación web con CSS.
clear CSS both ¿float no funciona? ¿El texto no envuelve una imagen html? Por qué de problemas (CU01035D)
Aquí esta el ejercicio:
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Atributo float y clear</title>
<link rel="stylesheet" type="text/css" href="float_y_clear.css">
</head>
<body>
<div class="cubos">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br><br><br>
<div class="Texto">
Un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.
</div>
<div class="cubos2">
<div></div>
<div></div>
<div></div>
</div>
<br><br><br>
<div class="apr">Curso CSS aprenderaprogramar.com</div>
</body>
</html>
Código CSS
/*DATOS GENERALES*/
*{font-family: arial; text-align: justify;}
/*Primero*/
/*Los Div*/
.cubos div{width: 50px; height: 50px; margin-right: 5px; float: left;}
/*caracteristicas especiales div*/
.cubos div:nth-child(1){background-color: #F00;}
.cubos div:nth-child(2){background-color: #00F;}
.cubos div:nth-child(3){background-color: #0F0;}
.cubos div:nth-child(4){background-color: #FF0;}
.cubos div:nth-child(5){background-color: #F0F;}
.cubos div:nth-child(6){background-color: #0FF;}
.cubos div:nth-child(7){background-color: #555;}
.cubos div:nth-child(8){background-color: #CCC;}
/*FIN Primero*/
/*Segundo*/
.Texto{background-color: #FF0; margin: 20px 0 20px 0; width: 100%; clear: both;}
/*FIN Segundo*/
/*Tercero*/
.cubos2{clear: both;}
.cubos2 div{width: 200px; height: 50px; margin-right: 5px; float: right;}
/*caracteristicas especiales div*/
.cubos2 div:nth-child(1){background-color: #F70;}
.cubos2 div:nth-child(2){background-color: #1FA;}
.cubos2 div:nth-child(3){background-color: #B5F;}
/*FIN Tercero*/
/*Cuarta*/
.apr{background-color: #DEB887; width: 100%; clear: both; margin-top: 10px;}
/*FIN Cuarta*/
-
Hola Chompy129.
Poco que decirte, todo bien.
Saludos. ;D