Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 15 de Noviembre 2017, 18:06
-
Hola a todos !!! paso a dejar el código de respuesta al ejercicio propuesto en la clase CU01020D del tutorial gratuito de programación CSS disponible en esta página web. Desde ya, muchas gracias por la atención. Un saludo,
Luis
PD: Probablemente se pueda resumir la hoja de estilo indicando el color por fila y la transparencia por columna, pero por ahora solo lo puedo hacer así.
EJERCICIO
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>>
Código html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div>
<h3>Tabla Solución</h3>
<table>
<tr>
<td id="td1">RGB 178,34,34 con transparencia 0.1</td>
<td id="td2">RGB 178,34,34 con transparencia 0.2</td>
<td id="td3">RGB 178,34,34 con transparencia 0.3</td>
<td id="td4">RGB 178,34,34 con transparencia 0.4</td>
<td id="td5">RGB 178,34,34 con transparencia 0.5</td>
<td id="td6">RGB 178,34,34 con transparencia 0.6</td>
<td id="td7">RGB 178,34,34 con transparencia 0.7</td>
<td id="td8">RGB 178,34,34 con transparencia 0.8</td>
<td id="td9">RGB 178,34,34 con transparencia 0.9</td>
<td id="td10">RGB 178,34,34 con transparencia 1.0</td>
</tr>
<tr>
<td id="td11">RGB 218,165,32 con transparencia 0.1</td>
<td id="td12">RGB 218,165,32 con transparencia 0.2</td>
<td id="td13">RGB 218,165,32 con transparencia 0.3</td>
<td id="td14">RGB 218,165,32 con transparencia 0.4</td>
<td id="td15">RGB 218,165,32 con transparencia 0.5</td>
<td id="td16">RGB 218,165,32 con transparencia 0.6</td>
<td id="td17">RGB 218,165,32 con transparencia 0.7</td>
<td id="td18">RGB 218,165,32 con transparencia 0.8</td>
<td id="td19">RGB 218,165,32 con transparencia 0.9</td>
<td id="td20">RGB 218,165,32 con transparencia 1.0</td>
</tr>
</table>
</div>
</body>
</html>
Hoja de estilo: estilos.css
/* Curso CSS estilos aprenderaprogramar.com*/
table{border="2px";}
#td1{background-color: RGBA(178,34,34,0.1);}
#td2{background-color: RGBA(178,34,34,0.2);}
#td3{background-color: RGBA(178,34,34,0.3);}
#td4{background-color: RGBA(178,34,34,0.4);}
#td5{background-color: RGBA(178,34,34,0.5);}
#td6{background-color: RGBA(178,34,34,0.6);}
#td7{background-color: RGBA(178,34,34,0.7);}
#td8{background-color: RGBA(178,34,34,0.8);}
#td9{background-color: RGBA(178,34,34,0.9);}
#td10{background-color: RGBA(178,34,34,1.0);}
#td11{background-color: RGBA(218,165,32,0.1);}
#td12{background-color: RGBA(218,165,32,0.2);}
#td13{background-color: RGBA(218,165,32,0.3);}
#td14{background-color: RGBA(218,165,32,0.4);}
#td15{background-color: RGBA(218,165,32,0.5);}
#td16{background-color: RGBA(218,165,32,0.6);}
#td17{background-color: RGBA(218,165,32,0.7);}
#td18{background-color: RGBA(218,165,32,0.8);}
#td19{background-color: RGBA(218,165,32,0.9);}
#td20{background-color: RGBA(218,165,32,1.0);}
td{text-align:center; width:100px; height:100px;}
-
Hola LuisM.
En la primera línea del archivo css tienes este error table{border="2px";}
Hay que quitar el signo igual y las comillas table{border:2px;}.
En el ejercicio se pide : Crea un documento HTML con 20 divisiones.
O sea 20 div.
Solo tienes que cambiar un poco de código para que haga lo que pide de todas las maneras te dejo el código :
Codigo HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body background="1.png"> <!--Si le pones una imagen de fondo se nota mas el efecto de transparencia -->
<div>
<h3>Solución</h3>
<div id="td1">RGB 178,34,34 con transparencia 0.1</div>
<div id="td2">RGB 178,34,34 con transparencia 0.2</div>
<div id="td3">RGB 178,34,34 con transparencia 0.3</div>
<div id="td4">RGB 178,34,34 con transparencia 0.4</div>
<div id="td5">RGB 178,34,34 con transparencia 0.5</div>
<div id="td6">RGB 178,34,34 con transparencia 0.6</div>
<div id="td7">RGB 178,34,34 con transparencia 0.7</div>
<div id="td8">RGB 178,34,34 con transparencia 0.8</div>
<div id="td9">RGB 178,34,34 con transparencia 0.9</div>
<div id="td10">RGB 178,34,34 con transparencia 1.0</div>
<div id="td11">RGB 218,165,32 con transparencia 0.1</div>
<div id="td12">RGB 218,165,32 con transparencia 0.2</div>
<div id="td13">RGB 218,165,32 con transparencia 0.3</div>
<div id="td14">RGB 218,165,32 con transparencia 0.4</div>
<div id="td15">RGB 218,165,32 con transparencia 0.5</div>
<div id="td16">RGB 218,165,32 con transparencia 0.6</div>
<div id="td17">RGB 218,165,32 con transparencia 0.7</div>
<div id="td18">RGB 218,165,32 con transparencia 0.8</div>
<div id="td19">RGB 218,165,32 con transparencia 0.9</div>
<div id="td20">RGB 218,165,32 con transparencia 1.0</div>
</div>
</body>
</html>
Codigo CSS
/* Curso CSS estilos aprenderaprogramar.com*/
#td1{background-color: RGBA(178,34,34,0.1);}
#td2{background-color: RGBA(178,34,34,0.2);}
#td3{background-color: RGBA(178,34,34,0.3);}
#td4{background-color: RGBA(178,34,34,0.4);}
#td5{background-color: RGBA(178,34,34,0.5);}
#td6{background-color: RGBA(178,34,34,0.6);}
#td7{background-color: RGBA(178,34,34,0.7);}
#td8{background-color: RGBA(178,34,34,0.8);}
#td9{background-color: RGBA(178,34,34,0.9);}
#td10{background-color: RGBA(178,34,34,1.0);}
#td11{background-color: RGBA(218,165,32,0.1);}
#td12{background-color: RGBA(218,165,32,0.2);}
#td13{background-color: RGBA(218,165,32,0.3);}
#td14{background-color: RGBA(218,165,32,0.4);}
#td15{background-color: RGBA(218,165,32,0.5);}
#td16{background-color: RGBA(218,165,32,0.6);}
#td17{background-color: RGBA(218,165,32,0.7);}
#td18{background-color: RGBA(218,165,32,0.8);}
#td19{background-color: RGBA(218,165,32,0.9);}
#td20{background-color: RGBA(218,165,32,1.0);}
Un saludo ;)
-
Muchísimas gracias por las correcciones !!!
Un saludo
Luis
PD: y muchas gracias también por tus revisiones en otros ejercicios. :)