01 nke 06
Esi mepụta Mbido Igodo na CSS na Enweghị Images
Ijegharị na ibe weebụ bụ ụdị ndepụta, ma tabata igodo dị ka ndepụta ndepụta. Ọ dị mfe ịmepụta CSS ka ọ bụrụ na ị nwere ike ịmepụta ya, ma CSS 3 na- enye anyị ụfọdụ ngwaọrụ iji mee ka ha yie nicer.
Nke a nkuzi ga-ewe gị site na HTML na CSS mkpa iji mepụta menu CSS. Pịa na njikọ ahụ iji hụ otú ọ ga-esi lee ya anya.
Nke a na- ejighị ihe oyiyi , dị HTML na CSS 2 na CSS 3. Ọ nwere ike idozi ya ngwa ngwa ịgbakwunye taabụ ma ọ bụ gbanwee ederede n'ime ha.
Nkwado Nchọgharị
Nke a tab menu ga-arụ ọrụ niile isi nchọgharị . Onye nyochaa Intaneti agaghị egosiputa akụkụ nkuku, ma ọ bụghị, ọ ga-egosi taabụ dịka Firefox, Safari, Opera, na Chrome.
02 nke 06
Dee Ndepụta Nchọta gị
Niile menu na taabụ bụ n'ezie nhazi ndepụta. Ya mere, ihe mbụ ịchọrọ ime bụ dee ndepụta ndepụta nke njikọ gị na ebe ịchọrọ ị ga-aga.
Ihe nkuzi a na-eche na ị na-ede HTML gị na nchịkọta ederede na ị maara ebe ị ga-etinye HTML maka menu gị na ibe weebụ gị.
Dee ederede gi dika ndi a:
- klas = "tablist">
- CSS 3
- id = "ugbu a"> Akaab
- Maka
- Menus
Ị ga-achọpụta na koodu ahụ kpọrọ ihe abụọ: klas = "tablist" na id = "ugbu a". A chọrọ nke mbụ. Ọ bụrụ na i tinyeghị klas tablist na ndepụta gị, otu taabụ agaghị arụ ọrụ. Nke abụọ bụ nhọrọ. Tinye id = "ugbu a" na ebe ọ bụla ị ga - achọ ka a pụta ìhè na ibe ahụ. M na-ejikarị nke a mee ka a mata ebe m na-aga, ma ị nwere ike iji ya mee ka ọ pụta ìhè ihe kacha mkpa taabụ. Ma ọ bụ i nwere ike wepu ya kpamkpam.
03 nke 06
Malite na-edezi Mpempe akwụkwọ Style gị
Ị nwere ike iji ma ọ bụ mpempe akwụkwọ mpempe akwụkwọ ma ọ bụ akwụkwọ mpempe akwụkwọ . Ibe akwukwo ihe ntanetiri jiri akwukwo akwukwo n'ime
Nke mbụ Anyị ga-emepụta onwe gị
Nke a bụ ebe anyị na-eji klas tablist .in HTML. Kama ịmepụta UL tag, nke ga-edozi ndepụta niile ekwesighi na peeji nke gị, ị kwesịrị ị na-eji nanị UL klas. tablist N'ihi ya, ntinye mbụ nke CSS gị kwesịrị ịbụ:
.tablist {}Ọ na-amasị m itinye ihe nkwado mgbochi (}) tupu oge eruo, n'ihi ya, echefughị m ya.
Mgbe anyị na-eji akara ndepụta ahaghị maka ndepụta ndepụta menu, mana anyị achọghị ka bọtịnụ ọ bụla ma ọ bụ nọmba na-agagharị. Ya mere ụzọ mbụ ị kwesịrị ịgbakwunye bụ. ndepụta ndepụta: ọ dịghị; Nke a na-agwa nchọgharị na ebe ọ bụ ndepụta, ọ bụ ndepụta na-enweghị ụzọ eburu ụzọ kpebie (dị ka bọọdụ ma ọ bụ nọmba).
Mgbe ahụ, ị nwere ike ịtọ ntọala nke listi gị iji kwekọọ ohere ịchọrọ ka ọ jupụta. Achọpụtara m 2em maka ịdị elu m, n'ihi na nke ahụ bụ okpukpu abụọ nke ọkọlọtọ ọkọlọtọ, ma na-enye ihe dịka ọkara nke em n'elu na n'okpuru ederede nke taabụ ahụ. elu: 2m; Ma, ị nwere ike ịtọ obosara gị na ụdị ọ bụla ị ga-achọ. Ul na UL ga-ewepu 100% nke obosara, ya mere ọ gwụla ma ịchọrọ ka ọ dị obere karịa akpa ahụ, ị nwere ike ịhapụ obosara.
N'ikpeazụ, ọ bụrụ na akwụkwọ mpempe akwụkwọ gị enweghị ihe ndozi maka UL na OL, ị ga-achọ itinye ha. Nke a pụtara na ị ga-agbanyụọ ala, n'akụkụ aka ya, na mgbochi na UL gị. Na-akwagharị: 0; oke: 0; ókè-ala: ọ dighi; Ọ bụrụ na i debelarị UL tag ahụ, ị nwere ike ịgbanwe mpaghara amaala, mgbochi, ma ọ bụ ókèala na ihe dabara na imewe gị.
Klas ikpeazụ gị na-arụ ọrụ dị ka nke a:
.tablist {ndepụta-ụdị: ọ dịghị; elu: 2m; Na-akwagharị: 0; oke: 0; ókè-ala: ọ dighi; }04 nke 06
Na-edezi ihe ndepụta LI
Ozugbo i mepụtara ndepụta aha gị, ọ ga-adị gị mkpa ịmepụta ihe ndị dị na LI. Ma ọ bụghị ya, ha ga-eme ihe dịka ndepụta ndepụta na onye ọ bụla ga-aga na-esote na-enweghị ịtụkwasị taabụ gị n'ụzọ ziri ezi.
Akpa, setịpụ ihe onwunwe gị:
.tablist {}Mgbe ahụ, ịchọrọ ịfụkọta taabụ gị ka ha wee dịrị na ụgbọ elu. ise n'elu: aka ekpe;
Echefukwala ịgbakwunye akụkụ dị n'etiti taabụ ahụ, ya mere, ha ejikọta ọnụ. oke-nri: 0.13em;
Ụdị ụdị gị kwesịrị ịdị ka nke a:
.tablist na {float: left; oke-nri: 0.13em; }05 nke 06
Ime kaabụ dị ka taabụ na CSS 3
Iji mee ọtụtụ ihe dị elu na mpempe akwụkwọ a, ana m atụkwasị njikọ dị n'ime ndepụta ajuju. Nchọgharị na-achọpụta na njikọ na-emekwu na ibe weebụ karịa mkpado ndị ọzọ, ya mere, ọ dị mfe ịnweta ihe nchọgharị ochie iji rube isi na ihe dịka ọnọdụ nchịkọta ma ọ bụrụ na itinye ha na mkpado arịlịka (njikọta). Ya mere buru ụzọ dee ụdị njirimara gị:
.bwb na {} .tablist bụ: hover {}N'ihi na ndị a taabụ kwesịrị ime dị ka taabụ na ngwa, ịchọrọ ka a kpoo mpaghara dum nke taabụ ahụ, ọ bụghị naanị ederede njikọ. Iji mee nke a, ị ghaghị ịmegharị A mkpado site na ya dị ka " online " nkịtị. igosi: ngọngọ; (Ọ bụrụ na ị nwere mmasị ịmatakwu banyere ọdịiche ahụ, gụọ Block-Level vs. Enline Elements .)
Mgbe ahụ, ụzọ dị mfe ịmanye mkpịsị gị ka ha na ibe gị dị n'otu, ma ka na-asụgharị iji daa obosara nke ederede bụ ime ka mpempe aka nri na aka ekpe dị otu. M na-eji ihe mgbochi na-eme ihe iji mee ka elu na ala ruo 0 na aka nri na aka ekpe ka 1em. Na-akwagharị: 0 1m;
Achọrọ m iwepụ njikọ ahụ, nke mere ka taabụ ahụ dị ka njikọ. Ma ọ bụrụ na ndị na-ege gị ntị nwere ike mgbagwoju anya site na nke ahụ, wepụ usoro a. njikọ-mma: ọ dịghị;
Site n'itinye ókè gburugburu ya na gburugburu taabụ, ọ na-eme ka ha dị ka taabụ. Ejiri m ihe onwunwe mgbochi ókè iji tinye ókè ya gburugburu n'akụkụ anọ nke anọ: 0.06em siri ike # 000; Wee jiri mpaghara ala ala-ala wepu ya site na ala. ala ala: 0;
Mgbe ahụ, m mere ụfọdụ mgbanwe na font, agba, na agba gburugburu nke taabụ. Debe ha n'ụdị ndị na-adaba na saịtị gị. egosi: obi ike 0.88em / 2em arial, geneva, helvetica, sans-serif; agba: # 000; ndabere-agba: #ccc;
Ụdị ụdị niile a ga - aga na onye nhoputa .tablist a, iwu ahụ ka ha wee metụta mkpado arịlịka n'ozuzu. Mgbe ahụ iji mee ka taabụ ahụ gosipụtara karịa, ị ga - agbakwunye iwu ole na ole nke ọchịchị .tablist a: hover.
Ọ na-amasị m ịgbanwe agba nke ederede na ndabere iji mee ka bọtịnụ taabụ mgbe ị na-akwagharị ya. ndabere: # 3cf; agba: #fff;
Enwekwara m ihe ncheta ọzọ na ndị nchọgharị na achọrọ m ka njikọ ahụ ghara ịkọwa. ederede-mma: ọ dịghị; Ụzọ ọzọ a na-ejikarị eme bụ ịgbanyeghachi ihe ngosi azụ mgbe ị na-akwagharị na tab. Ọ bụrụ na ịchọrọ ime nke ahụ, gbanwee ya ka ọ bụrụ ihe ederede: ihe ngosi;
Ma ebee ka CSS 3 dị?
Ọ bụrụ na ị na-aṅa ntị, eleghị anya ị chọpụtala na e nwebeghị CSS 3 ụdị eji eji ede akwụkwọ. Nke a nwere uru nke ịrụ ọrụ na ihe nchọgharị ọ bụla, gụnyere Internet Explorer. Ma, ọ naghị eme ka taabụ dị ka ihe ọ bụla karịrị igbe igbe. Site n'ịgbakwunye mgbidi-azu nke oku CSS 3 (ma jikọtara ya na ntinye nyocha nke ihe nchọgharị) ị nwere ike ime ka ọnụ ya gburugburu, ka ị dị ka taabụ na folda manila.
Ụdị ndị ị ga-agbakwunye na .tablist bụ iwu bụ: -apụrịrị-na-elu-nri-radius: 0.50em; -agbasa-mgbago-elu-elu-aka ekpe: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radius oke-aka-nri: 0.50em; ụda elu-elu-aka ekpe: 0.50em;
Ndị a bụ usoro iwu ikpeazụ m dere:
.tablist bụ {ngosi: ngọngọ; Na-akwagharị: 0 1m; ederede-mma: ọ dịghị; ókèala: 0.06em siri ike # 000; ala ala: 0; egosi: obi ike 0.88em / 2em arial, geneva, helvetica, sans-serif; agba: # 000; ndabere-agba: #ccc; / * CSS 3 ihe dị iche iche / webkit-border-top-right-radius: 0.50em; -agbasa-mgbago-elu-elu-aka ekpe: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radius oke-aka-nri: 0.50em; ụda elu-elu-aka ekpe: 0.50em; } .bublist a: hover {ndabere: # 3cf; agba: #fff; ederede-mma: ọ dịghị; }Na ụdị ndị a, ị nwere tabbed menu na-arụ ọrụ niile isi nchọgharị na anya ka mma ebijiri taabụ na CSS 3 na-akwado ndị nchọgharị. Akwụkwọ na-esonụ na-enye gị otu nhọrọ ọzọ ị nwere ike iji na-akwa ya ọbụna karịa.
06 nke 06
Mepee Tab ugbu a
Na HTML m kere, UL nwere otu ndepụta ndepụta na ID. Nke a na-enye gị ohere ịnye otu LI dị iche iche site na ndị ọzọ. Ọnọdụ kachasịsịsịsị bụ iji mee ka usoro nke ugbu a pụta n'ụzọ ụfọdụ. Ụzọ ọzọ ị ga-esi cheta nke a bụ na ịchọrọ isi awọ na-apụta na taabụ ndị na-adịghị ndụ. Ị wee gbanwee ebe id dị na ibe dị iche iche.
M na-eji ma tag tag #current A yana nke #current A: hover sta nke na ha abụọ dịtụ iche. Ị nwere ike ịgbanwe agba, agba ocha, ọbụna n'ogo, obosara na padding nke ihe ahụ. Mee mgbanwe ọ bụla dị n'echiche gị.
.tablist na # ugbu a a {ndabere-agba: # 777; agba: #fff; = .tablist li # ugbu a a: hover {ndabere: # 39C; }I meela! Ị ka mepụtara menu aha maka ebe nrụọrụ weebụ gị.