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

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
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
« última modificación: 04 de Junio 2018, 19:33 de Ogramar »

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Ok. :D

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2488
    • Ver Perfil
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

 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".