Himoa nga usa ka pinahigda nga menu alang sa site sa imong kaugalingon

Pinahigda menu adunay hapit sa bisan unsa nga site - kini mao ang usa ka importante nga bahin, sama sa mahimo nga kini uban sa iyang panagway ug kapuslanan sa pagdani o, bahin, scare sa mga bisita. Atong makat-on kon unsaon sa paghimo sa usa ka elementarya pinahigda menu: sa paghimo niini "kalabera" sa HTML, sa pag-master sa mga nag-unang mga kahanas sa pagmugna. Ikaw mahimo sa pagkatinuod makakaplag sa usa ka andam nga menu, apan daghan nicer sa pagkat-on kon sa unsang paagi aron sa pagpalambo sa niini sa imong kaugalingon. Kini pretty makalingaw.

Pagkat-on sa paghimo sa menu

Kita mosulay sa dili motipas gikan sa mga semantiko, nga sundon sa mga nag-unang dagway sa mga sa layout. Una kamo adunay aron sa paghimo sa usa ka "kalabera" alang sa atong mga menu sa HTML, makakat-on sa nag-unang mga kahanas sa paghimo sa ilang kaugalingon nga pinahigda nga menu. Ug unya kini decorate, sa paggamit sa estilo sheets. Himoa nga ang atong pinahigda menu naglangkob 5 butang. ang unang butang nga giusab ang direksyon sa ngadto sa homepage. Ang ikaduha nga punto - "Mga kanato". Ang ikatulo nga - "Ang atong mga awards". Ikaupat - "Kini makalingaw." Ikalima - "Contact kanato".

HTML-code tan-awon sama niini:

Kinsa ang wala mahibalo: ul tag gigamit alang sa bala, mga elemento niini magsugod sa li. Li tag makapanunod sa estilo nga gigamit sa ul.

UL - block elemento sa listahan, kini gituy-od ngadto sa gilapdon. Li mao usab ang usa ka block.

Busa, paghimo sa usa ka index.html. pagkolekta namo ang among code. Sa niini nga punto, ang browser pagpakita sa usa ka bertikal kay sa usa ka pinahigda nga menu. Apan kami uban kaninyo tumong - sa paghimo sa usa ka pinahigda nga menu alang sa site. Kay kini nga atong gikinahanglan CSS.

Unsa ang CSS?

Kon kamo adunay pa sa master sa mga kalamboan sa mga dapit, kini mao ang gikinahanglan nga sa masinati sa mga konsepto sa busay Estilo Sheets. Sa pagkatinuod, kini mao ang mga lagda alang sa formatting, pagproseso, nga gipadapat ngadto sa lain-laing mga elemento diha sa mga pahina sa usa ka web-site. Kon sa paghulagway sa atong mga kabtangan sa mga elemento sa standard HTML, kamo adunay sa pag-balik niini nga pipila ka mga higayon, kamo og usa ka duplikasyon sa sa mao gihapon nga mga piraso sa code. panid sa panahon load sa computer sa user sa motubo. Aron sa paglikay sa niini, adunay usa ka CSS. Kini igo na aron sa paghulagway sa makausa lamang sa usa ka pipila ka mga elemento, ug unya lamang nagpakita diin sa paggamit sa mga kabtangan sa usa ka partikular nga estilo. Kini mao ang posible nga aron sa paghimo sa paghulagway sa dili lamang sa teksto sa panid nga sa iyang kaugalingon, apan usab sa laing file. Kini motugot sa paggamit sa mga paghulagway sa mga lain-laing mga estilo sa tanan nga mga panid sa site. Kini mao usab ang sayon sa pag-usab sa pipila ka panid, pag-usab sa CSS-file. Style sheets motugot kaninyo sa pagtrabaho uban sa tulonghaan sa usa ka mas maayo nga ang-ang kay sa HTML, pagtabang sa paglikay sa nagkagrabeng mga panid graphics sa site.

Pinaagi sa paggamit sa Style Sheets alang sa menu development

CSS-code alang sa menu:

1. # My_1menu {listahan-estilo: walay; padding: 6; gilapdon: 800px; margin: auto;}
2. # My_1menu li {float: sa wala; font: patakilid 18px arial;}
3. # My_1menu usa ka {kolor: # 756; display: block; gitas-on: 55px; linya-gitas-on: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-dekorasyon: walay;}
4. # My_1menu sa usa ka: Hover {kolor: #foa; background: # 788;}

Karon atong tan-awon ang miresulta pinahigda CSS menu.

# My_1menu - sa ingon adunay estilo nga buluhaton alang sa UL- elemento sa id = my_1menu, listahan-estilo: walay - niini nga sugo sa pagtangtang sa mga marka sa wala sa gikatakda nga mga butang.

gilapdon: 800px - ang gilapdon sa atong menu mao ang 800 pixels.

padding: 0 - kini removes sa padding sa sulod.

margin: auto - vyravnivnie pinahigda menu sa sentro sa atong panid.

# My_1menu li - assign estilo li-elemento.

gitas-on: 55px - menu gitas-on.

# My_1menu sa usa ka: Hover - asayn estilo sa elemento ug sa diha nga kini malukmay mouse.

Dili kami paghulagway sa detalye sa matag linya, ingon nga ang tanang developer mahimong hingalan lantugi niini dinhi. Kini nga basehan alang sa paggamit sa mga estilo sa menu sa website. mahimo nga imong ihatag kini sa usa ka labaw nahuman ug sa matahum nga panagway, sa paggamit sa mga hulagway. Sanguni ang elemento apan, alang sa panig-ingnan, background: url (img1.png) balik-x. Himoa nga adunay background: url (img2.png) sublion-x alang sa usa ka: Hover.

Gamita ang imong imahinasyon, mamugnaon gusto. Unya base sa niana nga kahibalo kon unsaon sa paghimo sa usa ka yano nga menu sa website, nga imong mahimo sa pagpalambo og usa ka panid sa iyang kaugalingon nga talagsaon nga disenyo.