jueves, 7 de noviembre de 2013

Cómo hacer un Tab Navegación Selected en DIV

Fichas de navegación de texto independiente o enlaces a imágenes y mostrarlas en bloques. Ellos ayudan a distinguir entre los enlaces con más facilidad, sobre todo 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 la apariencia de cada ficha, ya que se ha seleccionado en una página Web - cambiando el texto, el color de fondo o el aspecto general cuando se lanza el puntero del ratón sobre él.

mantener libre de Escritorio

Lo que necesita

Editor de texto



Inicie un editor de texto como el Bloc de notas, TextPad o EditPad.



Inserte el siguiente código CSS en su página con el estilo del menú de navegación. Elimina las balas por defecto de la lista desordenada (UL) tag para la navegación y las pestañas, y establece el margen y el relleno a cero.

# # Pestañas de navegación ul {

list-style: none;

margin: 0;

padding: 0;

}



Añadir el siguiente código debajo de la primera serie de código. Le da a cada ficha una anchura de 80 píxeles, añade un fondo amarillo y hace que el texto negro. También elimina el ajuste de subrayado de los enlaces, texto centros y lo muestra como un bloque. Para personalizar el texto de la ficha, cambiar el color, el vínculo y el fondo con su configuración preferida.

# # Pestañas de navegación ul li a {

Ancho: 80px;

background-color: yellow;

color: negro;

display: block;

padding: 2px;

text-align: center;

text-decoration: none;

float: left;

}



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 los colores de fondo y de texto durante una selección de pestañas, cambiar los colores actuales con sus colores preferidos.

# # Pestañas de navegación ul li a: hover {

background-color: red;

color: blanco;

}



Haga clic en "Archivo" y "Guardar como" en el menú. La opción "Guardar como" cuadro de diálogo se abre. Seleccione la carpeta que contiene los archivos de las páginas web. Nombre del archivo "menu.css" y haga clic en "Guardar".



Haga clic en "Archivo" y "Abrir" para abrir el cuadro de diálogo "Abrir". Haga doble clic en el archivo HTML, donde las fichas se mostrarán.



Inserte el siguiente enlace de estilos entre la apertura y cierre de etiquetas HEAD. Señala al archivo "menu.css" guardó:

link rel tipo "stylesheet" = = "text / css" href = "menu.css" /



Desplácese hacia abajo la etiqueta BODY apertura. Coloque el cursor donde desea que la navegación va a mostrar.



Agregue el siguiente código HTML, para crear la navegación y aplicar su estilo:

div id = "navegación"

div id = "fichas"

ul

lia href = "URL" Página 1/a/li

lia href = "URL" Página 2/a/li

lia href = "URL" Página 3/a/li

/ Ul

/ Div

/ Div



Reemplazar "URL" con la dirección del enlace para cada elemento del menú. Reemplazar "Página 1", "Página 2" y "Page 3" con las páginas reales que desea mostrar en cada pestaña.



Haga clic en "Archivo" y "Guardar" para actualizar el archivo.

 

No hay comentarios:

Publicar un comentario