Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 19 de Agosto 2017, 01:40
-
Buenas noches. Este es el enunciado del ejercicio CU01020D del tutorial de programación web con CSS usando Notepad++ como editor:
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>
Acá el código:
<!DOCTYPE html>
<html>
<head>
<title>
CU01020D
</title>
<meta charset="utf-8"/>
<style type="text/css">
#contenedor{
width:50%;
margin:auto;
margin-top: 2%;
font-size: 22px;
text-align:center;
}
/*Estilos para el color RGB (178,34,34)*/
#primero{background-color: rgba(0, 0, 255, 0.3);}
#primero div:first-child{color:rgba(178,34,34,0.1);}
#primero div:nth-child(2){color:rgba(178,34,34,0.2);}
#primero div:nth-child(3){color:rgba(178,34,34,0.3);}
#primero div:nth-child(4){color:rgba(178,34,34,0.4);}
#primero div:nth-child(5){color:rgba(178,34,34,0.5);}
#primero div:nth-child(6){color:rgba(178,34,34,0.6);}
#primero div:nth-child(7){color:rgba(178,34,34,0.7);}
#primero div:nth-child(8){color:rgba(178,34,34,0.8);}
#primero div:nth-child(9){color:rgba(178,34,34,0.9);}
#primero div:last-child{color:rgba(178,34,34,1.0);}
/*Estilos para el color RGB(218,165,32)*/
#segundo{background-color: rgba(0,0,0,0.6);}
#segundo div:first-child{color:rgba(218,165,32,0.1);}
#segundo div:nth-child(2){color:rgba(218,165,32,0.2);}
#segundo div:nth-child(3){color:rgba(218,165,32,0.3);}
#segundo div:nth-child(4){color:rgba(218,165,32,0.4);}
#segundo div:nth-child(5){color:rgba(218,165,32,0.5);}
#segundo div:nth-child(6){color:rgba(218,165,32,0.6);}
#segundo div:nth-child(7){color:rgba(218,165,32,0.7);}
#segundo div:nth-child(8){color:rgba(218,165,32,0.8);}
#segundo div:nth-child(9){color:rgba(218,165,32,0.9);}
#segundo div:last-child{color:rgba(218,165,32,1.0);}
</style>
</head>
<body>
<!--INICIO DEL CONTENEDOR-->
<div id="contenedor">
<!--INICIO DEL PRIMER BLOQUE-->
<div id="primero">
<div>RGB 178,34,34 con transparencia 0.1</div>
<div>RGB 178,34,34 con transparencia 0.2</div>
<div>RGB 178,34,34 con transparencia 0.3</div>
<div>RGB 178,34,34 con transparencia 0.4</div>
<div>RGB 178,34,34 con transparencia 0.5</div>
<div>RGB 178,34,34 con transparencia 0.6</div>
<div>RGB 178,34,34 con transparencia 0.7</div>
<div>RGB 178,34,34 con transparencia 0.8</div>
<div>RGB 178,34,34 con transparencia 0.9</div>
<div>RGB 178,34,34 con transparencia 1.0</div>
</div>
<!--FIN DEL PRIMER BLOQUE-->
<hr/>
<!--INICIO DEL SEGUNDO BLOQUE-->
<div id="segundo">
<div>RGB 218,165,32 con transparencia 0.1</div>
<div>RGB 218,165,32 con transparencia 0.2</div>
<div>RGB 218,165,32 con transparencia 0.3</div>
<div>RGB 218,165,32 con transparencia 0.4</div>
<div>RGB 218,165,32 con transparencia 0.5</div>
<div>RGB 218,165,32 con transparencia 0.6</div>
<div>RGB 218,165,32 con transparencia 0.7</div>
<div>RGB 218,165,32 con transparencia 0.8</div>
<div>RGB 218,165,32 con transparencia 0.9</div>
<div>RGB 218,165,32 con transparencia 1.0</div>
</div>
<!--FIN DEL SEGUNDO BLOQUE-->
</div>
<!--FIN DEL CONTENEDOR-->
</body>
</html>
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, el ejercicio cumple con lo que se pedía.
Por favor para poner el título de los temas guíate por lo que se dice en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
Es preferible empezar poniendo una descripción y palabras clave y terminar con el código del ejercicio.
Saludos
-
Buenos días. Me disculpo por no hacer cuidado en la normas del foro para publicar correctamente; todos los temas los he publicado de la misma forma.
Aplicaré la regla al próximo post. Gracias por la revisión y aclaración.