Autor Tema: CSS ejercicio resuelto maquetar una web con cuatro columnas float clear CU01036D (Leído 4892 veces)

wilfridocardena · « **en:** 13 de Mayo 2015, 03:08 »

Enunciado

Citar

Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con el aspecto indicado en el enunciado del ejercicio.

Nota: los anchos de los elementos serán del 100 % disponible si es todo el ancho (por ejemplo <<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Menú>>) y del 50 % si es una columna doble (por ejemplo <<Artículo sobre Gimp>>).

Respuesta - código html

Código: [Seleccionar]

<html>
<head>
<title>Ejercicios</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilocajas.css">
</head>
<body>
<div id="uno">Bienvenidos a mi Pagina Web</div> 
<div id="dos">Menu</div> 
<div id="cinco">Articulo Sobre la Familia Rodriguez</div> 
<div id="contienearticulos">
<div id="tres">Conoce las ultimas novedades</div> 
<div id="cuatro">Articulos Importantes</div>
</div>

<div id="seis">Contacta con nostros</div> 
<div id="siete">Aviso Legal</div> 
</body>
</html>

Respuesta - código css

Código: [Seleccionar]

#uno {width:100%;height:50px;background-color:gray;}
#dos {width:25%;height:100px;background-color:yellow;float:left; }
#conienearticulos {width:50%;height:100px;background-color:green;float:left;}
#tres { width:50%;height:50px;background-color:green;float:left; }
#cuatro { width:50%;height:50px;background-color:green; float:left;}
#cinco { width:25%;height:100px;background-color:yellow;float:right; }
#seis {width:50%;height:50px;background-color:blue;float:left;  }
#siete {width:50%;height:50px;background-color:blue;float:left; }

Ogramar · « **Respuesta #1 en:** 14 de Mayo 2015, 09:27 »

Hola wilfrido! Los id tres y cuatro parecen el mismo porque tienen el mismo color de fondo, para que se vea que son distintos deberíamos emplear distintos colores por ejemplo

#tres { width:50%;height:50px;background-color:green;float:left; }
#cuatro { width:50%;height:50px;background-color:pink; float:left;}

Lo mismo ocurre con seis y siete sería mejor distinguir los colores

#seis {width:50%;height:50px;background-color:blue;float:left; }
#siete {width:50%;height:50px;background-color:coral;float:left; }

El ejercicio está bien resuelto, aunque podrías mejorar el unificar el css de algunos elementos para evitar repetición de código y mejorar la presentación (por ejemplo centrar los textos como en este hilo https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0).

Salu2

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

Noticias: