Autor Tema: Definición de fondo CSS. background-image. Efecto fondo página web. CU01030D (Leído 2846 veces)

LuisM · « **en:** 24 de Noviembre 2017, 18:57 »

Hola a todos !! Dejo los 2 ejercicios de la clase CU01030D del tutorial gratuito de programación web con CSS desde cero. Desde ya muchas gracias por la atención. Un saludo,

Luis

EJERCICIO 1

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

En este ejercicio puse como fondo de los div imagenes de 310x310. Debido a que es la suma del ancho (width)+ los 2 paddings ya que la imagen comienza desde el borde(inclusive).

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>"Ejercicio CU01030D-1"</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/CSS" href="estilos.css">
	</head>
<body>
        <div id="div1">div 1</div>
	<div id="div2">div 2</div>
	<div id="div3">div 3</div>
	<div id="div4">div 4</div>
</body>
</html>

Y la hoja de estilos correspondiente (estilos.css)

Código: [Seleccionar]

/* Curso CSS estilos aprenderaprogramar.com*/
div{
	display:inline-block;
	width:250px;
	height:250px;
	margin:30px;
	border-style:solid;
	border-width:1px;
	padding:30px;
	font-size:40px;
	font-weight:bold;
	}
	#div1{
		background-color:#FADBD8;
		background-image: url("https://i.imgur.com/A0HaQVA.jpg?1"); 
	}
	#div2{
		background-color:#D6EAF8;
		background-image: url("https://i.imgur.com/HsbDBxY.png?1"); 
	}
	#div3{
		background-color:#FCF3CF;
		background-image: url("https://i.imgur.com/CHSzQH3.png?2"); 
	}
	#div4{
		background-color:#D5F5E3;
		background-image: url("https://i.imgur.com/hqkYtoG.jpg"); 
	}

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á dejo los 2 links de las páginas web

a) http://lapaginadeluis.byethost11.com/ejercicioCU01030D-2.html

b) http://lapaginadeluis.byethost11.com/ejercicioCU01030D-3.html

paramonso · « **Respuesta #1 en:** 28 de Noviembre 2017, 12:19 »

Ogramar · « **Respuesta #2 en:** 04 de Junio 2018, 19:36 »

Buenas, comentar que las respuestas a los ejercicios en general deben hacerse incluyendo el código. Pego aquí el código correspondiente a los links por si alguien está interesado en revisarlo (tener en cuenta que los links pueden perderse en un momento dado, de ahí que sea más útil tener aquí el código disponible)

ejercicioCU01030D-2

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>"Ejercicio CU01030D-2"</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/CSS" href="estilosCU01030D-2.css">
	</head>
<body>
  Imagen de fondo grande (1024x768) sin repetición
</body>
</html>

Ejercicio CU01030D-3

<!DOCTYPE html>
<html>
   <head>
      <title>"Ejercicio CU01030D-3"</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/CSS" href="estilosCU01030D-3.css">
   </head>
<body>
Imagen de fondo pequeña (128x128) con repetición
</body>
</html>

Puede verse otra solución a este ejercicio en https://aprenderaprogramar.com/foros/index.php?topic=2404.0

Salu2

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

Noticias: