Bëni një menu horizontale për këtë faqe interneti veten

menu horizontale kanë pothuajse çdo vend - kjo është një pjesë e rëndësishme, si ajo mund të me pamjen e saj dhe përdorshmërisë për të tërhequr, ose, anasjelltas, trembë larg vizitorët. Le të mësojmë se si të krijoni një meny fillore horizontale: të bëjë atë "skelet" në HTML, për të zotëruar aftësitë themelore të krijimit. Ju me siguri mund të gjeni një menu gati, por shumë nicer për të mësuar se si për të zhvilluar atë vetë. Është shumë e fun.

Mësojnë për të bërë menu

Ne të përpiqet të mos devijojnë nga semantikë, të cilat përmbahen nga figurat kryesore të layout. Së pari ju duhet për të bërë një "skelet" për menutë tona në HTML, të mësojnë aftësitë bazë për të bërë menytë e tyre horizontale. Dhe pastaj ajo do të dekoroj, duke përdorur fletë stili. Le menu jonë horizontale përmban 5 artikuj. Pika e parë do të ridrejtuar në faqen kryesore. Pika e dytë - "Rreth nesh". E treta - "Awards tona". Së katërti - "Është e fun." Pestë - "Na kontaktoni".

HTML-code duket si ky:

Kush nuk e di: tag ul është përdorur për plumb, elementet e saj fillojnë me li. tags Li trashëgojnë stilet që janë aplikuar në rr.

Ul - element bllok i listës, ajo do të jetë shtrirë në gjerësi. Li është gjithashtu një bllok.

Pra, të krijojë një index.html. Ne mbledhjen kodin tonë. Në këtë pikë, shfletuesi shfaq një vertikale më tepër se një menu horizontale. Por ne me ju Qëllimi - për të bërë një menu horizontale për këtë faqe interneti. Për këtë ne kemi nevojë për CSS.

Çfarë është CSS?

Nëse keni ende për të zotëruar zhvillimin e vendeve, është e nevojshme që të njihen me konceptin e Cascading Style Sheets. Në fakt, këto janë rregullat për formatimin, përpunimin, të cilat janë aplikuar për elemente të ndryshme në faqet e një web-site. Nëse do të përshkruajnë vetitë e elementeve të HTML standarde, ju do të keni për të përsëritur këtë disa herë, ju merrni një dyfishimin e njëjta copë të kodit. faqe load kohë në kompjuterin e përdoruesit do të rritet. Për të shmangur këtë, ka një CSS. Kjo mjafton për të përshkruar vetëm një herë një element të caktuar, dhe pastaj thjesht të tregojë se ku mund të përdorin vetitë e një stil të veçantë. Është e mundur për të bërë përshkrimin e jo vetëm tekstin e faqes vetë, por edhe në një tjetër dosje. Kjo do të lejojë për të aplikuar përshkrimin e stileve të ndryshme në të gjitha faqet e internetit. Ajo është gjithashtu i përshtatshëm për të modifikuar disa faqe, modifikuar CSS-file. fletët Style ju lejon të punoni me fonts në një nivel më të mirë se të HTML, duke ndihmuar për të shmangur përkeqësimin faqet Grafika e faqes.

Përdorimi Style Sheets për zhvillimin menu

CSS-code për menynë:

1. # My_1menu {list-style: none; mbushje: 6; gjerësia: 800px; diferencë: auto;}
2. # My_1menu li {float: majtas; shkrimit: italic Arial 18px;}
3. # My_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; mbushje: 0px 15px 0px 15px; background: #dfc; text-decoration: asnjë;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Tani le të shohim rezulton menu horizontale CSS.

# My_1menu - kështu që nuk është detyrë stil për elementin ul-me id = my_1menu, lista stilit: Asnjë - këtë komandë për të hequr shenjat e lëna nga pikat e planifikuara.

width: 800px - gjerësia e menynë tonë është 800 pixels.

padding: 0 - kjo heq mbushje brenda.

margin: auto - vyravnivnie menu horizontale në qendër të faqes tonë.

# My_1menu li - caktimin stilet Li-elemente.

height: 55px - Lartësia menu.

# My_1menu a: hover - caktimin stilet në element dhe miu kur ajo është e detyruar.

Ne nuk do të përshkruaj në detaje çdo linjë, si çdo zhvilluesi mund të specifikoni parametrat e saj këtu. Kjo bazë për përdorimin e stileve në menynë në faqen e internetit. Ju mund t'i jepte një pamje më të bukur dhe të përfunduar, duke përdorur fotografi. Cakto element por, për shembull, sfond: url (img1.png) përsërisë-X. Le të jetë background: url (img2.png) përsërisë-x për një: rri pezull.

Përdorni imagjinatën, preferencat tuaja krijuese. Pastaj u bazuar në këtë njohuri se si të krijoni një menu të thjeshtë në faqen e internetit, ju mund të zhvillojnë një faqe me dizajnin e saj unik.