Buenas noches. Este es el enunciado del ejercicio 1 de la entrega CU01030D del tutorial básico de programación web con CSS:
Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente.
Acá el código:
<!DOCTYPE html>
<html>
<head>
<title>
CU01030D
</title>
<meta charset="utf-8"/>
<style type="text/css">
div{width: 250px; height:250px; margin:30px; padding:30px;}
body div:first-child{background-color:brown;}
body div:nth-child(2){background-color:yellowgreen;}
body div:nth-child(3){background-color:blueviolet;}
body div:last-child{background-color:darkcyan;}
</style>
</head>
<body>
<div><img src="http://i.imgur.com/uxNC4tQ.jpg" alt="poster"/></div>
<div><img src="http://i.imgur.com/79SbdgA.jpg" alt="contrincantes"/></div>
<div><img src="http://i.imgur.com/fOwq8WK.jpg" alt="puñetazos"/></div>
<div><img src="http://i.imgur.com/4Ee8XKJ.jpg" alt="stats"/></div>
</body>
</html>
Este es el enunciado del ejercicio 2:
Crea dos páginas web cumpliendo estos requisitos:
a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.
b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.
Acá el código de la página1:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01030D
</title>
<meta charset="utf-8"/>
<style type="text/css">
body{
background-image:url(http://imagenes-libres.net/upload_wallpaper/1360_768/Planetas%20en%20el%20universo%20HD-jpg_0af0b75d18a6e67.jpg);
}
#cabecera{text-align:center;
color:yellow;
}
#menu{font-size: 1.5em; color:white;}
#menu a{text-decoration: none;}
a:link{color:white;}
a:visited{color:white;}
#cuerpo{background-color:beige;font-size:1.2em;}
</style>
</head>
<body>
<!--INICIO DE LA CABECERA-->
<div id="cabecera">
<h1>El universo</h1>
</div>
<!--FIN DE LA CABECERA-->
<br/>
<!--INICIO DEL CONTENEDOR-->
<div id="contenedor">
<!--INICIO DEL MENÚ-->
<div id="menu">
<p>Menú</p>
<hr/>
<ul>
<li> <a href="Ejercicio2.2 CU01030D Definicion de fondo css Background-image, background-repeat.html" title="constelaciones">Constelaciones</a></li>
</ul>
</div>
<!--FIN DEL MENÚ-->
<hr/>
<!--INICIO DEL CUERPO-->
<div id="cuerpo">
<p>
El universo esconde un gran sin fin de secretos, de los cuales, no alcanzarían la vida
para conocerlos o describirlos todos. La noción que tenemos de el, es extremadamente limitada,
tanto para los expertos como para los no-expertos.
</p>
<p>
En sus principios, la humanidad no se hizo el cuestionamiento respecto a si había algo más de las fronteras
del cielo a causa de diversos motivos: poca evolución, ignorancia, religión, entre otros. Planteamientos que
comenzaron a surgir cuando la mentalidad del ser humano empezó a tomar un poco más de "forma".
</p>
<p>
Todo comenzó cuando el hombre quiso pensar por si mismo y empezó a hacerse preguntas. ¿De donde venimos?,
¿Por qué el cielo es azul?, ¿Hay algo más alla del cielo?, ¿Qué es la tierra?, ¿Hay algo más allá de la tierra?
El interés científico empezó a hacer ruido más que nunca en toda la historia.
</p>
</div>
<!--FIN DEL CUERPO-->
<hr/>
<!--INICIO DEL PIE-->
<div id="pie">
<p>
Copyright: EnigmaticNerd-2017.
</p>
</div>
<!--FIN DEL PIE-->
</div>
<!--FIN DEL CONTENEDOR-->
</body>
</html>
Acá el código de la página2:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01030D
</title>
<meta charset="utf-8"/>
<style type="text/css">
body{
background-image:url(data:image/jpeg;base64,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);
background-repeat:round;
}
#cabecera{text-align:center;
color:gold;
}
#cabecera{border:groove 1px blue; border-width: 10px; width:20%; margin:auto;}
#cuerpo{background-color:beige;font-size:1.2em; text-align:center;}
#pie{background-color:beige; width:40%; margin:auto;}
</style>
</head>
<body>
<!--INICIO DE LA CABECERA-->
<div id="cabecera">
<h1>Constelaciones</h1>
</div>
<!--FIN DE LA CABECERA-->
<br/>
<!--INICIO DEL CONTENEDOR-->
<div id="contenedor">
<hr/>
<!--INICIO DEL CUERPO-->
<div id="cuerpo">
<p>
Las constelaciones son unas de las tantas maravillas del universo. Cada una, de distintas formas y tamaños,
forman parte de los misterios del universo.
</p>
</div>
<!--FIN DEL CUERPO-->
<hr/>
<!--INICIO DEL PIE-->
<div id="pie">
<p>
Copyright: EnigmaticNerd-2017.
<a href="Ejercicio2.1 CU01030D Definicion de fondo css Background-image, background-repeat.html" title="Ir a la principal">Volver a la página principal</a>
</p>
</div>
<!--FIN DEL PIE-->
</div>
<!--FIN DEL CONTENEDOR-->
</body>
</html>
NOTA: También pueden visualizar las páginas del ejercicio 2 en los siguientes links:
http://enigmaticnerd.byethost13.com/Ejercicio2.1%20CU01030D%20Definicion%20de%20fondo%20css%20Background-image,%20background-repeat.htmlhttp://enigmaticnerd.byethost13.com/Ejercicio2.2%20CU01030D%20Definicion%20de%20fondo%20css%20Background-image,%20background-repeat.htmlSi tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: HTML y CSS colocar una imagen de fondo en una web background-image CU01030D (Leído 2973 veces)
RSS -
WAP2