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

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 {  font-family: Georgia,Times,serif; font-size: 32px; font-variant: small-caps; } 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 ...

curso html

Buscar este blog