Buenas buenas!!! Les dejo mi solución para el ejercicio de la entrega numero CU01019D del taller de programación web con CSS.
Como siempre espero comentarios y.... Saludos!!!!
PD: dejo una modificación que hice, agregando la misma resolución pero sin usar tablas... costo... tuve que releer partes del curso pero salio!!!!
CU01019D.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--Código base para el curso -->
<html>
<head>
<title>Ejercicio CU01019D</title>
<meta charset="utf-8" />
<meta name="description" content="Resolucion ejercicio entrega numero 19" />
<meta name="keywords" content="colores, html, rgb, hexadecimal" />
<link rel="stylesheet" type="text/css" href="CU01019D.css"/>
</head>
<!-- Contenido de la página web -->
<body>
<!-- Tabla de codigo de colores -->
<div class="divTablaCentrada">
<table class="tablaCodigoColores">
<caption>Algunos códigos de colores</caption>
<tr>
<td> Nombre HTML</td>
<td> Hexadecimal</td>
<td> RGB</td>
</tr>
<tr>
<td>DimGray</td>
<td>#696969</td>
<td>105,105,105</td>
</tr>
<tr>
<td>IndianRed</td>
<td>#CD5C5C</td>
<td>205,92,92</td>
</tr>
<tr>
<td>FireBrick</td>
<td>#B22222</td>
<td>178,34,34</td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>#1E60FF</td>
<td>30,144,255</td>
</tr>
<tr>
<td>Indigo</td>
<td>4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</div>
<!-- Fin tabla codigo colores -->
<P></P>
<!-- Otra solución sin usar tablas -->
<div class="colores">
<h1>Algunos códigos de Colores</h1>
<div id="encabezado">
<span>Nombre HTML</span><span>Hexadecimal</span><span>RGB</span>
</div>
<div id="miDimGray">
<span>DimGray</span><span>#696969</span><span>105,105,105</span>
</div>
<div id="miIndianRed">
<span>IndianaRed</span><span>#CD5C5C</span><span>205,92,92</span>
</div>
<div id="miFireBrick">
<span>FireBrick</span><span>#B22222</span><span>178,34,34</span>
</div>
<div id="miDodgerBlue">
<span>DodgerBlue</span><span>#1E90FF</span><span>30,144,255</span>
</div>
<div id="miIndigo">
<span>Indigo</span><span>#4B0082</span><span>75,0,130</span>
</div>
</div>
</body>
<!-- Fin del contenido de la página web -->
</html>
CU01019D.css
/*Hoja de estilo para resolucion ejercicio entrega numero 19
curso aprender CSS desde 0 - aprenderaprogramar.com */
/* Primera solucion usando tabla */
/* ajustes comunes para la tabla */
div.divTablaCentrada table.tablaCodigoColores{
text-align: center;
margin:auto;
font-size: 150%;
width: 50%;
}
/* ajustes al Titulo de la tabla */
div.divTablaCentrada table.tablaCodigoColores caption{
border: solid;
background-color: yellow;
padding:20px;
}
/* ajustes de las filas de la tabla
repito en cada fila el atributo "color" mas que nada por si
se cambia el background no tener que ir agregando esas lineas */
div.divTablaCentrada table.tablaCodigoColores tr:nth-child(2){
background-color: dimgray;
color:white;
}
div.divTablaCentrada table.tablaCodigoColores tr:nth-child(3){
background-color: indianred;
color:white;
}
div.divTablaCentrada table.tablaCodigoColores tr:nth-child(4){
background-color: firebrick;
color:white;
}
div.divTablaCentrada table.tablaCodigoColores tr:nth-child(5){
background-color: dodgerblue;
}
div.divTablaCentrada table.tablaCodigoColores tr:nth-child(6){
background-color: indigo;
color:white;
}
/* Segunda solución sin usar tablas */
/* Atributos del div principal */
.colores {
background-color: aqua;
text-align: center;
padding: 1px 10px 30px 10px;
width:700px;
margin: auto;
}
/* Atributos para todos los span */
.colores span{
text-align: center;
border: none;
width: 200px;
display: inline-block;
color: white;
padding: 10px;
font-size: 130%;
}
/* Atributos especiales para cada div (que contiene 3 span) por separado */
#encabezado span{
color:black;
}
#miDimGray span{
background-color: dimgray;
}
#miIndianRed span{
background-color: indianred;
}
#miFireBrick span{
background-color: firebrick;
}
#miDodgerBlue span{
background-color: dodgerblue;
color: black;
}
#miIndigo span{
background-color: indigo;
}
Tema: HTML y CSS transformar un diseño con tabla en otro usando div y span CU01019D (Leído 2181 veces)
RSS -
WAP2