Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 26 de Septiembre 2016, 07:16
-
Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Ejemplos círculo o elipse (CU01058D)
Bueno, logre que fuera "CASI" igual (o al menos eso pienso). Aquí les dejo una imagen de referencia:
(https://lh3.googleusercontent.com/-SUVjcfTA0Zc/U-oPobDvuEI/AAAAAAAAA3s/9ZR8YV-lYR0/s600/CU01058D_3.png)
Y aquí les dejo el codigo, ejercicio CU01058D del curso de bases de la programación web con CSS:
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border-radius</title>
<link rel="stylesheet" type="text/css" href="tablas.css">
</head>
<body>
<table class="tabla-destacada">
<thead>
<th>Standard</th>
<th>Professional</th>
<th>Enterprise</th>
</thead>
<tbody>
<tr>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
</tbody>
<tfoot>
<th>$99</th>
<th>$199</th>
<th>$399</th>
</tfoot>
</table>
</body>
</html>
Código CSS
/*ESTILOS DE TABLA*/
/*General*/
.tabla-destacada{width: 575px; border-spacing: 1px; font-family: arial, sans-serif; color: #444;}
.tabla-destacada td,
.tabla-destacada th{width: 33%; padding: 15px;
background-color: #E5E5E5;
text-align: center; font-size: 20px;}
.tabla-destacada td:last-child,
.tabla-destacada th:last-child{background-color: #DDEFBF;}
/*FIN General*/
/*Por partes*/
.tabla-destacada thead th{border-bottom: 1px groove #FFF;
border-radius: 10px 10px 0 0}
.tabla-destacada tbody td{border-bottom: 1px groove #FFF;}
.tabla-destacada tfoot th{border-radius: 0 0 10px 10px;}
/*FIN Por partes*/
/*FIN ESTILOS DE TABLA*/
-
Hola Chompy, lo has dejado prácticamente exacto a la imagen, buen trabajo. Como único comentario recomendar que las etiquetas que no tengan cierre específico se cierren con un /> , por ejemplo
<meta charset="utf-8">
Se cerraría <meta charset="utf-8"/>
Esto no es obligatorio pero solemos recomendarlo para cumplir el estándar xhtml.
Saludos