Hvordan legge til et bilde til et navigasjonsfelt Meny

April 20

En navigasjonslinjen Menyen inneholder lenker som peker til sider fra innsiden eller utsiden ditt nettsted. Det er fullt tilpassbar og kan omfatte en bakgrunnsfarge, bilde og drop-down / fly-out menyen. Du kan bruke bilder for å vise knapper i stedet for teksten i navigasjon. Cascading Style Sheets (CSS) kan du style den navigasjonsfeltet med bildet du ønsker å bruke. Du kan stille dimensjoner for å passe ditt bilde eller endre størrelse på bildet for design.

Bruksanvisning

1 Start Notisblokk, TextPad, WordPad eller din favoritt teksteditor. Velg "File" og "Open" fra menyen. En dialogboks åpnes. Dobbeltklikk på HTML-filen du ønsker å endre.

2 Sett inn følgende kode mellom <HEAD> tag å skape en stil for navigasjons barmeny. Den #navbar element vil holde elementer innen navigasjonslinjen. Den "bakgrunn: URL ( 'URL')" code vil vise bakgrunnsbildet for hvert menyvalg.

<! -

navbar {

width: 900px;

høyde: 50 piksler;

padding: 0;

display: inline;

}

hjem {

float: left;

width: 150px;

høyde: 50 piksler;

bakgrunn: URL ( 'URL');

}

handle om {

float: left;

width: 150px;

høyde: 50 piksler;

bakgrunn: URL ( 'URL');

}

kontakt {

float: left;

width: 150px;

høyde: 50 piksler;

bakgrunn: URL ( 'URL');

}

</ Style>

3 Bytt dimensjonene på "#navbar" med dine foretrukne innstillinger; de bør være stor nok til å holde hvert element image. Bytt dimensjonene på hver meny element (ex. "#home", "#about", "#contact") Med dimensjonene på bildene dine. Erstatt "URL" med plasseringen av bildefilene.

4 Sett inn følgende HTML-kode mellom <BODY> tag. Det gjelder stilen til navigasjons barmeny, så det viser bildene dine.

</ Div>