Ejemplo lista con colores

Ejemplo lista con colores en HTML Y CSS

Se requiere obtener lo siguiente:

Código en html y css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a {
color: #F00;
text-decoration: none;
}

a:visited {
color: #0A0;
}

a:hover {
color: #FFF;
background-color: #F00;
text-decoration: underline;
}

a:focus {
color: #00F;
text-decoration: underline;
}

a:active {
color: #F60;
background-color: #FFF;
}
</style>
</head>
<body>
<h1>Universidad de Alicante</h1>

<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>

Comentarios

Entradas más populares de este blog

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

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen: Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de listas</title> <style> .lista-sin { list-style-type: none; } .lista-circulos { list-style-type: circle;  } .lista-cuadrados { list-style-type: square; } .lista-romanos { list-style-type: lower-roman; } .lista-griegos { list-style-type: lower-greek; } </style> </head> <body> <p>Lista sin elemento gráfico:</p> <ul class="lista-sin"> <li>...

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.dol...

curso html

Buscar este blog