01 ngo-06
Indlela yokudala ukuThuthwa kweTabbed ngeCSS kunye neNew Images
Ukuhamba kwiphepha lewebhu luhlobo lweluhlu, kwaye ukuhanjiswa kwetabhethi kufana nolunye uluhlu olungenanto. Kulula kakhulu ukudala ukuhamba kwe-CSS, kunye ne- CSS 3 , kodwa i- CSS 3 isinika amathuluzi ambalwa ukwenza ukuba bajonge.
Olu qeqesho luza kukuthabatha nge-HTML kunye ne-CSS efunekayo ukudala imenyu ye-CSS ithebhu. Cofa kwikhonkco ukuze ubone indlela eya kujonga ngayo.
Imenyu ethebhulekileyo ayisebenzisi imifanekiso , i-HTML kuphela kunye ne-CSS 2 ne-CSS 3. Ingakwazi ukulungiswa lula ukufaka ezinye iithebhu okanye ukutshintsha itekisi kubo.
Inkxaso yeSiphequluli
Le menu ithebhu iza kusebenza kuzo zonke iiprosesa ezinkulu . Umhloli we-intanethi akayi kubonisa iindondo ezijikelezayo, kodwa ngaphandle koko, iya kubonisa iithebhu ezifana neFilofox, i-Safari, i-Opera kunye ne-Chrome.
02 we-06
Bhala Uluhlu lweMenu
Wonke amamenyu okuhamba kunye namathebhu ngokwenene nje uluhlu olungalunakunyanga. Ngoko into yokuqala ofuna ukuyenza kukuba ubhale uluhlu olungalunakali lweekhonkco ukuya kwindawo ofuna ukuhamba kuyo.
Olu qeqesho lucinga ukuba ubhala i-HTML kumhleli wombhalo kwaye uyazi apho ubeka khona i-HTML yemenyu yakho kwikhasi lakho lewebhu.
Bhala uluhlu lwakho olungenakulinganiswa nalolu hlobo:
- kwiklasi = "uluhlu lwesithuba">
- CSS 3
- id = "yangoku"> Amathebhu
- Ngokuba
- Imenyu
Uya kuphawula ukuba ikhowudi imemeza izinto ezimbini: iklasi = "uluhlu lwesithuba" kunye id = "yangoku". Okokuqala kuyadingeka . Ukuba awuyibeki iklasi yoluhlu kwiluhlu lwakho olungavumelekanga, iithebhu aziyi kusebenza. Okwesibini ukhetho. Faka i-id = "yangoku" kwiyiphi na ithebhu ongathanda ukugqitywa kulo phepha. Ngokuqhelekileyo ndisebenzisa le nto ukugqamisa iphepha endikuyo, kodwa ungayisebenzisa ukugqamisa itabhile ebalulekileyo. Okanye unako ukususa ngokupheleleyo.
03 we-06
Qala Ukuhlela Isicatshulwa Sendlela Yakho
Ungasebenzisa okanye ishidi lesitayela sangaphandle okanye ishidi langaphakathi lomfanekiso . Ikhasi lemenyu yesampuli isebenzisa ishidi lomsebenzi wangaphakathi kwi
yolu xwebhu.Okokuqala Sizokwakheka UL ngokwakhe
Le yilapho sisisebenzisa uluhlu lwethebhu kwi-HTML. Esikhundleni sokuthabatha uphawu lwe-UL, oluya kufaka zonke uluhlu olungenakuqondaniswa kwiphepha lakho, kufuneka uthayiphe kuphela iklasi ye-UL. Uluhlu lwesithuba so kuqala ukungena kwi CSS yakho kufuneka:
.abablist {}Ndiyakuthanda ukufaka kwi-curly brace (}} ngaphambi kwexesha, ngoko andiyilibala kamva.
Ngethuba sisebenzise itekisi engahambelaniyo yoluhlu lwemeti yamatye, kodwa asifuni naliphi na iibhola okanye iinombolo ezinyakazayo. Ngoko isitayela sokuqala kufuneka udibanise. uluhlu lwesalathisi: akukho; Oku kuchaza isiphequluli ukuba ngelixa luluhlu, luhlu olungenazo izitayela ezenziwe ngaphambili (njengezibhamu okanye iinombolo).
Emva koko, unokubeka ubude beluhlu lwakho ukufanisa indawo ofuna ukuyifaka. Ndikhethe 2em ngobude bam, njengoko kuphindwe kabini ubungakanani befonti, kwaye kunika malunga nesiqingatha se-em ngasentla naphantsi kwetekisi yethebhu. ukuphakama: 2m; Kodwa unokubeka ububanzi bakho kunoma yibuphi ubukhulu obungathanda. Iimpawu ze-UL ziza kuthatha ngokuzenzekelayo i-100% yobubanzi, ngoko ke ngaphandle kokuba ufuna ukuba kube mncinci kunesitya esitsha, ungashiya ububanzi.
Ekugqibeleni, ukuba ifayile yakho yesitayela ayinayo i-presets ye-UL ne-OL tags, uya kufuna ukuyibeka. Oku kuthetha ukuba kufuneka ucime imida, imida, kunye ne-padding kwi-UL yakho. ukupakisha: 0; umgama: 0; umda; akukho; Ukuba usuvele usetha kabusha umlingo we-UL, unokutshintsha iigxininiso, umgca, okanye umda kwinto ehambelana nokuyila kwakho.
Iklasi lakho lokugqibela kufuneka libukeke kanje:
.abablist {isalathisi-uluhlu: akukho; ukuphakama: 2m; ukupakisha: 0; umgama: 0; umda; akukho; }04 we-06
Ukuhlela izinto zeLI zoLuhlu
Emva kokuba uthayibhile uluhlu lwakho olungagqitywanga, kufuneka ukhangele amathegi e-LI ngaphakathi kwawo. Ngaphandle koko, baya kwenza njengoluhlu oluqhelekileyo kwaye nganye ishukunywe kumgca olandelayo ngaphandle kokubeka iifayile zakho ngokuchanekileyo.
Okokuqala, faka isakhiwo sakho sakhiwo:
.abablist li {}Emva koko ufuna ukuthambisa iithebhu zakho ukuze zidibanise kwi-plane ejikelezayo. float: ekhohlo;
Futhi ungakulibali ukufaka umda phakathi kweetabs, ngoko adibanisi kunye. umda osekunene: 0.13m;
Iimpawu zeli lifanele zibukeke ngale ndlela:
.abablist li {float: ngakwesobunxele; umda osekunene: 0.13m; }05 ka 06
Ukwenza i-Tabs Jonga njengeeTabs nge-CSS 3
Ukwenza uninzi lwephakamileyo eliphakamileyo kweli phepha lesitayela, ndijolise kwiikhonkco ngaphakathi kwoluhlu olungenakuqondwa. Abaphequluli bayaqaphela ukuba iinqhagamshelo zenza ngaphezulu kwiphepha lewebhu kunamanye amathegi, ngoko kulula ukufumana iziphequluli ezindala ukuba zihambisane nezinto ezifana ne-hover States xa uzifakela kumgca we-anchor (ikhonkco). Ngoko okokuqala bhala izakhiwo zakho zeetayitile:
.abablist li {} .abablist li: hover {}Ngenxa yokuba ezi zihloko kufuneka zisebenze njengezithebhu kwisicelo, ufuna ukuba yonke indawo yethebhu ichaneke, kungekhona nje itekisi edibeneyo. Ukwenza oku, kufuneka uguqule itekisi kwi-standard " yesigxina " kwisimo sebhloko . bonisa: uvimba; (Ukuba unomdla wokwazi okungakumbi malunga nokumahluko, funda i- Block-Level vs. Elements Elements .)
Emva koko, indlela elula yokunyanzelisa iithebhu zakho ukuba zilingane kunye, kodwa uguqule ukulungelelanisa ububanzi besicatshulwa ukwenzela ukuba ukwenze okulungileyo kunye nokushiya ukushiya okufanayo. Ndasebenzisa iprotrand yepropati yepropati ukubeka iphezulu kunye nezantsi ukuya kwi-0 kunye nekhohlo kunye nekhohlo ukuya kwi-1em. Ukupakisha: 0
Ndakhetha kwakhona ukususa ikhonkco ikhonkco, ukwenzela ukuba iithebhu zibukeke zingaphantsi njengezixhumanisi. Kodwa ukuba abaphulaphuli bakho bangadideka yiloo, shiya lo mgca. unxibelelwano-umhlobiso: akukho;
Ngokubeka umda omncinci malunga neetabs, kubangelwa ukuba bajonge njengeetabs. Ndasebenzisa umda we-short shorthand ukubeka umda ngeenxa zonke kumacala omane: 0.06m eqinile # 000; Emva koko wasebenzisa ipropati engezantsi-mali ukuze uyisuse phantsi. umda wezantsi: 0;
Emva koko ndenze uhlengahlengiso kumgca, umbala, kunye nombala wesiqalo weetable. Beka ezi zixhobo ezifanisa isayithi lakho. ifonti: ngesibindi 0.88em / 2em odwa, geneva, helvetica, sans-serif; umbala: # 000; Umbala wemibala: #ccc;
Zonke iifayile ezi ngasentla kufuneka zihambe kwi-selector .abablist li, umgaqo ukwenzela ukuba zichaphazele itekisi ye-anchor ngokubanzi. Emva koko ukwenza ukuba iifayile zibonakala zichaneke ngakumbi, kufuneka udibanise umthetho ombalwa welizwe .abablist u: hover.
Ndiyakuthanda ukutshintsha umbala wesicatshulwa kunye nesizinda ukuze wenze i-pop pop xa uphethe imouse phezu kwayo. imvelaphi: # 3cf; umbala: #fff;
Kwaye ndaquka esinye isikhumbuzo kwiziphequluli ukuba ndifuna ukuba umnxibelelwano ungagcinwanga. umbhalo-mboniso: akukho; Enye indlela eqhelekileyo ukuguqula umgca wecala xa u mouse phezu kwethebhu. Ukuba ufuna ukwenza oko, yitshintshe ibe yinto yokubhenca umbhalo: gxiba;
Kodwa phi iCSS 3?
Ukuba ubeka ingqalelo, mhlawumbi uqaphele ukuba akuzange kubekho iifayile zeCSS 3 ezisetyenziswe kwiphepha lesitayela. Oku kunenzuzo yokusebenza kuyo nayiphi na isiphequluli samanje, kuquka i-Internet Explorer. Kodwa akenzi ukuba iithebhu zibukeke ngathi nantoni na ngaphezu kweebhokisi zesikwere. Ngokungeza ifowuni ye-CSS 3 yomda-umda-kunye neefowuni ezithile ezixubileyo) unokwenza iimijikelezo zijikeleze, zikhangele ezinye iifayile kwifolda ye-manila.
Izitayela omele uzifake kwi-btlist li mgaqo: -webkit-umda-phezulu-kwesokudla-radius: 0.50m; -bbkit-umda-phezulu-kwesobunxele-radius: 0.50m; -mz-edge-radius -pright: 0.50em; -mz-edge-radius-topleft: 0.50m; umda ophezulu-ongakwesokudla-radius: 0.50m; Umda ophezulu-ongasentla-ongasemva: 0.50m;
Le yimiyalelo yokugqibela engabhala:
.abablist li {boniswa: ibhloko; Ukupakisha: 0 umbhalo-mboniso: akukho; umda: 0.06m oqinile # 000; umda wezantsi: 0; ifonti: ngesibindi 0.88em / 2em odwa, geneva, helvetica, sans-serif; umbala: # 000; Umbala wemibala: #ccc; / * CSS 3 izakhi * / webkit-umda-phezulu-kwesokudla-radius: 0.50m; -bbkit-umda-phezulu-kwesobunxele-radius: 0.50m; -mz-edge-radius -pright: 0.50em; -mz-edge-radius-topleft: 0.50m; umda ophezulu-ongakwesokudla-radius: 0.50m; Umda ophezulu-ongasentla-ongasemva: 0.50m; } .abablist li: hover {imvelaphi: # 3cf; umbala: #fff; umbhalo-mboniso: akukho; }Ngale mizobo, unemenyu ethebhulethi esebenza kuzo zonke iiprosesa eziphambili kwaye ibonakala njengezithuba ezintle eziprintiweyo kwi-CSS 3. Ikhasi elilandelayo likunika enye inketho ongayisebenzisa ukuyigqoka ngakumbi.
06 we-06
Gqamisa iThabhu yangoku
Kwi-HTML endiyidalile, i-UL inezinto eziluhlu olulodwa kunye ne-ID. Oku kukuvumela ukuba unike i-LI isitayela ezahlukeneyo ukusuka kwabanye. Iimeko eziqhelekileyo kukuba ukwenza ithebhu yangoku ivele ngendlela ethile. Enye indlela yokucinga ngale nto kukuba ufuna ukuphosa iifayile ezingapheliyo. Utshintsha apho i-id ikhona kumaphepha ahlukileyo.
Ndiyifaka umgca we-# we-A tag kunye ne-#current A: i-hover sta ukuze zombini ahluke. Ungatshintsha umbala, umbala ongasemva, nokuba ubude, ububanzi kunye nokupakisha kwaloo nto. Yenza nayiphi na inguqu inguqu kulwakhiwo lwakho.
.abablist li # yangoku {umbala wesiqalo: # 777; umbala: #fff; } .abablist li # yangoku: i-hover {imvelaphi: # 39C; }Kwaye uyenziwe! Udale nje imenyu ethebhulekileyo kwiwebhusayithi yakho.