Kuqondile CSS imenyu: ukwenza ngokwakho

Ezinye webmaster ungafuni ukuchitha isikhathi ukuthuthukisa kusuka ekuqaleni izakhi elula asekhona kakade. Bakholelwa ukuthi asikho isidingo e zokuchitha isikhathi sakho entweni uye eside lapho. Eqinisweni, labo nje kahle HTML futhi CSS, kubalulekile ukwenza ngokwakho izinto eziningi ukuze abe nokuqonda emihle yomsebenzi wabo. Lokhu kusebenza imenyu. Dala mpo CSS amamenyu. Kuzobakhuthaza isekelwe kuphela HTML futhi CSS, ngaphandle kokusebenzisa Javascript jQuery. imenyu ngamunye uhlu izixhumanisi eziholela emakhasini isayithi.

izinyathelo eziyisisekelo

Ukudala elula mpo imenyu CSS, udinga izinyathelo ezilandelayo:

1. Okokuqala, bheka ukuthi uhlu izixhumanisi (usebenzisa ikhodi ye-HTML), zazo imenyu kuyoba. Banike igama, isibonelo, imi kanje:

1. Ikhaya.
2. Umlando wethu.
3. Qondisa.
4. Amasevisi.
5. Oxhumana nabo.

2. Khona zezitayela izixhumanisi njengoba ufisa ngosizo CSS.

Sibhala le ikhodi ye-HTML, hlala ifayela my_Vmenu.html futhi ubone ukuthi izobukeka kusiphequluli:

Yilesi isisekelo (skeleton) imenyu zethu. # 1, # 2, njll kufanele kuthathelwe indawo inkomba. Bona ukuthi kubukeka kusiphequluli. Isithombe ngeke uthanda. Manje kumelwe siqale ukuchaza izingxenye isitayela, ukwenza ephelele mpo CSS amamenyu.

incazelo izitayela

Dala my_Vmenu.css ifayela, esibekela yonke into ofuna ukuthuthukisa ukubukeka okufana esibalulekile isayithi. Nansi ikhodi, ukwethulwa okuyinto izokuvuselela mpo CSS amamenyu. It nokubhala ifayela elisha, bese sizozibheka eduze bheka okushiwo imigca ukuthi zinikwa.

Incazelo eningiliziwe esetshenziswa Lwesitayelashidi

Manje cabanga imininingwane CSS yethu imenyu mpo:

uhlu-isitayela-uhlobo likuvumela ukuthi ususe uhlu iziphambano. Ngokubeka "0" ku-margin futhi ukupheda ukususa ukupheda owengeziwe ohlwini. Njengoba singabona kusukela ikhodi ye-HTML, imenyu yethu uhlu, futhi izitayela kuchazwa usebenzisa CSS.

ul # my_Vmenu - isitayela jikelele we lonke uhlu.

ul # my_Vmenu li - isitayela izixhumanisi phakathi Ithegi li.

ul # my_Vmenu li: lokuhambisa phezulu - incazelo yohlobo olucutshungulwayo semenyu izinto ngesikhathi lapho umuntu ehamba phezu kwabantu.

ul # my_Vmenu li span - incazelo yombhalo (isihloko imenyu).

Khumbula ukuthi amafayela my_Vmenu.css my_Vmenu.html futhi kumele agcinwe lwemibhalo efanayo. Nokho, bangase etholakala kumafolda ahlukene, kodwa ke kubalulekile ukubhalisa kufayela my_Vmenu.html indlela eya my_Vmenu.css. Qaphela, ngoba lezi zifiki ukuba le nkinga ngokuvamile.

Isitayela Kumele uxhumeke phakathi tags ekhanda html-fayela. menu_1.png futhi menu_2.png - lena nesithombe lento isithombe imenyu esimweni esejwayelekile futhi lokuhambisa phezulu.

Kungcono ukugcina izithombe ifolda ehlukile izithombe, igama it my_images, kodwa ke Lungisa ikhodi CSS. Bhala lapho lezi zithombe ziboniswa, zingabantu kulolu hlu lwemibhalo:-url (my_images / menu_1.png) ne-url (my_images / menu_2.png).

Ngo lonke izakhiwo ezichazwe ikhodi CSS, ukuqonda kalula. Bona ukuchaza ukubonakala imenyu yethu. Kulula ukuqaphela ukuthi ububanzi nobude lwezinto sishiwo izinto ezifanayo esimweni esejwayelekile, futhi uma udlula igundane phezu kwabo. Usayizi wefonti 18px, okokugxusha icacisa indentation kusuka ezinhlangothini ezahlukene amagama endaweni. isibonisi kukuvumela ukusetha ukubonisa iyunithi ukusetha ububanzi ukupheda.

imenyu wethu mpo

Njengoba ubona, mpo CSS amamenyu ukudala kalula. Ngesisekelo idatha yolwazi uzokwazi ukwenza kube amahle kukhanga izivakashi zewebhusayithi yakho! Sebenzisa amehlo akho engqondo, bese imenyu stylish umphelelisi kusayithi lakho.