-
Cómo hacer una barra de navegaciones profesionales Con CSS
-
Hojas de estilo en cascada (CSS) manipulan el estilo y el diseño de un sitio Web. barra de navegación de una página web se construye a partir de las etiquetas UL y LI, etiquetas HTML que se utilizan para crear listas en la web. Aunque los navegadores web se cargan las etiquetas tales como listas con viñetas de forma predeterminada, puede anular el formato usando CSS para darle a su sitio un acabado profesional. Con un poco de personalización, también se puede mezclar su navegación con el resto de la página.Instrucciones
1 Abra un editor de texto, como el Bloc de notas, EditPad o TextPad. Haga clic en "Archivo" y "Nuevo" para crear un nuevo documento CSS.
2 Inserte el siguiente código CSS en que página. En él se establecen los márgenes superior e inferior a cero en su página web:
cuerpo {
margin: 0;
padding: 0;
}3 Inserte el siguiente código debajo de la línea de código anterior. Se crea un estilo para la barra de navegación, que cubre todo el ancho de su contenedor principal o sección. También dejó-alinea la barra (tan a la izquierda como sea posible de su contenedor) y le da un fondo negro. Para cambiar el color de fondo para la navegación, el cambio "negro" a un color diferente, pero deja intacto el punto y coma.
{nav
width: 100%;
flotador izquierdo;
fondo: negro;
}4 Agregue el siguiente código debajo de la línea de código anterior. Se quita las balas de la etiqueta de UL y elimina márgenes y el relleno:
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}5 Agregue el siguiente código CSS por debajo del código anterior. Esto hace que el contenido dentro de la pantalla de navegación en la misma línea:
li {nav
display: inline;
}6 Agregue el siguiente código debajo de las anteriores líneas de código. Se da formato a los enlaces dentro de la navegación y los muestra en forma de fichas. Se añade un acolchado vertical de 2 píxeles y el relleno horizontal de 15 píxeles a cada enlace. Se elimina el subrayado de los enlaces, hace que el blanco de texto y aplica un fondo negro. También añade un borde fino, de color blanco a la derecha de cada enlace. Para personalizar la barra de navegación, cambiar los colores dentro del código.
nav ul a {
bloqueo de pantalla;
flotador izquierdo;
padding: 2px 15px;
text-decoration: none;
fondo: negro;
color blanco;
border-right: 1px sólido blanco;
}7 Agregue la siguiente línea de código para cambiar el color de fondo de las pestañas cuando se seleccionan:
nav ul a: hover {
fondo: blue;
}8 Haga clic en "Archivo" y "Guardar" en el menú. Nombre del archivo "nav.css" en el "Guardar como" cuadro de diálogo. Coloque el archivo en la misma carpeta que el archivo HTML en la barra de navegación irá. Clic en Guardar."
9 Utilice Bloc de notas o un editor de texto similar para abrir el archivo HTML en el que se coloca la barra de navegación.
10 Desplazarse a la sección de "cabeza", que se encuentra en la parte superior de la página, justo debajo del código "<HTML>". Identificar la sección correcta, haga clic entre "<HEAD>" y "</ HEAD>" e introduzca el siguiente código:
<Link rel = "stylesheet" type = "text / css" href = "nav.css" />
11 Desplazarse por debajo de la etiqueta de apertura "cuerpo" y haga clic donde desea que la barra de navegación que se vea. Inserte el siguiente código, pero reemplace "#" con la dirección del sitio web que estás enlazando. Reemplazar "Link 1", "2 Enlace" y "Link 3" con el texto que desea mostrar en la barra de navegación.
<Div id = "nav">
<Ul>
<Li> <a href="#"> Link 1 </a> </ li>
<Li> <a href="#"> Link 2 </a> </ li>
<Li> <a href="#"> Link 3 </a> </ li>
</ Ul>
</ Div>12 Haga clic en "Archivo" y "Guardar" en el menú para guardar los cambios.
