Lag en horisontal meny for området selv

Horisontal meny har nesten alle andre områder - det er en viktig del, som det kan med sitt utseende og brukervennlighet for å tiltrekke eller omvendt, skremme bort besøkende. La oss lære hvordan du oppretter en elementær horisontale menyen: gjør det "skjelett" til HTML, å mestre grunnleggende ferdigheter i å skape. Du kan sikkert finne en klar meny, men mye hyggeligere å lære å utvikle det selv. Det er ganske morsomt.

Lær å lage menyen

Vi prøver ikke å avvike fra semantikk, som holder seg til de ledende skikkelsene i oppsettet. Først må du lage en "skjelett" for våre menyer til HTML, lære grunnleggende ferdigheter for å lage sine egne horisontale menyer. Og så vil det dekorere, ved hjelp av stilark. La våre horisontale menyen inneholder 5 artikler. Det første elementet vil bli omdirigert til hjemmesiden. Det andre punktet - "Om oss". Den tredje - "Våre priser". Fjerde - "Det er gøy." Femte - "Kontakt oss".

HTML-koden ser slik ut:

Som ikke vet: ul taggen brukes for kule, dens elementer begynne med li. Li-koder arver stiler som er brukt på ul.

Ul - blokk element i listen, vil det bli strukket til bredden. Li er også en blokk.

Så, lage en index.html. Vi samler inn vår kode. På dette punktet, viser leseren et vertikalt i stedet for en horisontal meny. Men vi med deg mål - å lage en horisontal meny for området. Til dette trenger vi CSS.

Hva er CSS?

Hvis du har ennå å mestre utvikling av nettsteder, er det nødvendig å bli kjent med begrepet Cascading Style Sheets. Faktisk er disse regler gjelder for formatering, behandling som er anvendt til forskjellige elementer på sidene i en web-side. Hvis vi beskrive egenskapene til elementene i standard HTML, må du gjenta dette flere ganger, får du en duplisering av de samme deler av koden. lastetiden på brukerens datamaskin vil vokse. For å unngå dette, er det en CSS. Det er nok å beskrive bare en gang et visst innslag, og så bare indikere hvor du skal bruke egenskapene til en bestemt stil. Det er mulig å gjøre beskrivelsen av ikke bare teksten på selve siden, men også i en annen fil. Dette vil tillate å bruke beskrivelsen av de forskjellige stilene på alle sidene på nettstedet. Det er også praktisk å endre noen sider, endre CSS-fil. Stilark tillate deg å arbeide med skrifter på et bedre nivå enn HTML, bidrar til å unngå forverring grafikk sidene på nettstedet.

Ved hjelp av stilark for menyutvikling

CSS-kode for menyen:

1. # My_1menu {list-style: none; padding: 6; bredde: 800 ganger; margin: auto;}
2. # My_1menu li {float: venstre; skrift: kursiv 18 piksler Arial;}
3. # My_1menu a {color: # 756; display: block; høyde: 55 piksler; linje-høyde: 55 piksler; padding: 0 px 15 piksler 0 px 15 piksler; bakgrunn: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; bakgrunn: # 788;}

Nå la oss se på den resulterende horisontal CSS menyen.

# My_1menu - så det er stil oppdrag for UL element med id = my_1menu, list-style: none - denne kommandoen til å fjerne merker etter de planlagte elementer.

width: 800px - bredden på vår meny er 800 piksler.

padding: 0 - dette fjerner padding på innsiden.

margin: auto - vyravnivnie horisontale menyen på midten av vår side.

# My_1menu li - tildeling av stiler Li-elementer.

høyde: 55 piksler - menyen høyde.

# My_1menu a: hover - tildeling av stiler til element, og når det blir indusert mus.

Vi vil ikke beskrive i detalj hver linje, som alle utviklere kan angi parametere her. Dette grunnlaget for bruk av stiler i menyen på nettsiden. Du kan gi den en mer ferdig og vakre utseende, ved hjelp av bilder. Tildel elementet, men for eksempel bakgrunn: url (img1.png) repeat-x. La det bli bakgrunn: url (img2.png) gjenta-x for a: hover.

Bruk fantasien, kreative preferanser. Så basert på denne kunnskapen om hvordan du oppretter en enkel meny på nettsiden, kan du utvikle en side med sin egen unike design.