Una barra de navegación (barra de navegación), o en el menú, se pueden colocar horizontalmente en la parte superior o inferior de una página Web. También se puede colocar verticalmente a lo largo de cada lado de la página. El menú de navegación es una lista de enlaces con estilos añadidos para eliminar las viñetas y la numeración y colocar los enlaces correctamente en la página. Puede crear un archivo CSS externo que contiene los estilos navbar por lo que la barra de navegación se verá igual en cada página web a través de todo su sitio web.
Instrucciones
Porción CSS (horizontal)
1 Abrir un documento de texto en blanco.
2 Escriba las líneas siguientes:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Esto eliminará las viñetas o numeración de la lista HTML.
3 Para obligar a los elementos de la lista a la línea horizontal, y no vertical, escriba las líneas siguientes:
li
{
display: inline;
}
Alternativamente, se puede flotar los elementos de la lista mediante la sustitución de "display: inline;" con "float: left;" y añadiendo las siguientes líneas al archivo:
un
{
bloqueo de pantalla;
Ancho: 50px;
}
4 Guarde el archivo con el ".css" extensión de archivo (es decir, "navbar.css").
Porción CSS (vertical)
5 Abrir un documento de texto en blanco.
6 Escriba las líneas siguientes:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Esto eliminará las viñetas o numeración de la lista HTML.
7 Para hacer que toda la zona se puede hacer clic enlace y especificar el ancho, escriba las líneas siguientes:
un
{
bloqueo de pantalla;
Ancho: 50px;
}
Los elementos serán abarcar todo el ancho del bloque.
8 Guarde el archivo con el ".css" extensión de archivo (es decir, "navbar.css").
Porción HTML
9 Abrir un documento de texto en blanco.
10 Para comenzar el documento HTML, TPE de la línea:
<Html>
11 Para vincular el archivo CSS, escriba las líneas:
<Head>
<Link rel = "stylesheet" type = "text / css" href = "navbar.css" />
</ Head>
12 Para crear el menú de navegación, escriba las líneas siguientes:
<Body>
<Ul>
<Li> <a href="example1.html"> Link 1 </a> </ li>
<Li> <a href="example2.html"> Link 2 </a> </ li>
<Li> <a href="example3.html"> Link 3 </a> </ li>
<Li> <a href="example4.html"> Enlace 4 </a> </ li>
</ Ul>
</ Body>
Reemplazar "example1.html", "example2.html", "example3.html" y "example4.html" con las direcciones URL de sus enlaces. Reemplazar "Link 1", "2 Enlace", "Link 3" y "4 Enlace" con el texto que desea aparece en el menú de navegación.
13 Guarde el archivo con la extensión ".html".
14 Abra el archivo en cualquier navegador Web para ver la barra de navegación.