-
Cómo hacer una pestaña de navegación seleccionada en DIV
-
fichas de navegación separan de texto o imagen enlaces y visualizarlas en bloques. Ellos ayudan a distinguir entre los enlaces con más facilidad, especialmente los que están muy juntos. fichas de navegación se crean dentro de un DIV. Puede utilizar hojas de estilo en cascada (CSS) para cambiar el aspecto de cada pestaña, ya que está seleccionado en una página Web - cambiando su texto, el color de fondo o aspecto general cuando su ratón pasa sobre ella.
Instrucciones
1 Iniciar un editor de texto como el Bloc de notas, TextPad o EditPad.
2 Inserte el siguiente código CSS en su página para estilizar el menú de navegación. Se quita las balas por defecto de la etiqueta lista desordenada (UL) para la navegación y pestañas, y establece el margen y el relleno a cero.
navegación #tabs ul {
list-style: none;margin: 0;
padding: 0;
}
3 Agregue el código siguiente a continuación del primer conjunto de código. Se le da a cada pestaña una anchura de 80 píxeles, añade un fondo amarillo y negro hace que el texto. También elimina el subrayado de los enlaces por defecto, se centra el texto y lo muestra como un bloque. Para personalizar el texto dentro de la pestaña, reemplazar el color, acoplamiento y de fondo con sus ajustes preferidos.
navegación #tabs ul li a {
Ancho: 80px;background-color: amarillo;
de color negro;
bloqueo de pantalla;
padding: 2px;
text-align: center;
text-decoration: none;
flotador izquierdo;
}
4 Agregue el siguiente código debajo del código en el paso 3. Cambia el color de fondo y el color del texto del enlace cuando se selecciona. Para personalizar el fondo y los colores del texto durante una selección de etiqueta, reemplazar los colores actuales con sus colores preferidos.
navegación #tabs ul li a: hover {
background-color: rojo;color blanco;
}
5 Haga clic en "Archivo" y "Guardar como" en el menú. Se abre el "Guardar como" cuadro de diálogo. Seleccione la carpeta que contiene sus archivos de página web. Nombre del archivo "menu.css" y haga clic en "Guardar".
6 Haga clic en "Archivo" y "Abrir" para abrir el cuadro de diálogo "Abrir". Haga doble clic en el archivo HTML, donde se mostrarán las pestañas.
7 Inserte el siguiente enlace de estilos entre la apertura y cierre <head>. Se apunta al archivo "menu.css" guardó:
<Link rel = "stylesheet" type = "text / css" href = "menu.css" />
8 Desplazarse por debajo de la etiqueta de apertura <BODY>. Coloca el cursor donde desea que la navegación que se vea.
9 Agregue el siguiente código HTML, para crear la navegación y aplicar su estilo:
<Div id = "navegación">
<div id = "pestañas">
<Ul>
<Li> <a href="URL"> Página 1 </a> </ li>
<Li> <a href="URL"> Página 2 </a> </ li>
<Li> <a href="URL"> Page 3 </a> </ li>
</ Ul>
</ Div>
</ Div>
10 Reemplazar "URL", con la dirección de enlace para cada elemento del menú. Reemplazar "Página 1", "Página 2" y "Página 3" con las páginas reales que desea mostrar en cada pestaña.
11 Haga clic en "Archivo" y "Guardar" para actualizar el archivo.
