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: pedro,, en 21 de Septiembre 2015, 16:12
-
Otro ejercicio de CSS (CU01058D):
EJERCICIO
En numerosas ocasiones queremos crear un diseño para una página web o aplicación parecido al que nos encontramos en otra página web. Supón que has encontrado el siguiente diseño. Crea el código HTML y CSS para lograr un resultado lo más parecido posible a lo que se ve en la siguiente imagen, donde tenemos una tabla con bordes redondeados.
(https://lh3.googleusercontent.com/-SUVjcfTA0Zc/U-oPobDvuEI/AAAAAAAAA3s/9ZR8YV-lYR0/s600/CU01058D_3.png)
HTML:
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01058D.css">
</head>
<body>
<table>
<th><div class="borderSuperiores" id="column1">Standard</div></th> <th><div class="borderSuperiores" id="column2">Profesional</div></th> <th><div class="borderSuperiores" id="column3">Enterprise</div></th>
<tr>
<td><div class="chekverde" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
</tr>
<tr>
<td><div class="chekverde" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
</tr>
<tr>
<td><div class="aspaRoja" id="column1"></div></td> <td><div class="chekverde" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
</tr>
<tr>
<td><div class="aspaRoja" id="column1"></div></td> <td><div class="aspaRoja" id="column2"></div></td> <td><div class="chekverde" id="column3"></div></td>
</tr>
<tfoot>
<tr>
<td><div class="bordesInferiores" id="column1">$99</div></td><td><div class="bordesInferiores" id="column2">$199</div></td><td ><div class="bordesInferiores" id="column3">$399</div></td>
</tr>
</tfoot>
</table>
</body>
</html>
CSS:
*{margin:0; padding:0;}
table{
width: 600px;
height: 300px;
margin: auto; /*centra la tabla horizontalmente*/
}
table tfoot div, table th div{
font-weight: bold; font-size: 22px;
display: table-cell; vertical-align: middle;
}
table div{
text-align: center;
width: 200px;
height: 50px;
background-color: lightgrey;
background-repeat: no-repeat; background-position: 50%;
}
table, th, td{
border: solid 1px white;
border-collapse: collapse;
}
.chekVerde{background-image: url(chekVerde.png);}
.aspaRoja{background-image: url(aspaRoja.png);}
.bordesInferiores{border-radius: 0px 0px 10px 10px; }
.borderSuperiores{border-radius: 10px 10px 0px 0px; }
#column3{background-color: 66FF66;}
Estas son las dos imágenes que usé:
(http://i.imgur.com/LbraO64.png?1)
(http://i.imgur.com/WX1dBA4.png?1)
Como duda, quería preguntar si se puede hacer que cambie de color una columna entera de una tabla al pasar el ratón por encima de cualquier celda de esa columna.
Saludos.
-
Hola He usado los links de imágenes para referenciarlas así:
.chekVerde{background-image: url('http://i.imgur.com/WX1dBA4.png?1');}
.aspaRoja{background-image: url('http://i.imgur.com/LbraO64.png?1');}
¡Te ha quedado del 10!
Una cosa que diría que no está bien es aplicar id="column1" a varios elementos, id="column2" a varios elementos, etc. Un id es algo único, por ello no debe haber varios elementos con id repetido. Si quieres aplicar algo repetido lo que debemos usar es class.
Sobre tu consulta del cambio de color de una columna sí se podría hacer, quizás usando hover (http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=752:pseudoclases-css-link-visited-focus-hover-y-active-estilos-y-efectos-en-links-propiedad-outline-cu01047d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203) pero resulta mucho más potente usar javascript (http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206)
Salu2
-
Hola.
Usé los id porque pensaba que que un elemento no podía pertenercer a dos clases distintas.
Ahora estuve revisando información y vi que si se puede hacer, no copio todo el código, pero ahora los elementos div afectados los escribí de la siguiente forma:
<div class="borderSuperiores column3">
<div class="chekverde column3">
Ahora ya lo tengo corregido, muchas gracias por los comentarios.
Ahora que mencionas JavaScript, ¿que recomiendas para cuando acabe con CSS?
¿PHP o JavaScript?
Saludos.
-
Yo diría que mejor primero JavaScript, así tendrás todas las bases para trabajar PHP sin limitaciones o dudas derivadas de no conocer JavaScript
Salu2