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

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