01 of 06
Ahoana no fomba hananganana ny navigateur amin'ny alàlan'ny CSS sy ny sary
Ny tranonkala dia ny endriky ny lisitra iray, ary ny lisitry ny tablety dia toy ny lisitra horonana. Mora kokoa ny mamorona tranonkala horonan-tsarimihetsika miaraka amin'ny CSS, fa ny CSS 3 kosa manome antsika fitaovana vitsivitsy mba ahafahan'izy ireo mijery tsara kokoa.
Ity lesona ity dia hitondra anao amin'ny alalan'ny HTML sy CSS ilaina mba hamoronana menasoana CSS mifandray. Tsindrio ity rohy ity mba hijery ny fomba hijereny.
Ity menu-nao tabilao ity dia tsy mampiasa sary , HTML sy CSS 2 ary CSS 3. Azo atao ihany koa ny manitsy azy hanampiana rohy hafa na hanova ny lahatsoratra ao aminy.
Fanohanana Firefox
Ity menio fisakafoana ity dia hiasa amin'ny mpizara lehibe rehetra . Ny mpikaroka amin'ny aterineto dia tsy hampiseho ireo kibon'ny boribory, fa raha tsy izany, dia hampiseho rohy tahaka an'i Firefox, Safari, Opera ary Chrome.
02 of 06
Soraty ny lisitra misy anao
Ny menus sy ny tabilao fanina dia tena lisitra tsy voamarina. Noho izany ny zavatra voalohany tianao hatao dia manorata lisitra tsy voamarina amin'ny rohy mankany amin'ny toerana tianao hizarànao ny fidirana fidirana anao.
Ity lesona ity dia mihevitra fa manoratra ny HTML anao amin'ny endri-tsoratra iray ianao ary fantatrao ny toerana hametrahana ny HTML ho an'ny menio ao amin'ny pejin'ny tranonkala.
Soraty ny lisitra tsy voamarina toy izao:
- class = "tablist">
- CSS 3
- id = "ankehitriny"> Tabs
- Fa
- Menus
Ho hitanao fa miantso zavatra roa ny code: class = "tabliste" ary id = "ankehitriny". Ny voalohany dia takiana . Raha tsy mametraka ny kilasin'ny lisitry ny lisitry ny lisitra tsy voamarina ianao dia tsy hiasa ireo tabilao. Ny faharoa dia tsy azo atao. Apetraho ny id = "ankehitriny" na aiza na aiza toerana tianao hasongadina amin'io pejy io. Ampiasako matetika izany mba hanasongadinana ny pejy misy ahy, saingy azonao ampiasaina izany mba hanasongadinana ny tabilao manan-danja indrindra. Na azonao esorina tanteraka izany.
03 of 06
Atombohy ny fanovana ny endri-tsoratra
Azonao atao ny mampiasa ny takelaka ivelany ivelany na ny takelaka anatiny . Ny pejin-tsiditry ny menus dia manasongadina ny endri-tsoratra ao amin'ny loha-peo eo amin'ny lohanao.
Voalohany dia hanamboatra ny UL ho azy manokana isika
Io no ampiasainay ny lisitry ny kilasy. Ao amin'ny HTML. Raha tokony manamboatra ny endriky ny UL, izay mety hanova ny lisitry ny lisitra rehetra tsy voamarina ao amin'ny pejinao, dia tokony hampiasa ny kilasy UL ianao. Ny lisitra fidirana ao amin'ny CSS dia tokony ho:
.tablist {}Tiako ny hametraka eo amin'ny endriny marefo (}) mialoha ny fotoana, noho izany dia tsy manadino azy aho aty aoriana.
Raha mampiasa lisitry ny lisitry ny lisitry ny tabilao izahay, nefa tsy tianay ny milalao anaty baolina na tarehimarika midika izany. Koa ny fomba voalohany tokony hanampy anao dia. lisitra fomba: tsy nisy; Ity dia miteny amin'ny navigateur fa raha lisitra izany, dia lisitra tsy misy filamatra mialoha (toy ny bala na tarehimarika).
Azonao atao àry ny mametraka ny haavon'ny lisitrao mba hifanaraka amin'ilay toerana tianao hofenoina. Nifidy ny 2em aho noho ny haavoko, satria io dia avo roa heny ny haben'ny endri-tsoratra, ary manome ny antsasak'adiny etsy ambony sy eo ambanin'ny lahatsoratry ny tablette. hahavony: 2em; Azonao atao anefa ny mametraka ny sakany amin'ny habeny. Ny marika UL dia manakaiky ny 100% amin'ny sakany, noho izany raha tsy tianao ny ho kely noho ny container amin'izao fotoana izao dia azonao atao ny mamela ny sakany.
Farany, raha tsy manana solonanarana ho an'ny UL sy OL tags ny tanjon'ny metatrao, dia te-hametraka azy ireo ianao. Midika izany fa tokony hanakatona ny sisintany, sisin-dàlana, ary fametahana ny UL ianao. padding: 0; sisiny: 0; sisintany: tsy misy; Raha efa namerina ny marika UL ianao, dia azonao atao ny manova ny sisin-dàlana, ny fonosana, na ny sisin-tany amin'ny zavatra iray izay mifanaraka amin'ny endrikao.
Ny kilasy farany amin'ny tablist anao dia tokony ho toy izao:
.tablist {list style: none; hahavony: 2em; padding: 0; sisiny: 0; sisintany: tsy misy; }04 of 06
Fanitsiana ny lisitry ny lisitry LI
Raha vao manamboatra lisitra tsy misy fepetra ianao, dia mila manamboatra andalana ao anaty LI. Raha tsy izany, dia hanao toy ny lisitra fanoritsoritana izy ireo ary hifindra any amin'ny andalana manaraka raha tsy mametraka marina ny tabletteo.
Voalohany, apetraho ny fanànanao style:
.tablist li {}Avy eo dia te-hitsangatsangana ny tabilao ianao mba hahafahan'izy ireo miditra ao amin'ny planeta horita. hitsingevana: ankavia;
Ary aza adino ny manampy ampahany kely eo amin'ny tabilao, ka tsy miara-mivondrona izy ireo. sisiny ankavanana: 0.13em;
Ny fomba amam-pianakaviana dia tokony hitovy amin'izany:
.tablist li {float: left; sisiny ankavanana: 0.13em; }05 of 06
Ny fanaovana ny Tabs Toy ny Tabs miaraka amin'ny CSS 3
Mba hanaovana ny ankamaroan'ny fanaingoana mavesatra ao anatin'ity taratasy ity, dia mikendry ny rohy ao anatin'ny lisitra tsy voamarina aho. Ny navigateur dia manaiky fa ny rohy dia manao bebe kokoa amin'ny pejy Internet raha oharina amin'ny tags hafa, noho izany dia mora kokoa ny mahazo browser-nao taloha raha manaraka ny zavatra toy ny status hoavy raha ampidirinao amin'ny marika (rohy). Noho izany dia manorata aloha ny toetra amam-pikanao:
.tablist li a {} .tablist li a: hover {}Satria ireo tabilao ireo dia tokony hanao zavatra toy ny raki-daza ao amin'ny fampiharana iray, dia tadiavinao ny sehatra rehetra amin'ny tablety mba hikirakirana, fa tsy ny lahatsoratra mifandraika fotsiny. Mba hanaovana izany, dia mila manova ny marika A avy amin'ny fanjakana " inline " ara-dalàna ao anaty singa iray . Display: andian-tsoratra; (Raha tianao ny hahalala bebe kokoa momba ilay fahasamihafana, vakio ny Block-Level vs. Inline Elements .)
Avy eo, fomba tsotra hanerena ny tabilao ho mifangaro amin'ny andaniny, fa mbola mamolavola ny sombin-tsoratry ny lahatsoratra dia ny manao ny kavina havanana sy havia mitovy. Nampiasa ny tranom-patana ahodin-tanana aho hametrahana ny ambony sy ny ambany ho 0 ary ny ankavanana sy ny ankavia hatramin'ny 1em. padding: 0 1em;
Nisafako ihany koa ny hanaisotra ny rohy ambany, mba tsy hijerena rohy ireo rohy. Saingy raha toa ka misaritaka amin'izany ny mpihaino anao, avelao ity tsipika ity. rohy-ravaka: tsy nisy;
Amin'ny fametrahana sisin-tany manify manodidina ny tabilao, dia mahatonga azy ireo ho toy ny tabilao. Nampiasa ny trano fananganana sisin-tany aho mba hametrahana ny sisin-tany manodidina ny sisin-tany efatra: 0.06m solid # 000; Ary avy eo dia nampiasa ny fananana sisin- tany mba hanesorana azy amin'ny farany ambany. fari-ambany: 0;
Avy eo dia nanao fanitsiana kely aho teo amin'ny loko, loko, ary loko misy ny loko. Ampiasao amin'ireo endrika izay mifanaraka amin'ny tranonkalanao. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; fototra-color: #ccc;
Ireo endri-dàlana etsy ambony rehetra ireo dia tokony hiditra ao amin'ny selector .tablist li a, ny fitsipika mba hisy fiantraikany eo amin'ny famaritana ankapobeny amin'ny ankapobeny. Avy eo mba hahatonga ny tablety misimisy kokoa azo tsindriana, tokony hampiana fitsipika momba ny fanjakana vitsivitsy .tablist li a: hover.
Tiako ny manova ny lokon'ny lahatsary sy ny fiaviana mba hahatonga ny tab-pikam-peo rehefa manitsy azy io ianao. andamosina: # 3cf; color: #fff;
Ary nampiditra fampahatsiahivana iray hafa ho an'ireo browsers aho fa iriko ny tsy hanohizan'ny rohy. text-ravaka: tsy nisy; Fomba hafa mahazatra koa ny manindry ny filaminana rehefa mivezivezy eo amin'ny tabilao ianao. Raha te hanao izany ianao, dia ampifanarao amin'ny lahatsoratra-famolavolana: manazava;
Fa aiza ny CSS 3?
Raha nihaino tsara ianao dia mety ho efa voamarikao fa tsy nisy CSS 3 ireo fomba nampiasaina tao amin'ny taratasy firaketana. Manana tombony ny miasa amin'ny navigateur maoderina, anisan'izany Internet Explorer. Saingy tsy mahatonga ny tablette ho toy ny zavatra hafa toy ny boaty kely. Amin'ny fampidirana CSS 3 fomba fiantsoana sisim-paty (ary antso mifandraika amin'ny sehatry ny navigateur) dia azonao atao ny manamboatra ny sisiny, mba hijery kokoa ny tabilao ao amin'ny ordinatera manila.
Ny fomba tokony ampidirinao amin'ny .tablist li dia fitsipika: -webkit-border-top-radius ankavanana: 0.50em; -webkit-sisin-tampon-ankavia-nipoaka: 0.50em; -moz-sisin-nipoaka-topright: 0.50em; -moz-sisin-nipoaka-topleft: 0.50em; fari-tampon-tsara-nipoaka: 0.50em; fari-tampon-ankavia-nipoaka: 0.50em;
Izao no fitsipika farany nosoratako:
.tablist li a {aseho: block; padding: 0 1em; text-ravaka: tsy nisy; border: 0.06m solid # 000; fari-ambany: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; fototra-color: #ccc; / * CSS 3 elements * / webkit-border-top-right-radius: 0.50em; -webkit-sisin-tampon-ankavia-nipoaka: 0.50em; -moz-sisin-nipoaka-topright: 0.50em; -moz-sisin-nipoaka-topleft: 0.50em; fari-tampon-tsara-nipoaka: 0.50em; fari-tampon-ankavia-nipoaka: 0.50em; } .tablist li a: hover {background: # 3cf; color: #fff; text-ravaka: tsy nisy; }Miaraka amin'ireny endri-tsoratra ireny, dia manana menom-piraketana mifandraika amin'ny mpizara lehibe rehetra ianao ary toa misy tabilao tsara tarehy ao anaty navigateur CSS 3 mifanaraka. Ny pejy manaraka dia manome safidy iray hafa azonao ampiasaina mba hanamboarana azy bebe kokoa.
06 of 06
Asongadino ny Tabila ankehitriny
Ao amin'ny HTML namboariko, ny UL dia manana singa iray misy lisitra miaraka amin'ny ID. Izany dia ahafahanao manome LI iray hafa endrika hafa avy amin'ny ambiny. Ny toe-javatra mahazatra indrindra dia ny manao ny tabilao misy amin'izao fotoana izao. Ny fomba iray hafa hieritreretana izany dia ny manasongadina ny tabilao izay tsy miaina. Dia miova ny toerana misy ny id ao amin'ny pejy samihafa.
Manolo na ny tag #current A sy ny #current A: hover sta ka samy hafa kely. Azonao atao ny manova ny loko, ny loko afara, na ny haavony, ny sakany sy ny felana an'io singa io. Ataovy izay mety ho fiovan'ny toetranao.
.tablist li # ankehitriny {background-color: # 777; loko: #fff; } .tablist li # ankehitriny a: hover {background: # 39C; }Ary vita izany! Vao namorona menonkalan'ny tablette ho an'ny tranonkalanao ianao.