Gumawa ng isang pahalang na menu para sa site sa iyong sarili

Pahalang na menu ay may halos anumang site - ito ay isang mahalagang bahagi, tulad ng kaya nito sa kanyang hitsura at usability upang maakit o, pasalungat, takutin ang layo ng mga bisita. Sabihin malaman kung paano upang lumikha ng isang elementary pahalang na menu: gawin itong "skeleton" sa HTML, sa master ang mga pangunahing kasanayan ng paglikha. Maaari mong tiyak na mahanap ang isang handa na menu, ngunit magkano nicer upang malaman kung paano bumuo ng ito sa iyong sarili. Kahanga-masaya.

Alamin kung paano gumawa ng menu

Sinusubukan naming huwag lumihis mula sa semantika, na sumunod sa mga nangungunang mga numero ng layout. Una mayroon kang upang gumawa ng isang "balangkas" para sa aming mga menu sa HTML, matuto pangunahing kasanayan upang gawin ang kanilang sariling mga pahalang na menu. At pagkatapos ay ito ay palamutihan, gamit style sheet. Hayaan ang aming pahalang na menu ay naglalaman ng 5 mga item. ay ang unang item ay ire-redirect sa homepage. Ang ikalawang punto - "Tungkol sa amin". Ang ikatlong - "Ang aming mga awards". Ika-apat - "Ito ay masaya." Fifth - "Makipag-ugnay sa amin".

HTML-code ganito ang hitsura:

Sino ay hindi alam: ul tag na ito ay ginagamit para sa mga bullet, mga elemento nito magsimula sa li. Li tags manahin mo ang mga istilo na ay nailapat sa ul.

Ul - block elemento ng listahan, ito ay stretch sa lapad. Li ding isang block.

Kaya, lumikha ng isang index.html. Kinokolekta namin ang aming code. Sa puntong ito, ang mga browser ay nagpapakita ng isang vertical sa halip na pahalang na menu. Ngunit namin sa iyo layunin - upang gumawa ng isang pahalang na menu para sa site. Para sa kailangan namin ang CSS.

Ano ang CSS?

Kung mayroon kang pa upang makabisado ang pag-unlad ng mga site, ito ay kinakailangan upang makakuha ng pamilyar sa ang konsepto ng Cascading Style Sheets. Sa katunayan, ito ang mga panuntunan para sa pag-format, processing, na kung saan ay inilapat sa iba't-ibang mga elemento sa mga pahina ng isang web-site. Kung inilalarawan namin ang mga katangian ng mga elemento sa standard HTML, ikaw ay may sa ulitin ito nang maraming beses, kang makakuha ng isang pag-duplicate ng parehong piraso ng code. pahina ng oras ng pagkarga sa computer ng user ay lumalaki. Upang maiwasan ito, mayroong isang CSS. Ito suffices upang ilarawan nang isang beses lamang sa isang tiyak na sangkap, at pagkatapos ay kailangan lang ipahiwatig kung saan upang gamitin ang mga katangian ng isang partikular na estilo. Ito ay posible na gumawa ng mga paglalarawan ng hindi lamang ang mga teksto ng pahina mismo, ngunit din sa isa pang file. Ito ay magbibigay-daan upang ilapat ang paglalarawan ng iba't ibang estilo sa lahat ng pahina ng site. Ito rin ay maginhawa upang baguhin ang ilang mga pahina, ang pagbabago ng CSS-file. Style sheet daan sa iyo upang gumana sa mga font sa isang mas mahusay na antas kaysa sa HTML, na tumutulong upang maiwasan ang worsening ng mga pahina graphics ng site.

Paggamit ng Style Sheets para sa menu na pag-unlad

CSS-code para sa mga menu:

1. # My_1menu {listahan-style: none; padding: 6; width: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu isang {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Ngayon tingnan natin ang mga nagresultang horizontal CSS menu.

# My_1menu - kaya may style assignment para ul- elemento na may id = my_1menu, listahan-style: none - ito command upang alisin ang mga marka kaliwa sa pamamagitan ng naka-iskedyul na mga item.

width: 800px - ang lapad ng aming menu ay 800 pixels.

padding: 0 - ito ay nagtanggal nang padding sa loob.

margin: auto - vyravnivnie pahalang na menu sa gitna ng aming mga pahina.

# My_1menu li - pagtatalaga ng mga estilo li-elemento.

height: 55px - Menu taas.

# My_1menu a: hover - pagtatalaga ng mga estilo sa elemento at kapag ito ay sapilitan mouse.

Hindi namin ilarawan nang detalyado ang bawat linya, pati na ang bawat developer ay maaaring tukuyin ang mga parameter nito dito. Ito na batayan para sa paggamit ng mga estilo sa menu sa website. Maaari mong bigyan ito ng isang mas natapos at maganda ang hitsura, ang paggamit ng mga larawan. Magtalaga ng sangkap ngunit, halimbawa, background: url (img1.png) ulitin-x. Magkaroon background: url (img2.png) ulitin-x para sa isang: hover.

Gamitin ang iyong imahinasyon, creative kagustuhan. Pagkatapos ay batay sa na kaalaman sa kung paano lumikha ng isang simpleng menu sa website, maaari kang makabuo ng isang pahina na may sariling natatanging disenyo.