Cómo crear una barra de navegación horizontal CSS Uso

Creación de una barra de navegación horizontal mediante CSS es una habilidad valiosa HTML. Usted puede construir barras de navegación profesionales que se pueden utilizar en cualquier sitio web. Usted puede cambiar el color, tamaño de fuente y colores de borde y sin la posibilidad de subir nuevas imágenes o cambiar el código en cada página.

Instrucciones

1 Abre el archivo HTML en la página de inicio bloc de notas y crear una lista desordenada de elementos de navegación que va a incluir en su barra de navegación en su página. Esto es sólo una lista simple como si usara para crear una lista con viñetas o numerada en su página web. Se ve así: <ul> <li> Su primera partida de navegación </ li> <li> su segunda página de navegación </ li> y termina con </ ul>.

2 Añadir la etiqueta <nav> a la lista de etiquetas. Por lo tanto, el código HTML se parece a esto: <ul id = "nav"> <id = "nav-página en primer lugar" li> <a href="link a su primera page"> Primera navegación página Rumbo </a> </ li > <li id ​​= "nav-segundapagina"> <a href="link a su segunda page"> segunda página Rumbo </a> </ li> y así sucesivamente.

3 Abra su archivo CSS. Este archivo normalmente se encuentra en la carpeta css, y contiene todas las definiciones que le dicen al navegador qué su texto, balas y así sucesivamente, se verá como una vez que se muestra en el navegador. Sigue el enlace en la sección Recursos para aprender a escribir un archivo .css, si usted no tiene uno.

4 Escriba en #nav en la parte superior de la hoja de estilos CSS. Esto identifica que este código se refiere a la barra de navegación, ya que hemos definido este por la etiqueta de id = nav en la página principal.

5 Establecer sus márgenes y el relleno en la hoja de estilos CSS a 0. Por lo tanto, el tipo {margin: 0; padding: 0} en la hoja de estilo CSS justo después #nav. La primera pieza de código en la hoja de estilos CSS es #nav {margin: 0; padding: 0}

6 Hacer que la barra de navegación alinear horizontalmente. Normalmente, una lista en una página HTML se muestra en vertical, por lo que entrar en esta parte del código en CSS, indica al navegador para visualizar esta lista de artículos a través de la página. li tipo #nav {display: inline; padding: 0; margin: 0} en la hoja de estilos CSS.

7 Añadir colores y otros estilos a los elementos de enlace, no toda la lista de elementos en sí. Para ello, se utiliza la etiqueta de enlace #nav. Esto le indica al navegador para aplicar estilos de los enlaces y hace clic en la ficha entera factible. Escriba #nav a: link, #nav a: visited {color: # 000; background: # b2b580; }

Consejos y advertencias

• Usted puede hacer muchos tipos diferentes de barras de navegación mediante el uso de diferentes colores y estilos en su hoja de CSS. Más información acerca de los estilos CSS y usted será capaz de crear barras de navegación horizontales muy interesantes y atractivos.