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: Pandemia en 02 de Abril 2016, 22:58
-
Buenas noches amigos aquí os dejo el ejercicio a ver qué os parece, he tenido un poco de dificultad pero creo que al final a salido bien al final, bueno ya me diréis.
Gracias por vuestro tiempo.
Saludos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Efecto css de esquinas redondeadas: border-radius. portal web aprenderaprogramar.com</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="efecto css de esquinas redondeadas: border-radius">
<meta charset="utf-8">
<style>
*{margin: 10px;}
table{
float: left;
background-color: #e2dcdc;
text-align: center;
margin: 50px 1px 50px 1px;
font-size: 20px;
border-radius: 3%;
font-family: helvetica,arial;
}
.tabla-3{background-color: #dcf9bb;}
.visto{
color: #7EE57E;
font-weight:900;
text-shadow: 1px 1px green, -1px -1px green;
}
.aspa{
color: #FF6F71;
font-weight: 900;
text-shadow: 1px 1px red, -1px -1px red;
}
th, td {
padding: 15px 50px 15px 50px;
margin: 20px;
border-bottom: 1px solid #dbd9d9;
}
tfoot th {
border-bottom-style: hidden;
}
</style>
</head>
<body>
<table class="tabla-1">
<thead>
<tr>
<th>Standar</th>
</tr>
</thead>
<tbody>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="aspa">
<td>✘</td>
</tr>
<tr class="aspa">
<td>✘</td>
</tr>
</tbody>
<tfoot>
<th>$99</th>
</tfoot>
</table>
<table class="tabla-2">
<thead>
<tr>
<th>Profesional</th>
</tr>
</thead>
<tbody>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="aspa">
<td>✘</td>
</tr>
</tbody>
<tfoot>
<th>$199</th>
</tfoot>
</table>
<table class="tabla-3">
<thead>
<tr>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
<tr class="visto">
<td>✓</td>
</tr>
</tbody>
<tfoot>
<th>$399</th>
</tfoot>
</table>
</body>
</html>
-
Hola Pandemia,
lo veo resuelto bien. Además me gusta el detalle de usar '✘' o '✓', en vez de usar imagenes de otras direcciones o imagenes en nuestro directorio de la web.
Saludos!!!
-
Muchas gracias bermartinv, me costó un poco dar con la numeración de los caracteres pero al final di con ellos, le di color de fondo sombra, establecí el grosor del caracter y me quedo bien.
Saludos