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:
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
Publicar un comentario