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

Google Activate. Módulo 2: Cómo se define la presentación de los elementos de una página web

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

curso html

Buscar este blog