Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 01 de Septiembre 2017, 02:19
-
Buenas noches. Este es el enunciado del ejercicio CU01031D del curso básico de programación web con CSS:
Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01031D
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01031.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Acá la hoja de estilos css:
/*Estilos CU01031*/
*{
margin: auto 20%;
}
div{
width:400px;
height:400px;
margin:40px;
padding:40px;
border:1px solid blue;
background-position: center;
}
body div:first-child{
background-image:url("../../imagenes/vida.jpg");
background-color:yellow;
}
body div:nth-child(2){
background-image:url("../../imagenes/vida1.jpg");
background-color: salmon;
}
body div:nth-child(3){
background-image:url("../../imagenes/vida3.jpg");
background-color: aqua;
}
body div:last-child{
background-image:url("../../imagenes/vida4.jpg");
background-color: brown;
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Corrijan la identificación del ejercicio, es CU01031D. A quien pueda, por favor.
-
Hola EnigmaticNerd las imágenes no son visibles porque al haber puesto rutas relativas a tu computador, las demás personas no podemos verlas (para poder verlas tendrían que ser urls de internet)
Como he comentado en un ejercicio anterior, puede ser más recomendable usar identificación por id que con nth-child ya que si se introducen nuevos elementos se perdería la configuración
Saludos
-
Lo siento. Recuerdo que ese día el internet estaba muy lento y no podía subir las imágenes a la página.
Acá la hoja de estilos CSS coreggida:
/*Estilos CU01031*/
*{
margin: auto 20%;
}
div{
width:400px;
height:400px;
margin:40px;
padding:40px;
border:1px solid blue;
background-position: center;
}
body div:first-child{
background-image:url(https://i.imgur.com/qCDOsCR.jpg);
background-color:yellow;
}
body div:nth-child(2){
background-image:url(https://i.imgur.com/jEd47El.jpg);
background-color: salmon;
}
body div:nth-child(3){
background-image:url(https://i.imgur.com/EarnVsy.jpg);
background-color: aqua;
}
body div:last-child{
background-image:url(https://i.imgur.com/h4JE4rA.jpg);
background-color: brown;
}
Gracias por la corrección.