CSS barra de navegación
Barra de navegación
el uso adecuado de navegación para cualquier sitio web es muy importante.
Con CSS se puede convertir en una bonita barra de navegación HTML en lugar de menús aburridos.
Navegación Lista vincula =
Como una barra de navegación basado en el estándar HTML es una necesidad
. En nuestro ejemplo vamos a crear una lista de HTML barra de navegación estándar.
Barra de navegación es básicamente una lista de enlaces, a fin de utilizar <ul> y <li> Los elementos son muy significativas:
Ejemplos
<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>
Trate »
Ahora, vamos a eliminar márgenes y el relleno de la lista:
Ejemplos de análisis:
- list-style-type: ninguno - antes de retirar la lista de banderas pequeñas. Una barra de navegación no necesita marcadores lista
- Retire ajuste predeterminado márgenes y el relleno conjunto del navegador a 0
El código de ejemplo anterior se encuentra en los códigos de barras verticales y horizontales de navegación estándar utilizados.
barra de navegación vertical
El código anterior, sólo necesitamos elementos de estilo <a>, el establecimiento de una barra de navegación vertical:
El ejemplo muestra:
- display: block - mostrar enlaces elemento de bloque, por lo que la totalidad se convierte en una zona de enlace activo (no sólo texto), lo que nos permite especificar el ancho
- Ancho: 60px - Los elementos de bloque por defecto es la anchura máxima. Queremos especificar una anchura de 60 píxeles
Consejo: Ver ejemplo de un estilo totalmente barra de navegación vertical .
Nota: Asegúrese de especificar el ancho del elemento en los <a> barra de navegación vertical 's.Si se omite el ancho, IE6 puede producir resultados inesperados.
Barra de navegación horizontal
Hay dos maneras de crear una barra de navegación horizontal. Use elementos de listaintegrado o flotante.
Ambos métodos están bien, pero si quieres enlazar con el mismo tamaño, debe utilizar el método de flotación.
elementos de la lista en línea
Uno de construir una barra de navegación horizontal es especificar
ejemplos de análisis:
- display: inline; - Por defecto, <li> elemento es un elemento de bloque. A continuación, se elimina los saltos de línea antes y después de cada elemento de la lista, para mostrar la línea.
Consejo: Ver ejemplo de una barra de navegación horizontal totalmente de estilo .
Flotante elementos de la lista
En el ejemplo anterior enlaces tienen diferentes anchuras.
Para todos los enlaces de igual anchura, flotar <li> y especificar el ancho del elemento <a>:
ejemplos de análisis:
- float: left - utilizar las diapositivas elemento deslizante al lado del otro
- display: block - mostrar enlaces elemento de bloque, por lo que la totalidad se convierte en una zona de enlace activo (no sólo texto), lo que nos permite especificar el ancho
- Ancho: 60px - Los elementos de bloque por defecto es la anchura máxima. Queremos especificar una anchura de 60 píxeles
Consejo: Ver ejemplo de una barra de navegación horizontal totalmente de estilo. .