HTML - Menú de navegación
Ejercicio 29:
Crear una página en html, agregar minimamente:
1. Un nombre a la página
2. CSS de forma interna:
a. Un menú de navegación de al menos 3 páginas
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML - Menú de navegación</title>
<!-- OVERFLOW - hidden: recorta nuestro texto/imagen/etc, scroll: añade una barra por lo que no recorta nuestro texto/imagen/etc, auto: añade o no la barra dependiendo si es o no necesario por lo que no recorta nuestro texto/imagen/etc
DISPLAY - block: uno debajo del otro (en nuestro caso responde el padding), inline-block: uno al lado del otro -->
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover{
background-color: #111111;
}
</style>
</head>
<body>
<main>
<h1>Menú de navegación en HTML</h1>
<p>También usamos CSS de foma interna/incrustada</p>
<!-- Un menú clásico de navegación podría contener como items: Inicio/Home, Contacto/Contact, Acerca/About, etc...
En el caso de este ejemplo utiicé páginas que habíamos creado en el taller -->
<ul>
<!-- ../ para salir de la carpeta actual e ir a carpeta anterior, / para entrar en la carpeta -->
<li><a href="../Imagen/index.html">Imágen</a></li>
<li><a href="../Enlace/index.html">Enlace</a></li>
<li><a href="../listas/index.html">Listas</a></li>
</ul>
</main>
</body>
</html>
Comentarios
Publicar un comentario