Lav en horisontal menu for dig selv sitet

Vandret menu har næsten enhver hjemmeside - det er en vigtig del, da det kan med sit udseende og anvendelighed til at tiltrække eller omvendt, skræmme besøgende. Lad os lære at skabe en elementær vandret menu: gøre det "skelet" til HTML, at beherske de basale færdigheder til at skabe. Du kan sikkert finde en klar menu, men meget pænere at lære at udvikle det selv. Det er ret sjovt.

Lær at lave menuen

Vi forsøger ikke at afvige fra de semantik, der overholder de førende figurer i layoutet. Først skal du lave en "skelet" for vores menuer til HTML, lære de grundlæggende færdigheder til at gøre deres egne vandrette menuer. Og så vil det pynte, ved hjælp af style sheets. Lad vores horisontal menu indeholder 5 elementer. Det første punkt vil blive omdirigeret til hjemmesiden. Det andet punkt - "Om os". Den tredje - "Vores udmærkelser". Fjerde - "Det er sjovt." Femte - "Kontakt os".

HTML-kode ser sådan ud:

Hvem kender ikke: ul tag bruges til kuglen, dens elementer begynder med li. Li-tags arver de stilarter, der anvendes på den ul.

Ul - blok element i listen, vil det blive strakt til bredden. Li er også en blok.

Så oprette en index.html. Vi indsamler vores kode. På dette tidspunkt, viser browseren et lodret i stedet for vandret menu. Men vi med dig mål - at gøre en vandret menu for webstedet. Til dette har vi brug CSS.

Hvad er CSS?

Hvis du endnu at mestre udvikling af hjemmesider, er det nødvendigt at komme i nærkontakt med begrebet cascading style sheets. I virkeligheden er disse regler for formatering, forarbejdning, som anvendes til forskellige elementer på siderne i et web-site. Hvis vi beskriver egenskaberne for elementerne i standard HTML, bliver du nødt til at gentage dette flere gange, du får en gentagelse af de samme stykker kode. side load tid på brugerens computer vil vokse. For at undgå dette, er der en CSS. Det er tilstrækkeligt at beskrive én gang et vist element, og derefter blot angive, hvor at bruge egenskaberne for en bestemt stil. Det er muligt at gøre beskrivelsen af ikke blot teksten til selve siden, men også i en anden fil. Dette vil gøre det muligt at anvende den beskrivelse af de forskellige stilarter på alle sider på webstedet. Det er også praktisk at ændre nogle sider, redigering af CSS-fil. Style sheets giver dig mulighed for at arbejde med skrifttyper på et bedre niveau end HTML, bidrage til at undgå forværring grafik sider på webstedet.

Ved hjælp af Style Sheets til menuen udvikling

CSS-kode til menuen:

1. # My_1menu {list-style: none; padding: 6; bredde: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; højde: 55 px; line-height: 55 px; padding: 0px 15px 0px 15 px; baggrund: #dfc; tekst-dekoration: ingen;}
4. # My_1menu en: hover {color: #foa; baggrund: # 788;}

Lad os nu se på den resulterende vandret CSS menu.

# My_1menu - så der er stil opgave for UL element med id = my_1menu, liste-stil: Ingen - denne kommando til at fjerne de mærker efterladt af de planlagte elementer.

bredde: 800px - bredden af vores menu er 800 pixels.

padding: 0 - det fjerner polstring.

margin: auto - vyravnivnie vandret menu i midten af vores side.

# My_1menu li - tildele stilarter Li-elementer.

højde: 55 px - menu højde.

# My_1menu a: hover - tilknytning stilarter til element og når den er induceret mus.

Vi vil ikke beskrive i detaljer hver linje, som alle udviklere kan angive dens parametre her. Dette grundlag for anvendelse af stilarter i menuen på hjemmesiden. Du kan give det en mere færdig og smukke udseende, ved hjælp af billeder. Tildel element, men for eksempel baggrund: url (img1.png) repeat-x. Lad der blive baggrund: url (img2.png) repeat-x for en: hover.

Brug din fantasi, kreative præferencer. Så baseret på denne viden om, hvordan du opretter en simpel menu på hjemmesiden, kan du udvikle en side med sit eget unikke design.