Tecnología

Inicio

Cómo añadir una imagen a un menú de la barra de navegación

Un menú de la barra de navegación incluye enlaces que apuntan a páginas de dentro o fuera de su sitio web. Es totalmente personalizable y puede incluir un menú de color de fondo, imagen y desplegable / fly-out. Puede usar imágenes para mostrar los botones en lugar de texto dentro de la navegación. las hojas de estilo en cascada (CSS) permite que el estilo de la barra de navegación con la imagen que desea utilizar. Puede establecer las dimensiones para adaptarse a su imagen o cambiar el tamaño de la imagen para su diseño.

Instrucciones

1 Iniciar Bloc de notas, TextPad, WordPad o su editor de texto favorito. Seleccione "Archivo" y "Abrir" en el menú. Se abre un cuadro de diálogo. Haga doble clic en el archivo HTML que desea modificar.

2 Inserte el siguiente código entre las etiquetas <head> para crear un estilo para el menú de la barra de navegación. El elemento #navbar sostendrá elementos dentro de la barra de navegación. El "background: url (" URL ")" código mostrará la imagen de fondo para cada elemento del menú.

<Style type = "text / css">

<! -

{navbar

Anchura: 900px;

altura: 50px;

padding: 0;

display: inline;

}

casa {

flotador izquierdo;

Anchura: 150px;

altura: 50px;

background: url ( "URL");

}

acerca de {

flotador izquierdo;

Anchura: 150px;

altura: 50px;

background: url ( "URL");

}

contacto {

flotador izquierdo;

Anchura: 150px;

altura: 50px;

background: url ( "URL");

}

->

</ Style>

3 Reemplazar las dimensiones del "#navbar" con sus ajustes preferidos; deben ser lo suficientemente grande para contener la imagen de cada elemento. Reemplazar las dimensiones de cada elemento de menú (ej., "#home", "#about", "#contact") Con las dimensiones de las imágenes. Reemplazar "URL" con la ubicación de los archivos de imagen.

4 Inserte el siguiente código HTML entre la etiqueta <BODY>. Se aplica el estilo al menú de la barra de navegación, por lo que muestra sus imágenes.

<Div id = "barra de navegación">

<Div id = "casa"> </ div>

<Div id = "aproximadamente"> </ div>

<Div id = "contacto"> </ div>

</ Div>