Instituto Oficial Cristo Rey

1. GRUPO
# “3”
PROFESOR: MELVIN QUEZADA

2. BARRAS DE NAVEGACIÓN
• TENER UNA NAVEGACIÓN FÁCIL DE USAR ES IMPORTANTE PARA
CUALQUIER SITIO WEB.
• CON CSS SE PUEDE TRANSFORMAR MENÚS HTML ABURRIDAS EN
BARRAS DE BUEN ASPECTO DE NAVEGACIÓN.

3. BARRA DE NAVEGACIÓN =
LISTA DE ENLACES
• BARRA DE NAVEGACIÓN = LISTA DE ENLACES
• UNA BARRA DE NAVEGACIÓN NECESITA HTML ESTÁNDAR COMO
BASE.
• EN NUESTROS EJEMPLOS VAMOS A CONSTRUIR LA BARRA DE
NAVEGACIÓN DE UNA LISTA HTML ESTÁNDAR.
• UNA BARRA DE NAVEGACIÓN ES BÁSICAMENTE UNA LISTA DE
ENLACES, POR LO QUE EL USO DE LA ETIQUETA <UL> Y <LI>
ELEMENTOS HACE PERFECTO SENTIDO:

4. EJEMPLO
• <UL>
<LI><A HREF ="DEFAULT.ASP">HOME</A></LI>
<LI><A HREF =« NEWS.ASP">NEWS</A></LI>
<LI><A HREF ="CONTACT.ASP">CONTACT</A></LI>
<LI><A HREF="ABOUT.ASP">ABOUT</A></LI>
</UL>
• AHORA VAMOS A QUITAR LAS BALAS Y LOS MÁRGENES Y EL
RELLENO DE LA LISTA
UL {
LIST-STYLE-TYPE: NONE;
MARGIN: 0;
PADDING: 0;
}

5. VERTICAL BARRA DE
NAVEGACIÓN
• PARA CONSTRUIR UNA BARRA DE NAVEGACIÓN VERTICAL, PUEDE
ESTILO DE LOS ELEMENTOS <A> DENTRO DE LA LISTA, ADEMÁS DEL
CÓDIGO DE SEGURIDAD:
• EJEMPLO
LI A {
DISPLAY: BLOCK;
WIDTH: 60PX;
}

6. EJEMPLO
UL {
LIST-STYLE-TYPE: NONE;
MARGIN: 0;
PADDING: 0;
WIDTH: 60PX;
}
LI A {
DISPLAY: BLOCK;
}

7. EJEMPLOS VERTICAL DE LA
BARRA DE NAVEGACIÓN
CREAR UNA BARRA DE NAVEGACIÓN VERTICAL BÁSICO CON UN
COLOR DE FONDO GRIS Y CAMBIAR EL COLOR DE FONDO DE LOS
ENLACES CUANDO EL USUARIO MUEVE EL RATÓN SOBRE ELLOS:

8. • UL {
LIST-STYLE-TYPE: NONE;
MARGIN: 0;
PADDING: 0;
WIDTH: 200PX;
BACKGROUND-COLOR: #F1F1F1;
}
LI A {
DISPLAY: BLOCK;
COLOR: #000;
PADDING: 8PX 0 8PX 16PX;
TEXT-DECORATION: NONE;
}
/* CHANGE THE LINK COLOR ON HOVER */
LI A:HOVER {
BACKGROUND-COLOR: #555;
COLOR: WHITE;
}

9. CENTRO DE ENLACES Y
AGREGAR BORDES
• AÑADIR TEXT-ALIGN:CENTER A <LI> O <A> PARA CENTRAR
LOS ENLACES.
• AÑADIR LA BORDER PROPIEDAD A <UL> AÑADIR UN
BORDE ALREDEDOR DE LA BARRA DE NAVEGACIÓN. SI
USTED TAMBIÉN QUIERE FRONTERAS DENTRO DE LA
BARRA DE NAVEGACIÓN, AÑADIR UN BORDER-BOTTOM A
TODOS LOS <LI> ELEMENTOS, A EXCEPCIÓN DE LA ÚLTIMA:

10. • UL {
• BORDER: 1PX SOLID #555;
• }
• LI {
• TEXT-ALIGN: CENTER;
• BORDER-BOTTOM: 1PX SOLID #555;
• }
• LI:LAST-CHILD {
• BORDER-BOTTOM: NONE;
• }
• INTÉNTALO TÚ MISMO "

11. •GRACIAS POR SU
ATENCIÓN.