01 ya 06
Jinsi ya Kujenga Navigation Tabbed na CSS na Hakuna Picha
Navigation kwenye kurasa za wavuti ni aina ya orodha, na urambazaji wa tabbed ni kama orodha ya usawa. Ni rahisi kuunda urambazaji usio na usawa na CSS, lakini CSS 3 inatupa vifaa vingine chache ili kuwafanya waweze kuangalia vizuri.
Mafunzo haya yatakupeleka kupitia HTML na CSS zinahitajika kuunda orodha ya tabaka la CSS. Bofya kwenye kiungo hiki ili uone jinsi itaonekana.
Menyu hii ya tabbed haitumii picha , HTML tu na CSS 2 na CSS 3. Inaweza kubadilishwa kwa urahisi ili kuongeza tabo zaidi au kubadilisha maandishi ndani yao.
Msaada wa Vivinjari
Menyu hii ya tab itafanya kazi katika vivinjari vyote vikubwa . Mtafiti wa wavuti hawezi kuonyesha pembe zilizozunguka, lakini vinginevyo, itaonyesha tabo kama vile Firefox, Safari, Opera, na Chrome.
02 ya 06
Andika Orodha yako ya Menyu
Menyu zote za urambazaji na tabo ni kweli tu orodha isiyo na usawa. Kwa hiyo jambo la kwanza unayotaka kufanya ni kuandika orodha isiyojidhibiti ya viungo ambako unataka usafiri wako wa tabbed kwenda.
Mafunzo haya yanashikilia kuwa unaandika HTML yako katika mhariri wa maandishi na kwamba unajua wapi kuweka HTML kwa orodha yako kwenye ukurasa wako wa wavuti.
Andika orodha yako isiyosaidiwa kama hii:
- darasa = "orodha ya orodha">
- CSS 3
- id = "sasa"> Tabs
- Kwa
- Menus
Utaona kwamba msimbo unaita vitu viwili: darasa = "orodha ya" na id = "sasa". Ya kwanza inahitajika . Ikiwa hutaweka darasa la orodha ya orodha kwenye orodha yako isiyosaidiwa, tabo hazitatumika. Ya pili ni hiari. Weka id = "sasa" kwenye tab yoyote ambayo ungependa kuonyeshwa kwenye ukurasa huo. Mara nyingi hutumia hii ili kuonyesha ukurasa ambao mimi niko, lakini unaweza kutumia ili kuonyesha tab muhimu zaidi. Au unaweza kuiondoa kabisa.
03 ya 06
Anza Kuhariri Karatasi Yako ya Sinema
Unaweza kutumia ama karatasi ya mtindo wa nje au karatasi ya mtindo wa ndani . Ukurasa wa menyu ya menyu hutumia karatasi ya ndani ya kichwa kwenye
Kwanza tutafanya style UL mwenyewe
Hii ndio ambapo tunatumia orodha ya tabaka .in HTML. Badala ya kuchapisha alama ya UL, ambayo inaweza kutengeneza orodha zote zisizo na usawa kwenye ukurasa wako, unapaswa mtindo tu darasa la UL. Orodha ya tabaka Hivyo kuingia kwa kwanza kwenye CSS yako lazima iwe:
.tablist {}Napenda kuweka katika brace mwisho (}) kabla ya muda, hivyo siisahau baadaye.
Wakati tunatumia orodha ya orodha isiyo na usawa kwa orodha ya menyu ya tab, lakini hatutaki risasi au namba yoyote inayoingia. Kwa hiyo mtindo wa kwanza unapaswa kuongeza ni. orodha ya orodha: hakuna; Hii inauambia kivinjari kwamba wakati ni orodha, ni orodha isiyo na mitindo iliyopangwa (kama risasi au namba).
Kisha, unaweza kuweka urefu wa orodha yako ili kufanana na nafasi unayotaka kuijaza. Nilichagua 2m kwa urefu wangu, kwa kuwa ni mara mbili ukubwa wa kawaida wa font, na hutoa karibu nusu ya em juu na chini ya maandiko ya tab. urefu: 2m; Lakini unaweza kuweka upana wako kwa ukubwa wowote ungependa. Vitambulisho vya UL vitachukua moja kwa moja upana wa 100%, hivyo isipokuwa unataka kuwa ndogo kuliko chombo cha sasa, unaweza kuondoka upana.
Hatimaye, ikiwa karatasi yako ya mtindo haifai kabla ya vitambulisho vya UL na OL, utahitaji kuziweka. Hii ina maana kwamba unapaswa kuzima mipaka, margin, na padding kwenye UL yako. padding: 0; margin: 0; mpaka: hakuna; Ikiwa tayari umefanya upya kitambulisho cha UL, unaweza kubadilisha margin, padding, au mpaka kwa kitu kinachofaa kulingana na muundo wako.
Darasa lako la mwisho la wastahili linapaswa kuangalia kama hili:
.tablist {orodha ya orodha: hakuna; urefu: 2m; padding: 0; margin: 0; mpaka: hakuna; }04 ya 06
Kuhariri Vipengee vya Orodha ya LI
Mara baada ya kupiga marufuku orodha yako isiyosaidiwa, unahitaji mtindo wa vitambulisho vya LI ndani yake. Vinginevyo, watatenda kama orodha ya kawaida na kila hoja kuelekea mstari unaofuata bila kuweka vifungo vyenye kwa usahihi.
Kwanza, weka mali yako ya mtindo:
.abablist li {}Kisha unataka kuelea tabo zako ili waweze kupandisha ndege isiyo usawa. kuelea: kushoto;
Na usahau kuongeza margin kati ya tabo, hivyo hawana kuunganisha pamoja. kulia upande wa kulia: 0.13m;
Mitindo yako ya li inapaswa kuangalia kama hii:
.abablist li {kuelea: kushoto; kulia upande wa kulia: 0.13m; }05 ya 06
Kufanya Tabs Angalia kama Tabs na CSS 3
Ili kufanya mengi ya kuinua nzito katika karatasi hii ya mtindo, ninazingatia viungo ndani ya orodha isiyojidhiliwa. Watazamaji wanatambua kuwa viungo vinavyofanya zaidi kwenye ukurasa wa wavuti kuliko vitambulisho vingine, hivyo ni rahisi kupata wavuti wa zamani ili kuzingatia vitu kama majimbo ya hover ikiwa unawaunganisha kwenye lebo ya nanga (viungo). Kwa hiyo kwanza funga mali zako za mtindo:
.abablist li {} .abablist li: hover {}Kwa sababu tabo hizi zinapaswa kutenda kama tabo katika programu, unataka eneo lote la tab kuwa clickable, si tu maandishi yaliyohusishwa. Ili kufanya hivyo, unapaswa kubadilisha kitambulisho cha A kutoka kwa hali ya kawaida ya " inline " kwenye kipengele cha kuzuia . kuonyesha: kuzuia; (Ikiwa una nia ya kujua zaidi kuhusu tofauti, soma Kiwango cha Kuzuia na Vipengele vya Inline .)
Kisha, njia rahisi ya kulazimisha tabo zako kuwa zilinganiana, lakini bado zinafaa kupatana na upana wa maandishi ni kufanya padding sahihi na kushoto sawa. Nilitumia mali ya kifupi ya kuweka pande zote ili kuweka juu na chini hadi 0 na haki na kushoto hadi saa 1. padding: 0 masaa 1;
Mimi pia nimechagua kuondoa kiungo kinachoelezea, ili tabo zioneke chini kama viungo. Lakini ikiwa wasikilizaji wako wanaweza kuchanganyikiwa na hilo, fungua mstari huu. kiungo-mapambo: hakuna;
Kwa kuweka mpaka mwembamba kuzunguka tabo, huwafanya waweke kama tabo. Nilikuwa na mali ya muda mfupi ili kuweka mpaka kuzunguka mpaka wote wa pande nne: 0.06m imara # 000; Na kisha kutumika mali mpaka-chini ya kuondoa kutoka chini. mpaka-mpaka: 0;
Kisha nikafanya marekebisho kwenye rangi, rangi, na rangi ya asili ya tabo. Weka hizi kwenye mitindo inayofanana na tovuti yako. font: ujasiri 0.88em / 2m ya asili, geneva, helvetica, sans-serif; rangi: # 000; rangi ya background: #ccc;
Mitindo yote hapo juu inapaswa kwenda kwa mtejaji wa orodha, utawala ili waweze kuathiri vitambulisho vya nanga. Kisha kufanya tabo kuonekana zaidi clickable, unapaswa kuongeza utawala wa hali chache .tablist ni: hover.
Ninapenda kubadili rangi ya maandishi na background ili kufanya pop pop wakati wewe mouse juu yake. background: # 3cf; rangi: #fff;
Nami nikaongeza mawaidha mengine kwa vivinjari ambavyo mimi nataka kiungo kiweke kisichowekwa chini. maandishi-mapambo: hakuna; Njia nyingine ya kawaida ni kurejea nyuma juu ya panya wakati wa panya juu ya tab. Ikiwa unataka kufanya hivyo, ubadilishe kwa mapambo ya maandishi: fungulia;
Lakini wapi CSS 3?
Ikiwa umekuwa makini, labda umeona kwamba hakuwa na mitindo yoyote ya CSS 3 iliyotumiwa katika karatasi ya mtindo. Hii ina faida ya kufanya kazi katika kivinjari chochote kisasa, ikiwa ni pamoja na Internet Explorer. Lakini haifanyi tabo kama inaonekana zaidi ya masanduku ya mraba. Kwa kuongeza CSS 3 ya simu ya wito mpaka-radius (na ni zinazohusishwa na wito maalum wa kivinjari) unaweza kufanya mviringo ukizunguka, ili kuangalia zaidi kama tabo kwenye faili ya manila.
Mitindo unayohitaji kuongeza kwenye utawala wa .abablist ni: -baraka-mpaka-juu-kulia-radius: 0.50m; -baki-mpaka-juu-kushoto-radius: 0.50m; -a-mpaka-radius-kulipwa: 0.50m; -maz-mpaka-radius-topleft: 0.50m; mpaka-juu-kulia-radius: 0.50m; mpaka-juu-kushoto-radius: 0.50m;
Hizi ni kanuni za mtindo wa mwisho nilizoandika:
.abablist li {kuonyesha: kuzuia; padding: 0 masaa 1; maandishi-mapambo: hakuna; mpaka: 0.06m imara # 000; mpaka-mpaka: 0; font: ujasiri 0.88em / 2m ya asili, geneva, helvetica, sans-serif; rangi: # 000; rangi ya background: #ccc; / * CSS vipengele 3 * / mtandao wa wavuti-juu-kulia-radius: 0.50m; -baki-mpaka-juu-kushoto-radius: 0.50m; -a-mpaka-radius-kulipwa: 0.50m; -maz-mpaka-radius-topleft: 0.50m; mpaka-juu-kulia-radius: 0.50m; mpaka-juu-kushoto-radius: 0.50m; } .abablist li: hover {background: # 3cf; rangi: #fff; maandishi-mapambo: hakuna; }Kwa mitindo hii, una orodha ya tabbed ambayo inafanya kazi katika vivinjari vyote vikubwa na inaonekana kama vichupo vyema vya kuchapishwa kwenye vivinjari vinavyolingana na CSS 3. Ukurasa unaofuata unakupa fursa moja zaidi ambayo unaweza kutumia ili kuifunga zaidi.
06 ya 06
Tazama Tab ya sasa
Katika HTML niliyoundwa, UL alikuwa na kipengele cha orodha moja na ID. Hii inakuwezesha kutoa LI moja style tofauti kutoka kwa wengine. Hali ya kawaida ni kufanya tab ya sasa kusimama kwa namna fulani. Njia nyingine ya kufikiria hii ni kwamba unataka kijivu nje ya tabo ambazo haziishi. Wewe kisha ubadili ambapo id iko kwenye kurasa tofauti.
Ninaandika lebo ya #current A pamoja na #current A: hover sta ili wote wawili tofauti. Unaweza kubadilisha rangi, rangi ya asili, hata urefu, upana na padding ya kipengele hicho. Fanya mabadiliko yoyote yanayofaa katika kubuni yako.
.abablist li # sasa {background-rangi: # 777; rangi: #fff; } .abablist li # sasa: hover {background: # 39C; }Na umefanya! Umeunda tu orodha ya tabbed ya tovuti yako.