Ir al contenido principal

Tabla que cambia de color al señalar con el cursor

Tabla que cambia de color al señalar con el cursor


Se requiere obtener lo siguiente:



En la imagen anterior se muestra lo que debe ocurrir al situar el cursor del ratón sobre una de las filas de datos de la tabla: el color de fondo de las celdas debe cambiar a amarillo (#FFFF66).
Nota: busca en Internet las imágenes necesarias para representar los símbolos de las diferentes monedas. Las imágenes las debes colocar como imágenes decorativas desde CSS.
Código en html

<!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>

Comentarios

  1. gacetafrontal.com/biografia-de-carlos-augusto-salaverry/
    vemos que tiene una extensa hoja de vida en la que podemos ver que hay incontables aspectos que llegan a retomar lo que sería su interés por la vida militar, la política, la escritura y la diplomacia.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Curriculum Vitae

Ejercicio: A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen: Código  htm l: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Curriculum Vitae de Bruce Wayne</title> <style> body {   font-family: Arial,Verdana,sans-serif; } h1 {  <!--Este se usa para el como se va a ver todos los lineas con h1-->   font-family: Georgia,Times,serif;   font-size: 32px;   font-variant: small-caps; } h2 { <!--Este se usa para el como se va a ver todos los lineas con h2-->   font-family: Georgia,Times,serif;   font-size: 24px;   font-style: italic;   font-variant: small-caps; } li  {   font-weight: bold; } strong {   font-weight: normal; } </style> </head> <body> <h1>Curriculum Vitae de Bruce Wayne</h1> <h2>Datos personales...

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...

Ejercicio dos usasdo HTML y CSS

  En el siguiente enlace se muestra el código no modificado que da solución a la anterior imagen. codigo_sin_modifica Ahora se debe aplicar los siguientes cambios al código: Tienes que tener en cuenta los siguientes requisitos: El texto principal: El color del texto es azul: #00F. El color de fondo del texto es verde claro: #CFC. El tipo de letra es la secuencia: Georgia, Cambria, serif. El tamaño del texto: 16px. El encabezado de nivel 1: El color del texto es rojo claro: #F00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 32px. El encabezado de nivel 2: El color del texto es rojo claro: #A00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 24px. El color de los campos de los datos del libro es verde oscuro: #060. El texto "Internet" y la "Web" cuando actúan como sustantivos: El tamaño del texto: 20px. Texto en negrita. El texto "Hypertext Markup ...