01 ka-06
Ungadala kanjani ukuhamba nge-Tabbed nge-CSS ne-No Images
Ukuhamba kumakhasi wewebhu kuyindlela yokwahlula, futhi ukuzulazula kwamathebhu kufana nohlu olungezansi. Kulula kakhulu ukudala ukuzulazula kwe-tabs ene-CSS, kepha i- CSS 3 isinika amathuluzi ambalwa ukuze abonakale bebukeka kahle.
Le tutorial izokuthatha nge-HTML ne-CSS edingekayo ukudala imenyu yamathebhu we-CSS. Chofoza kuleyo link ukuze ubone ukuthi kuzobukeka kanjani.
Le menyu ithebhu ayisebenzisi izithombe , i-HTML kuphela ne-CSS 2 ne-CSS 3. Kungenziwa kalula ihlelwe ukwengeza amanye amathebhu noma ukushintsha umbhalo kuwo.
Ukusekelwa kwesiphequluli
Le menyu ithebhu izosebenza kuzo zonke iziphequluli ezinkulu . Umhloli we-intanethi ngeke abonise amacala azungezile, kodwa ngaphandle kwalokho, izobonisa amathebhu afana ne-Firefox, Safari, Opera, ne-Chrome.
02 ka 06
Bhala uhlu lwakho lwemenyu
Wonke amamenyu wokuzula namathebhu empeleni ayilona uhlu olungavunyelwe. Ngakho into yokuqala ofuna ukuyenza ukuloba uhlu olungavumelanisiwe lwezixhumanisi lapho ufuna khona ukuhambisa kwakho ithebhu.
Lesi sifundo sicabanga ukuthi ubhala i-HTML kumhleli wombhalo nokuthi wazi ukuthi ungabeka i-HTML imenyu yakho ekhasini lakho lewebhu.
Bhala uhlu lwakho olungenakuqondiswa kanje:
- isigaba = "uhlu lwamathebhu">
- CSS 3
- id = "yamanje"> Amathebhu
- Ngokuba
- Amamenyu
Uzoqaphela ukuthi ikhodi imemeza izinto ezimbili: isigaba = "uhlu lwamathebhu" ne-id = "yamanje". Okokuqala kuyadingeka . Uma ungafaki isigaba samathebhu ohlwini lwakho olungavumelanisiwe, amathebhu ngeke asebenze. Owesibili ukhetha ukuzikhethela. Faka i-id = "yamanje" kunoma iyiphi ithebhu ongathanda ukuyiqokomisa kuleli khasi. Ngivame ukusebenzisa lokhu ukugqamisa ikhasi engikhona, kodwa ungalisebenzisa ukugqamisa ithebhu ebaluleke kakhulu. Noma ungasusa ngokuphelele.
03 ka 06
Qala ukuhlela ishidi lakho lesitayela
Ungasebenzisa noma ishidi lesitayela sangaphandle noma ishidi langaphakathi lesitayela . Ikhasi lemenyu yesampula lisebenzisa ishidi langaphakathi lesitayela ku-
yedokhumenti.Okokuqala Sizokwakheka i-UL Itself
Yilapho sisebenzisa uhlu lwamathebhu ekilasini .ku-HTML. Esikhundleni sokukhomba umaki we-UL, ozobe ubeka zonke izinhlu ezingavunyelwe ekhasini lakho, kufanele udwebe kuphela isigaba UL. tablist Ngakho ukungena kokuqala ku-CSS yakho kufanele kube:
.abablist {}Ngiyakuthanda ukufaka i-brace curly brace (}} ngaphambi kwesikhathi, ngakho angikhohlwa kamuva.
Ngenkathi sisebenzisa uhlu olungavumelekile lwamathegi ohlwini lwamenyu wethebhu, kodwa asifuni noma yikuphi izinhlamvu noma izinombolo ezihambayo. Ngakho isitayela sokuqala okufanele uyengeze. isitayela-uhlu: akekho; Lokhu kusitshela isiphequluli ukuthi nakuba luhlu, luhlu olungenazo izitayela ezandulelwe ngaphambili (njengezinhlamvu noma izinombolo).
Khona-ke, ungabeka ukuphakama kohlu lwakho ukufanisa isikhala ofuna ukuba sigcwalise. Ngakhethe u-2em wokuphakama kwami, njengoba lokho kuphindwe kabili usayizi wefonti ejwayelekile, futhi unikeza cishe isigamu se-em ngenhla nangaphansi kombhalo wethebhu. ukuphakama: 2em; Kodwa ungabeka ububanzi bakho kunoma yisiphi isayizi ongathanda. Amathegi we-UL azothatha ngokuzenzakalelayo u-100% ububanzi, ngakho-ke ngaphandle uma ufuna ukuthi ube mncane kunesiqukathi samanje, ungashiya ububanzi ngaphandle.
Okokugcina, uma ishidi lakho lesitayela sesitayela lingenalo ukusethelwa kwamathegi we-UL ne-OL, uzofuna ukuwafaka. Lokhu kusho ukuthi kufanele uvale imingcele, ama-margins, nokunamathisela ku-UL yakho. i-padding: 0; umkhawulo: 0; umngcele: akekho; Uma usuvele usetha kabusha kabusha umaka we-UL, ungashintsha amapheshana, ukufaka uphawu, noma umngcele kunento ehambisana nomklamo wakho.
Isigaba sakho sokugcina sokubhalisa kufanele sibonakale kanje:
.kubhalisile {isitayela samagama: akukho; ukuphakama: 2em; i-padding: 0; umkhawulo: 0; umngcele: akekho; }}04 ka 06
Ukuhlela izinto zezincwadi ze-LI
Uma usubhale uhlu lwakho olungavumelanisiwe, udinga ukudweba amathegi we-LI ngaphakathi kwalo. Uma kungenjalo, bazokwenza njengoluhlu olujwayelekile bese beya emgqeni olandelayo ngaphandle kokubeka amathebhu wakho ngendlela efanele.
Okokuqala, faka isakhiwo sakho sesitayela:
.abablist li {}Khona-ke ufuna ukuthethelela amathebhu wakho ukuze ahlele phezulu endizeni enezingqimba. faka: kwesokunxele;
Futhi ungakhohlwa ukwengeza umkhawulo phakathi kwamathebhu, ngakho ahlangani ndawonye. umkhawulo ngakwesokudla: u-0.13m;
Izitayela zakho ze-li kufanele zibukeke kanje:
.abablist li {float: kwesokunxele; umkhawulo ngakwesokudla: u-0.13m; }}05 ka 06
Ukwenza amathebhu abukeke njengezithebhu nge-CSS 3
Ukwenza okuningi kokuphakamisa okunzima kuleli shicilelo lesitayela, ngibheka izixhumanisi ngaphakathi kohlu olungavunyelwe. Iziphequluli ziyaqaphela ukuthi izixhumanisi zenza okuningi ekhasini lewebhu kunezinye amathegi, ngakho kulula ukuthola iziphequluli ezindala ukuhambisana nezinto ezifana ne-hover States uma uzifaka kumatheki wehange (izixhumanisi). Ngakho okokuqala bhala izakhiwo zakho zesitayela:
.abablist li {} .abablist li a: hover {}Ngenxa yokuthi lawa mathethi kufanele enze njengamathebhu kuhlelo lokusebenza, ufuna yonke indawo yethebhu ingacaciswa, hhayi nje umbhalo oxhunyiwe. Ukuze wenze lokhu, kufanele uguqule umaki we-A kusuka esimweni esivamile "se- inline " esimweni esiyi-element block . ukubonisa: ukuvimba; (Uma unesithakazelo sokwazi okwengeziwe ngomsindo, funda i- Block-Level vs. Elements Elements .)
Khona-ke, indlela elula yokuphoqelela amathebhu akho ukuba afane phakathi komunye nomunye, kodwa namanje uguqule ukulingana nobubanzi bombhalo ukwenza ukulungiswa kwesokudla nokushiya okufanayo. Ngasebenzisa i-padding shorthand impahla ukubeka phezulu nokuphansi ku-0 futhi ngakwesokudla nangesobunxele kuya ku-1. i-padding: 0th 1;
Ngiphinde ngakhetha ukukhipha isixhumanisi sokugcizelela, ukuze amathebhu abheke kancane njengezixhumanisi. Kodwa uma izilaleli zakho zingase zidideke yilokho, shiya lo mzila. isixhumanisi-umhlobiso: akekho;
Ngokubeka umngcele omncane ezungeze amathebhu, kubenza babonakale njengamathebhu. Ngasebenzisa umda wesikhashana umngcele wokubeka umngcele nxazonke zomngcele ezine: 0.06m eqinile # 000; Futhi wasebenzisa impahla engezansi-phansi ukuze isuse kusuka phansi. umngcele-ngezansi: 0;
Ngabe ngenza izinguquko kumbala wefonti, umbala, nomugqa wamathebhu. Beka lezi izitayela ezifanisa isayithi lakho. ifonti: 0.88em / 2em ngesibindi, i-geneva, i-helvetica, sans-serif; umbala: # 000; umbala wesizinda: #ccc;
Zonke izitayela ezingenhla kufanele ziye kumakhethi .abablist li, umbuso ukuze kuthinte amathegi anchor ngokujwayelekile. Khona-ke ukuze wenze amathebhu abonakale echofoza ngaphezulu, kufanele ungeze umbuso wombuso ombalwa .ibhalisi li: ukuhamba.
Ngithanda ukushintsha umbala wombhalo nesimuva ukuze wenze ithebhu pop lapho uthola igundane phezu kwayo. isizinda: # 3cf; umbala: #fff;
Futhi ngifake esinye isikhumbuzi ezipheqululini engizifuna ukuthi isixhumanisi sihlale singagcizelelwe. umbhalo-umhlobiso: akekho; Enye indlela evamile ukuguqula umcibisholo lapho uphethe igundane phezu kwethebhu. Uma ufuna ukwenza lokho, ushintshe itheksthi-umhlobiso: cindezela;
Kodwa iphi i-CSS 3?
Uma ngabe unakekele, mhlawumbe uqaphele ukuthi akuzange kube khona izitayela ze-CSS 3 ezisetshenziselwa isitayela sesitayela. Lokhu kunenzuzo yokusebenza kunoma yisiphi isiphequluli samanje, kufaka phakathi i-Internet Explorer. Kodwa akenzi amathebhu abukeke njengento engaphezu kwamabhokisi wesigcawu. Ngokwengeza ucingo lwesitayela se-CSS 3-umzila wendawo (futhi izingcingo eziqondene neziphequluli ezihambisanayo) ungenza izingqikithi zenziwe, zibukeke njengamathebhu kufolda ye-manila.
Izitayela okufanele uzifake kulo myalelo wokubhaliwe yizi: -webkit-umngcele-phezulu-kwesokudla-radius: 0.50m; -webkit-umngcele-phezulu-kwesokunxele-radius: 0.50m; -mzansi-emkhatsini we-radius-topright: 0.50m; -mzansi-emanzini-okuyi-topleft: 0.50m; Umngcele-phezulu-kwesokudla-radius: 0.50m; Umngcele-phezulu-kwesokunxele-radius: 0.50m;
Lena yimiyalo yokugcina yokubhala engayibhala:
.abablist li {display: block; i-padding: 0th 1; umbhalo-umhlobiso: akekho; Umngcele: 0.06m oqinile # 000; umngcele-ngezansi: 0; ifonti: 0.88em / 2em ngesibindi, i-geneva, i-helvetica, sans-serif; umbala: # 000; umbala wesizinda: #ccc; / * CSS 3 izakhi * / webkit-umngcele-phezulu-kwesokudla-radius: 0.50m; -webkit-umngcele-phezulu-kwesokunxele-radius: 0.50m; -mzansi-emkhatsini we-radius-topright: 0.50m; -mzansi-emanzini-okuyi-topleft: 0.50m; Umngcele-phezulu-kwesokudla-radius: 0.50m; Umngcele-phezulu-kwesokunxele-radius: 0.50m; } .abablist li: i-hover {ngemuva: # 3cf; umbala: #fff; umbhalo-umhlobiso: akekho; }}Ngalezi zitayela, unemenyu ethebhulethi esebenza kuzo zonke iziphequluli ezinkulu futhi ubukeka njengamathebhu amanyathelisiwe ku-CSS 3 iziphequluli ezivumelanisiwe. Ikhasi elilandelayo likunika okunye okukhethwa kukho ongayisebenzisa ukugqoka nakakhulu.
06 ka-06
Qinisekisa ithebhu yamanje
Ku-HTML engiyidalile, i-UL yayinezinto eziluhlu olulodwa ne-ID. Lokhu kukuvumela ukuba unike i-LI eyodwa isitayela ehlukile kusukela kokunye. Isimo esivame kakhulu ukwenza ithebhu yamanje ibonakale ngandlela-thile. Enye indlela yokucabanga ngalokhu ukuthi ufuna ukuphululela amathebhu angahlali. Wena ushintsha lapho i-id ikhona kumakhasi ahlukene.
Ngitayela kokubili i-#current A tag kanye ne-#current A: i-hover sta ukuze bobabili bahluke kakhulu. Ungashintsha umbala, umbala wangemuva, ngisho nokuphakama, ububanzi kanye nokukhishwa kwaleso sici. Yenza noma yiziphi izinguquko zibe nomqondo kudizayini yakho.
.abablist li # okwamanje {umbala wangemuva: # 777; umbala: #fff; } .kubhalisile i # yamanje a: hover {background: # 39C; }}Futhi usuqedile! Usanda kudala imenyu yamathebhu wewebhusayithi yakho.