01 ea 06
Tsela ea ho Etsa Tsela ea Tabbed ka CSS le Ha ho Litšoantšo
Tsela ea maqephe a marang-rang ke mofuta oa lenane, 'me ho tsamaea ka majoe ho tšoana le lenane le hlabang. Ho bonolo ho bōpa ho tsamaea ka sekhahla le CSS, empa CSS 3 e re fa lisebelisoa tse seng kae tse tla etsa hore li shebahala hantle.
Thuto ena e tla u nka ka HTML le CSS e hlokahalang bakeng sa ho hlahisa menu ea CSS tabbed. Tobetsa ho se hokae ho bona hore na se tla shebahala joang.
Lenaneo lena le kentsoeng ha le sebelise litšoantšo , HTML feela le CSS 2 le CSS 3. E ka fetoha habonolo ho eketsa lithebe tse ling kapa ho fetola temana ho tsona.
Tšehetso ea Sebapali
Lenaneo lena la tabo le tla sebetsa libukeng tsohle tse kholo . Mofuputsi oa Inthanete a ke ke a bontša likhutlo tse pota-potileng, empa ho seng joalo, e tla bontša li-tab joaloka Firefox, Safari, Opera le Chrome.
02 ea 06
Ngola Lethathamo la Hao la Lintho
Litsela tsohle le menyetla ea ho tsamaea li hlile ke feela lenane le sa tsejoeng. Kahoo ntho ea pele eo u batlang ho e etsa ke ho ngola lethathamo le sa tsejoeng la li-link ho ea moo u batlang ho tsamaisoa ha hao tabeng.
Thupelo ena e nka hore u ngola HTML ka mohlophisi oa mongolo le hore u tseba moo u ka kenang HTML ea menu ea hau leqepheng la hau la web.
Ngola lenane la hau le sa tsamaisoang ka tsela ena:
- sehlopha = "tablist">
- CSS 3
- id = "current"> Tabs
- Bakeng sa
- Menus
U tla hlokomela hore khoutu e hoeletsa lintho tse peli: sehlopha = "tablist" le id = "current". Ea pele e hlokoa . Haeba u sa behe sehlopha sa lihlopha tsethathamong lethathamong la hao le sa tsejoeng, litheba ha li sebetse. Ea bobeli ke ea ho ikhethela. Beha id = "hona joale" hohle kapa kae tab eo u ka ratang ho e totobatsa leqepheng leo. Hangata ke sebelisa sena ho totobatsa leqephe leo ke leng ho lona, empa u ka le sebelisa ho totobatsa tab ea bohlokoa ka ho fetisisa. Kapa u ka e tlosa ka ho feletseng.
03 ea 06
Qala ho Fetola Lethathamo la Hao la Sebopeho
U ka sebelisa leha e le efe ea leqhepe kapa mokhoa oa ka hare oa setaele . Leqephe la menyetla ea menyetla le sebelisa saense ea ka hare ka
ea tokomane.Ntlha ea Pele re tla etsisa UL Itself
Mona ke moo re sebelisang lethathamo la sehlopha .in HTML. Ho e-na le ho ngola letšoao la UL, le leng le neng le ka hlalosa lintlha tsohle tse sa tsamaisoang leqepheng la hau, u lokela ho bua ka mokhoa oa feela oa sehlopha sa UL. tablist Kahoo ho kena ka pele CSS ea hau e lokela ho ba:
.tablist {}Ke rata ho beha sephethong sa ho qetela (}) pele ho nako, kahoo ha ke e lebale hamorao.
Ha re ntse re sebelisa lenane le sa tsejoeng lethathamong la lenane la menyetla ea tabo, empa ha re batle li-bullets kapa linomoro tse kenang ka hare. Kahoo mokhoa oa pele oo u lokelang ho o eketsa ke. mokhoa oa lethathamo: ha ho letho; Sena se bolella sebapali hore le hoja e le lethathamo, ke lethathamo le se nang mekhoa e etselitsoeng pele (joaloka li-bullets kapa linomoro).
Joale, o ka beha bophahamo ba lenane la hau ho bapisa sebaka seo u batlang hore se tlatse. Ke khethile 2em bakeng sa bophahamo ba ka, kaha ke habeli palo e tloaelehileng ea melaetsa, 'me e fana ka hoo e ka bang halofo ea em ka holimo le ka tlaase ho temana ea tabo. bolelele: 2em; Empa o ka beha bophara ba hau ho boholo boo u ka bo ratang. Mantsoe a UL a tla nka bophara ba 100%, kahoo ntle le haeba o batla hore o be nyenyane ho feta sejana sa morao-rao, u ka siea bophara ka ntle.
Qetellong, haeba letlapa la hau la sethala ha le na li-preset bakeng sa litepe tsa UL le OL, u tla batla ho li kenya. Sena se bolela hore o lokela ho tima meeli, marang-rang, le ho pata LL. ho robala: 0; marge: 0; moeli: ha ho letho; Haeba u se u ntse u tsosolositse lebokose la UL, u ka fetola margins, ho pata kapa moeli ho hong ho lumellanang le moqapi oa hau.
Sehlopha sa hau sa ho qetela sa sehlopha se lokela ho shebahala:
sethaleng sa melaetsa: ha ho letho; bolelele: 2em; ho robala: 0; marge: 0; moeli: ha ho letho; }}04 ea 06
Ho hlophisa LI Lenane la Lintho
Hang ha u se u kentse lenane la hau le sa tsamaisoang, u lokela ho ngola matšoao a LI ka hare ho eona. Ho seng joalo, ba tla sebetsa joaloka lethathamo le tloaelehileng mme e mong le e mong a fallela mola o hlahlamang ntle le ho tsamaisa litabane tsa hau ka nepo.
Ntlha ea pele, beha setša sa hau sa mokhoa:
.tablist li {}Ebe o batla ho phaphamala li-tab ea hau e le hore li lule holim 'a sefofane se holimo. float: ho le letšehali;
Hape u se ke ua lebala ho eketsa tekanyo e itseng pakeng tsa li-tab, kahoo ha li kopane hammoho. marginal-right: 0.13em;
Lifaele tsa hau li lokela ho shebahala:
.tablist li {float: ka ho le letšehali; marginal-right: 0.13em; }}05 ea 06
Ho etsa hore li-Tabs li shebahale joaloka Li-Tabs tse nang le CSS 3
Ho etsa boholo ba ho phahamisa litebelisuoa ka mokhoa ona oa setaele, ke lebisa tlhokomelo ho li-link tse ka har'a lenane le sa tsejoeng. Bapalami ba hlokomela hore ho hokahanya ho etsa ho hongata ho websaete ea marang-rang ho feta li-tags tse ling, kahoo ho bonolo ho fumana libabelisi tsa khale hore li lumellane le lintho tse kang li-hover ha u li kenya ho lebokose la likepe. Kahoo qala ngola mekhoa ea hau ea mokhoa:
.tablist li a {} .tablist li a: hover {}Hobane lihlopha tsena li lokela ho itšoara joaloka li-tabo ho kopo, u batla hore sebaka sohle sa tabo se khone ho qaqisoa, eseng feela taba e amanang. E le hore u etse sena, u tlameha ho fetola lebokose la A ho 'muso o tloaelehileng "oa inthanete " ho ea ho ntho ea bohlokoa . hlahisa: thibela; (Haeba u thahasella ho tseba ho eketsehileng ka phapang, bala li -Level-Block vs. Elements Elements .)
Joale, tsela e bonolo ea ho qobella litabane tsa hau hore li beheletsane, empa li ntse li feto-fetoha ho lumellana le bophara ba temana ke ho etsa se nepahetseng le se letšehali se lekana. Ke ne ke sebelisa setša sa shodthand ho beha setoro le holimo ho 0 le ho le letona le le letšehali ho 1em. ho palama: 0 1em;
Ke ile ka boela ka khetha ho tlosa melaetsa ea lihlopha, e le hore li-tabs li shebahale ka tlase joaloka li-link. Empa haeba bamameli ba hao ba ka 'na ba ferekanngoa ke seo, tlohela mola ona. link-decoration: ha ho letho;
Ka ho beha moeli o mosesaane haufi le li-tab, o etsa hore ba shebahale joaloka li-tab. Ke ne ke sebelisa thepa ea shorthand ea moeli ho beha moeli ho potoloha mahlakoreng ana a mabeli moeli: 0.06m e tiileng # 000; Ebe o sebelisa thepa e ka tlaase ho moeli ho e tlosa ka tlase. moeli-tlase: 0;
Eaba ke etsa liphetoho ho 'mala oa mohala, mebala le mokokotlo oa li-tab. Beha tsena mekhoa e tšoanang le sebaka sa hau. mongolo: bold 0.88em / 2em e le hantle, geneva, helvetica, sans-serif; 'mala: # 000; mobala-kahare: #ccc;
Mefuta ena kaofela e ka holimo e lokela ho ea ho khethiloeng .bablistlist a, puso e le hore e ama li-tag tsa anchor ka kakaretso. Ebe ho etsa hore litabane li hlahe haholoanyane, u lokela ho eketsa puso e seng mekae .tablistlist a: hover.
Ke rata ho fetola 'mala oa temana le semelo ho etsa hore tabo e pop ha u e-na le eona ka eona. mokokotlo: # 3cf; 'mala: #fff;
'Me ke kenyelelitse khopotso e' ngoe ho li-browser hore ke batla hore sekahare se lule se tiile. mongolo-mokhabiso: ha ho letho; Tsela e 'ngoe e tloaelehileng ke ho khutlisetsa moqotlo o ka tlaase holim'a hau ha u e-na le tokelo holim'a tabo. Haeba u batla ho etsa joalo, fetola hore e be mokhabiso-melaetsa: o totobetse;
Empa e hokae CSS 3 e hokae?
Haeba u 'nile ua ela hloko, mohlomong u hlokometse hore ha ho e-s'o be le mekhoa ea CSS 3 e sebelisoang ka mokhoa oa mokhoa oa ho ngola. Sena se na le molemo oa ho sebetsa ho sebadi leha e le sefe sa morao-rao, ho akarelletsa Internet Explorer. Empa ha e etse hore li-tabs li shebahala joaloka ntho e fetang li-square boxes. Ka ho eketsa mohala oa CSS 3 moeli-radius (le mehala e itseng e amanang le sebapali) u ka etsa hore lihlopha li behoe, ho shebahala joaloka li-tab ho folda ea manila.
Mekhoa eo u lokelang ho e eketsa molaong oa .abablist ke: -webkit-border-top-right-radius: 0.50em; -ebkit-edge-top-left-radius: 0.50em; mohaho-moeli-mohaho-oa thepa: 0.50em; mohaho o motlakase oa mosi o moeling oa motlakase: 0.50em; moeli-top-right-radius: 0.50em; moeli-ka holimo-lehlakoreng le letšehali: 0.50em;
Tsena ke melao ea ho qetela eo ke e ngotseng:
.bablistlist ke {display: thibela; ho palama: 0 1em; mongolo-mokhabiso: ha ho letho; moeli: 0.06m e tiileng # 000; moeli-tlase: 0; mongolo: bold 0.88em / 2em e le hantle, geneva, helvetica, sans-serif; 'mala: # 000; mobala-kahare: #ccc; / * CSS 3 likarolo * / webkit-moeli-ka holimo-lehare-radius: 0.50em; -ebkit-edge-top-left-radius: 0.50em; mohaho-moeli-mohaho-oa thepa: 0.50em; mohaho o motlakase oa mosi o moeling oa motlakase: 0.50em; moeli-top-right-radius: 0.50em; moeli-ka holimo-lehlakoreng le letšehali: 0.50em; } .abablist li a: hover {ka morao: # 3cf; 'mala: #fff; mongolo-mokhabiso: ha ho letho; }}Ka mekhoa ena, u na le menyetla e sebetsang e sebetsang libukeng tsohle tse khōlō tsa marang-rang 'me e shebahala joaloka lipapatso tse ntle tse hatisitsoeng ka li-browser tse lumellanang le CSS 3. Leqephe le hlahlamang le fana ka kgetho e 'ngoe hape eo u ka e sebelisang ho e apara le ho feta.
06 ea 06
Totobatsa Taba ea Hona Joale
Ka HTML eo ke e bōpileng, UL e ne e e-na le lethathamo le le leng le nang le ID. Sena se u nolofalletsa ho fa LI e 'ngoe mokhoa o sa tšoaneng ho tsoa ho ba bang kaofela. Boemo bo tloaelehileng ka ho fetisisa ke ho etsa hore sebaka sa hona joale se hlahe ka tsela e itseng. Tsela e 'ngoe eo u ka nahanang ka eona ke hore u batla ho hlola lihlopha tse sa pheleng. U fetola moo id e leng maqepheng a fapaneng.
Ke kopa lebokose la # la motlakase hammoho le #current A: hover sta e le hore ka bobeli e fapane hanyane. U ka fetola 'mala, mobala o ka morao, esita le bophahamo, bophara le marang-rang a ntlha eo. Etsa liphetoho leha e le life tse nang le kutloisiso moqapi oa hau
.bablistlist # mochine oa {background-color: # 777; 'mala: #fff; } .abablist li # hona joale ho: hover {meleng: # 39C; }}'Me u felile! U sa tsoa theha menu ea marang-rang bakeng sa sebaka sa hau sa marang-rang.