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

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

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

Lista que el seleccionar aparece con borde

Ejercicio: Crea una página web con un menú etiquetado con una lista que tenga el mismo aspecto que la siguiente imagen: Código html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Página web con menú</title> <style> ul { list-style-type: none; text-align: center; /* Se debe escoger la anchura correcta para que la palabra mas grande de la lista se pueda ver completa*/ width: 120px; padding: 0; } li { background-color: #00F; color: #FFF; /* El borde blanco separa los elementos */ border: 2px solid #FFF; } li a { color: #FFF; text-decoration: none; /* Necesario para que el enlace ocupe todo el ancho del elemento de la lista */ display: block; width: 100%; } /* Borde que aparece cuando se situa el ratón encima de un elemento de la lista*/ li a:hover, li a:focus { /* ¿Qué pasa si se utiliza la propiedad border */ outline: 2px solid #F00; } </style> </head> <body...

curso html

Buscar este blog