martes, 25 de abril de 2017

SELECTORES AVANZADOS



EJEMPLO DE PLANILLA SITUANDO EL PUNTERO DEL MOUSE SOBRE ÉL CAMBIA A COLOR AMARILLO.




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de selectores avanzados</title>
<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

table, tr, th, td {
  border: 1px solid #333;
  line-height: 2em;
}

th {
  background-color: #F5F5F5;
  padding: 0 .5em;
}

td {
  padding: 0 .3em;
}

th.euro {
  background: #E6F3FF url(imagenes/euro.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.dolar {
  background: #E6F3FF url(imagenes/dolar.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.libra {
  background: #E6F3FF url(imagenes/libra.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

th.yen {
  background: #E6F3FF url(imagenes/yen.png) no-repeat left center;
  padding: 0 .3em 0 1.2em;
}

tr:nth-child(n+1) td {
  text-align: right;
}

tr:nth-child(2n) {
  background-color: #FFFFCC;
}

tr:hover {
  background: #FFFF66;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Cambio</th>
    <th>Compra</th>
    <th>Venta</th>
    <th>Máximo</th>
    <th>Mínimo</th>
  </tr>
  <tr>
    <th class="euro">Euro/Dolar</th>
    <td>1.25</td>
    <td>1.25</td>
    <td>1.25</td>
    <td>1.24</td>
  </tr>
  <tr>
    <th class="dolar">Dolar/Yen</th>
    <td>119.01</td>
    <td>119.05</td>
    <td>119.82</td>
    <td>119.82</td>
  </tr>
  <tr>
    <th class="libra">Libra/Dolar</th>
    <td>1.86</td>
    <td>1.86</td>
    <td>1.86</td>
    <td>1.85</td>
  </tr>
  <tr>
    <th class="yen">Yen/Euro</th>
    <td>0.67</td>
    <td>0.67</td>
    <td>0.66</td>
    <td>0.67</td>
  </tr>
</table>
</body>
</html>

No hay comentarios.:

Publicar un comentario