Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Lorenzo31 en 16 de Febrero 2016, 23:04
-
Buenas, dejo las respuestas para el ejercicio.
Ejercicio 1
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos130D.css"/>
</head>
<body>
<div id="primera"></div>
<div id="segunda"></div>
<div id="tercera"></div>
<div id="cuarta"></div>
</body>
</html>
estilos130D.css
html {background-image:url(http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.BancodeImagenesGratuitas.com-Fantasticas-20.jpg); }
body {background-color: yellow; width: 80%; margin:auto; border:solid; background-color:blue;}
div {width:250px; height:250px; margin:30px; padding:30px; }
#primera {background-image:url(http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg?1399003306);
background-color:#FF00FF;}
#segunda { background-image:url(http://img.emol.com/2012/01/25/impresionante-imagen-tierra_14302.jpg);
background-color:#00FFFF; }
#tercera { background-image:url(http://ceibal.elpais.com.uy/wp-content/uploads/2014/01/cerebro-imagen-procesa.jpg);
background-color:blue;}
#cuarta { background-image:url(http://1079638729.rsc.cdn77.org/pic/v2/gallery/preview/art-risunki-volki-zhivotnye-16168.jpg);
background-color:red;}
Ejercicio 2
A
<!DOCTYPE html>
<html>
<head> <meta charset="urf-8"/>
<link rel="stylesheet" type="text/css" href="estilos130DDos.css"/>
</head>
<body>
</body>
</html>
estilos130DDos.css
html{width:1024px; height:768px; background-image:url(http://es.best-wallpaper.net/wallpaper/1024x768/1105/Magic-Earth_1024x768.jpg);
background-color:red; background-repeat:no-repeat; margin:auto;}
B
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos130DTres.css"/>
</head>
<body>
</body>
</html>
estilos130DTres.css
html {background-image:url(http://vignette3.wikia.nocookie.net/pixelpeople/images/9/97/Penguin.png/revision/latest?cb=20130411214626);
background-color:red;}
-
Hola,
en el ejercicio 1 bonitas imágenes.
Al establecer una background-image sobre el elemento html y definir un width del 80% para el body creas un efecto de imagen de fondo (esto no lo pedía el ejercicio). Muchas veces esto se hace definiendo la background-image para body y un div como contenedor para los distintos elementos.
body {background-color: yellow; width: 80%; margin:auto; border:solid; background-color:blue;} tiene una incongruencia: repites dos veces background-color. El efecto cuando ocurre esto es que se aplica el último estilo definido, en este caso lo que se aplicaría sería el background-color blue. De resto todo bien (has agrupado bien las características comunes a los div, aplicando luego las específicas a los id).
En el ejercicio 2-a también bonita imagen. En lugar de margin:auto; es más estándar margin:0 auto; y claro hay que cambiar charset="urf-8"
Una forma alternativa sería:
body{background-image:url(http://es.best-wallpaper.net/wallpaper/1024x768/1105/Magic-Earth_1024x768.jpg);
background-color:red; background-repeat:no-repeat; background-position: center top;}
En el ejercicio 2-b es una pena que el pinguino se vea tan pixelado. Aquí también puedes aplicar la regla sobre body en lugar de sobre el elemento html.
body {background-image:url(http://vignette3.wikia.nocookie.net/pixelpeople/images/9/97/Penguin.png/revision/latest?cb=20130411214626); background-color:red;}
Saludos