Make a menu horizontal ji bo malpera xwe

menu Horizontal hene hema hema ti site - ew beşeke girîng e, wekî ku dikare bi dîtinê û hêmanên xwe ku bala an, bi awaki din, bitirsîne dûr mêvanên. Werin, em hîn bibin ku çawa ji bo afirandina menu horizontal bingehîn: make it "hestî" bi HTML, bi axayê zanîna bingehîn ya afirandina. Tu bi rastî dikarin peyda menu amade ne, di heman demê de gelekî bedewe ku hîn çawa xwe pêş. Ev fun rind e.

Learn to make menu

Em hewl didin bi dadvanî ji xwebêj, ku rapêçandî ne ji bo kadroyên pêşeng ên cude ne. First te heye ku ji "hestî" ji bo pêşekan me HTML, hîn zanîna bingehîn ji bo ku di pêşekên têkildarî horizontal xwe bi xwe. Û piştre jî dê dixemilînin, bi bikaranîna stîlê. Bila menu horizontal me dihewîne 5 tumar. The yekem babete wê ji bo vê malperê redirected. Xala duyem - "Derbarê me de". The sêyem - "xelat me". Çarem: - "Ev fun e." Pêncemîn - "Contact us".

HTML-code dişibe vê:

Kî nizane: tag ul ji bo xwe bi kar fîşekan, hêmanên wê bi li dest. tags Li şêweyên bi ku ji bo ul serî war.

Ul - element block ya di lîsteyê de, wê ji ya width dirêj. Li e jî a block.

Bi vî awayî, biafirînin index.html. Em code me berhev. Di vê merhaleyê de, geroka kurd li vertical bêtir a menu horizontal. Lê belê, em bi we re Armanca - to make a menu horizontal ji bo site. Ji bo vê divê em CSS.

CSS çi ye?

Ger tu hê ji axayê pêşketina sites, lê pêwîst e ku tev bi têgeha Raxistin nas e. Di rastiyê de, ji van qaîdeyên ji bo teşekirina, processing, ku ji bo hêmanên cuda li ser rûpelên web-numreya serî de ne. Eger em taybetiyên hêmanan li HTML standard salix, hûn ê bibin xwedî ev çend caran dubare, tu nebę ku pariyên heman code bistînin. rûpel cara load li ser komputerê ya bikarhênerê bibe. Ku ev yek neqewime, e a CSS hene. Ev bes ji bo danasîna tenê carekê element hin, û paşê bi hêsanî nîşan dide ku ji bo bikaranîna taybetiyên a style taybetî. Ev gengaz e ku mirov ji description of ne bi tenê nivîsa vê rûpelê bi xwe de, lê di file din. Ev rê dê serî li description of şêweyên cuda li ser hemû rûpelên ku di malperê de. Ev e jî musaît ji bo xeyrandin di hin rûpel, guhertina li CSS-file. çarşefên Style, rê ji bo karê te bi fonts li ser astê çêtir HTML, ji bo ku rê li ber xerabûna lapera graphics di malperê de.

Bikaranîna Sheets Style ji bo pêşketina menu

CSS-code for the menu:

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

Niha jî em li ser di encamê menu CSS horizontal binêre.

# My_1menu - da ye assignment style bo element UL- bi id = my_1menu, lîsteya-style heye: none -, vê fermanê bi jê daxa hiştin ji aliyê tumar hatin destnîşankirin.

width: 800px - firehî ji pêşeka me 800 pixel e.

padding: 0 - ev jê re padding hundir.

margin: auto - vyravnivnie menu horizontal li navenda rûpel dike.

# My_1menu li - hêzeke styles li-hêmanên.

height: 55px - height menu.

# My_1menu a: hover - styles bo element hêzeke û mişk, dema ew bi xapandinê ye.

Em ê bi berfirehî agahdariya her line, wek her pêşvebirinê dikarin Parametreyên xwe ya li vê derê diyar bike. Vê bingehê ji bo bikaranîna styles di pêşekê de li ser malpera me. Hûn dikarin wê a dîtinê qediyayî zêdetir û bedew bikaranîna pictures bide,. Hacetê element di heman demê de, ji bo nimûne, background: url (img1.png) dubare-x. Bila li background: url (img2.png) dubare-x bo: hover.

Bi kar tînin, xeyalkirin, tercîhên creative xwe. Paşê li ser hîmê ku zanîna li ser çawa biafirîne menu hêsan yên li ser malpera me, tu a rûpel bi design yekane xwe bi xwe pêş de dibe.