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: wilfridocardena en 13 de Mayo 2015, 03:08
-
Enunciado
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
<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
#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; }
-
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