01 o 06
Pehea e hana ai i ka hoʻoholo papaʻana me CSS aʻaʻole kiʻi
ʻO ka hoʻokeleʻana ma nāʻaoʻao pūnaewele heʻano o ka papa inoa, aʻo ka hoʻokaeʻia o ka hoʻohālike e like me ka papa inoa papa. Hiki ke maʻalahi i ka hoʻokumuʻana i ke kālai'āina i kālaiʻia me CSS, akā hāʻawiʻia ka CSS 3 i mau mea hou e pono ai lākou e nānā i nā nicer.
Na kēia kumu aʻo e lawe iāʻoe ma o ka HTML a me CSS e pono ai e hoʻokumu i kahi papa inoa CSS. Kaomi ma kēlā loulou eʻike i keʻano e nānā ai.
ʻAʻole hoʻohana kēia menu i nā kiʻi , pono wale nōʻo HTML a me CSS 2 a me CSS 3. Hoʻoponoponoʻia paha e hoʻonui i kahi mauʻaoʻao a iʻole e hoʻololi i nā kikokikona ma ia mau mea.
Kōkua Palekana
E hana kēia papa inoa menu ma nā pūnaewele nui . ʻAʻole e hōʻike ka meaʻike i ka pūnaewele i nā kihi i kāʻeiʻia, akā iʻole, e hōʻikeʻia nā pūhaka e like me Firefox, Safari, Opera, a me Chrome.
02 o 06
E kākau i kāu papa inoa
ʻO nā menus a me nā kaomi wale nō he papa inoaʻole. No laila,ʻo ka mea mua āu makemake e hana ai, e kākau i kahi papa inoaʻole o nā loulou i kahi āu e makemake ai i ka hoʻokaeʻia o ka heleʻana.
Ke manaʻo nei kēia kumu e kākau anaʻoe i kāu HTML i loko o ka hoʻoponopono kikokikona a uaʻikeʻoe i kahi e waiho ai i ka HTML no kāu menu ma kāu pūnaewele pūnaewele.
Kākau i kāu papa inoaʻole i like me kēia:
- papa = "papa"
- CSS 3
- id = "kēia manawa"> Nā pihi
- No
- Nā menus
Eʻikeʻoe i ke kāheaʻana o ke code i nā meaʻelua: class = "tablist" a id id "" i kēia manawa ". Pono ka mea mua. Ināʻaʻoleʻoe e hoʻokomo i ka papa papa inoa ma kāu papa inoaʻole,ʻaʻole e paʻa nā pūhaka. ʻO ka lua he koho. E kau i ka id = "ka manawa" ma luna o kaʻaoʻao āu e makemake e hoʻonuiʻia ma kēlāʻaoʻao. I kēia manawa, hoʻohana pinepine wau i kēia no ka hoʻonāʻana i kaʻaoʻao aʻu e hele nei, akā, hiki iāʻoe ke hoʻohana i ia mea e hōʻaho i kaʻaoʻao nui loa. A iʻole hiki iāʻoe ke wehe a pau.
03 o 06
E hoʻomaka i ka hoʻoponoponoʻana i kāu pepaʻaoʻao
Hiki iāʻoe ke hoʻohana i kekahi pepaʻokoʻa o waho a iʻole ka pepaʻaoʻaoʻaoʻao . Ke hoʻohana nei kēiaʻaoʻaoʻaoʻao i kahi pepaʻaoʻao i loko o
ʻO ka mua eʻike mākou i ka UL
ʻO kēia kahi kahi e hoʻohana ai mākou i ka papa inoaʻaoʻao .in i ka HTML. Ma mua o ke kohoʻana i ka UL tag, ka mea e hana i nā papa inoaʻole i kāuʻaoʻao, ponoʻoe e kāhiko wale i ka papa UL. ka papa inoa E like me ka helu mua i kāu CSS:
.tablist {}Makemake wau e hoʻokomo i ka pale hope (}) ma mua o ka manawa, no laila,ʻaʻole wau e poina ma hope.
ʻOiai mākou e hoʻohana nei i kahi inoa inoa papa inoaʻole no ka papa inoa menu, akā,ʻaʻole makemake mākou i nā pahu a iʻole nā helu e komo ana i loko. No laila,ʻo keʻano mua e pono aiʻoe e hoʻohui. papa inoa-ʻaʻohe; Hōʻike kēia i ka polokalamu keleponaʻoiai he papa inoa ia, he papa inoa me nāʻano i hana muaʻoleʻia (e like me nā pali a iʻole nā helu).
A laila, hiki iāʻoe ke hoʻonohonoho i ke kiʻekiʻe o kāu papa inoa e kūlike i kahi makemake āu e hoʻopiha ai. Ua koho au i 2em no koʻu kiʻekiʻe, no ka mea, ua pālua ka nui o ke ana polima, a ua hāʻawiʻia e pili ana i ka hapalua o ka em ma luna a ma lalo o ka kikokikona o kaʻaoʻao. ke kiʻekiʻe: 2em; Akā, hiki iāʻoe ke kau i kou ākea i ka nui o kāu makemake. E lawe i nā hāmele UL i 100% o ka laula, no laila, keʻoleʻoe e makemake i ka liʻiliʻi o ka pahu i kēia manawa, hiki iāʻoe ke haʻalele i ka whānui.
I ka hopena, ināʻaʻole kahi papa helu o kāu kāleka i nā papa inoa UL a me OL, makemakeʻoe e kau i loko.ʻO ia hoʻi, e hoʻokahuli i nā palena, nā palena, a me ka paleʻana i kāu UL. pale: 0; ka palena: 0; palena:ʻaʻohe; Inā ua hoʻopaʻa muaʻoe i ka UL tag, hiki iāʻoe ke hoʻololi i nā palena, ka pale, a iʻole ka palena i kekahi mea e kūlike me kāu hana.
Pono kāuʻaoʻao hope .tablist e like me kēia:
.tablist [ʻano papa inoa:ʻaʻohe; ke kiʻekiʻe: 2em; pale: 0; ka palena: 0; palena:ʻaʻohe; }04 o 06
Hoʻoponopono i nā mea Likelike LI
I kou kohoʻana i kāu papa inoa maʻamauʻole, ponoʻoe e pena i nā inoa LI ma loko. Ināʻole, e hana lākou e like me ka papa inoa maʻamau a piʻi kēlā me kēia i ka laina e hiki mai me ka hoʻokomoʻole i kāu mauʻaoʻao.
ʻO ka mua, e hoʻonohonoho i kāu waiwaiʻano:
.tablist li {}A laila makemakeʻoe e lana i kāu mauʻili i hiki ai lākou ke kau i luna o ka mokulele lele. ka lana: haʻalele;
A mai poina hoʻi e kau i kekahi palena ma waena o nā pūhaka, no laila,ʻaʻole lākou e hui pū. 'ākau-'ākau: 0.13em;
Pono nāʻano o kou li i kēia:
.tablist li {float: hema; 'ākau-'ākau: 0.13em; }05 o 06
Hana i nā Tabs Look Like Tabs with CSS 3
No ka hanaʻana i ka hapa nui o ka hoʻokiʻekiʻe kaumaha ma kēia kāhua style, ke kau nei au i nā loulou i loko o ka papa inoaʻole. Hoʻomaopopo nā meaʻike i nā loulou i nā mea ma kahi pūnaewele ma mua o nā inoa'ē aʻe, no laila,ʻoi aku ka maʻalahi ka hōʻoiaʻana o nā pūnaewele kūʻokoʻa i nā mea likeʻole me nāʻano hoʻohālike inā e hoʻokomoʻoe i kahi leka o ka heleuma (mau loulou). No laila e kākau mua i kāu mauʻano kāhua:
.tablist ma a {} .tablist ma a: hover {}Ma muli o ka hoʻohanaʻana o kēia mau pepa i mau nūpepa i loko o kahi noi, makemakeʻoe i kaʻaoʻao o kaʻaoʻao e clickable,ʻaʻole wale i kahi kikokikona i pili. No ka hanaʻana i kēia, ponoʻoe e hoʻololi i ka tag mai kahi kūlana " inline " kūikawā i loko o kahi'āpana'āwae . hōʻike i ka pahu; (Inā makemakeʻoe eʻike hou aku i kaʻokoʻa, e heluhelu i ka Block-Level vs. Inline Elements .)
A laila, he ala maʻalahi e hoʻoikaika ai i kāu mauʻupena e like me keʻano o kekahi, akā hoʻoikaika no ka hoʻokomo i ka whānui o ka kikokikona e hana i ka pale'ākau a me ka hema. Ua hoʻohana wau i ka hana hoʻopili pinepine no ka hoʻonohonohoʻana i luna a me lalo i ka 0 a me ka'ākau a me ka hema i 1m. ka pale: 0 1em;
Ua koho au e hoʻokaʻawale i ka loulou i lalo, no laila e nānā nāʻaoʻao ma lalo o nā loulou. Akā, inā pilikia paha kāu mau pepeiao, e haʻalele i kēia laina. hono-mea hoʻonani:ʻaʻohe;
Ma ke kauʻana i kahi āpana lahilahi a puni nāʻaoʻao, hoʻohālike ia e like me nā pūpū. Ua hoʻohana au i ka waiwai kūʻokoʻa palena palena e kau ai i ka palena a puni nāʻaoʻaoʻaoʻaoʻehā: 0.06em paʻa # 000; A laila, hoʻohanaʻia ka waiwai palena palena e hoʻoiho ai i ka lepo. palena palena: 0;
A laila ua hana au i kekahi mau mea hoʻololi i ka mīkini, ka lanu, a me ke kala o kaʻaoʻao. E hoʻonoho i kēia i keʻano e kūlike i kāu pūnaewele. ke kuhi: wiwoʻole 0.88em / 2em arial, geneva, helvetica, sans-serif; lepe: # 000; ʻike pā'ālua: #ccc;
ʻO nāʻano a pau e pono e hele ma ka koho .tablist a a, ka rule i hoʻopili ai lākou i nā inoa o nā heleuma i keʻano maʻamau. A laila no kaʻikeʻana o nāʻaoʻao iʻoi aʻe clickable, ponoʻoe e hoʻohui i kahi rule rule .tablist ma a: hover.
Makemake wau e hoʻololi i ka leka o ka kikokikona a me ke kumu e hana i ka pop pop i ka manawa e hoʻomoho aiʻoe. ʻike mua: # 3cf; ʻilima: #fff;
A ua hōʻano hou au i kahi hoʻouka hou i nā mea hoʻolālā e makemake wau i ka lou e hoʻomauʻole i ke kuhikuhi. nā mea hoʻonaninani:ʻaʻohe; ʻO kekahiʻano maʻamau ke hoʻololi i ke kahakuha i ka wā e hoʻomoʻaʻoe i kaʻaoʻao. Inā makemakeʻoe e hana i kēlā mea, hoʻololi iā ia i nā mea e hoʻoponopono ai: e kaulou;
Ma hea kahi CSS 3?
Ināʻoe e noʻonoʻo nei, uaʻike pahaʻoeʻaʻole i loaʻa kekahi mau CSS 3 i hoʻohanaʻia ma ka pepa style. Loaʻa kēia i ka hana ma kekahi polokalamu kele pūnaewele hou, me Internet Explorer. Akā,ʻaʻole ia e hoʻohālikelike i nā pēpena ma mua o nā pahu kiko. Ma ka hoʻoukaʻana i kahi CSS 3-line radius style (a pili i ka polokalamu kelepona-mau kikowaena) hiki iāʻoe ke hana i nāʻaoʻao a puni, e nānā e like me nā nūpepa ma kahi waihona manila.
ʻO keʻano āu e hoʻohui ai i ka .tablist ma ke kaʻina o: -webkit-border-top-right-radius: 0.50em; -ockit-palena-luna-hema-radius: 0.50em; -moz-palena-radius-topright: 0.50em; -moz-palena-radius-topleft: 0.50em; palena palena-luna-pololei-radius: 0.50em; palena palena-hema-hema: 0.50em;
ʻO kēia nā kāʻeiʻoi loa o kaʻu mau palapala i kākau ai:
.tablist ma a {hōʻike: pahu; ka pale: 0 1em; nā mea hoʻonaninani:ʻaʻohe; palena: 0.06em ikaika # 000; palena palena: 0; ke kuhi: wiwoʻole 0.88em / 2em arial, geneva, helvetica, sans-serif; lepe: # 000; ʻike pā'ālua: #ccc; / * CSS 3 mau māmā / / webkit-palena-luna-pololei-radius: 0.50em; -ockit-palena-luna-hema-radius: 0.50em; -moz-palena-radius-topright: 0.50em; -moz-palena-radius-topleft: 0.50em; palena palena-luna-pololei-radius: 0.50em; palena palena-hema-hema: 0.50em; } .tablist li a: hover {ʻaoʻao: # 3cf; ʻilima: #fff; nā mea hoʻonaninani:ʻaʻohe; }Me kēia mauʻano, he papa koho kāu e hana nei ma nā pūnaewele nui nui a nānā aku i nā paʻi paiʻia ma CSS 3 pūnaewele. ʻO kaʻaoʻao aʻe e hāʻawi iāʻoe i kahi koho hou aku hiki iāʻoe ke hoʻohana no kaʻaʻahuʻana i kahiʻoi aʻe.
06 o 06
Hōʻike i ka Lā Kūwaena
Ma ka HTML i hana wau, aia ka UL i kahi helu papa inoa me kahi ID. Hiki iāʻoe ke hāʻawi i kahi LI i kahiʻano likeʻole mai ke koena. ʻO ka mea maʻamau ka hoʻopiliʻana i kaʻaoʻao o kēiaʻaoʻao ma kekahiʻano. ʻO kekahiʻano e noʻonoʻo ai i kēia makemake e makemakeʻoe e kala hina i nā pēpena i olaʻole. A laila hoʻololiʻoe i kahi o ka id ma nāʻaoʻao'ē aʻe.
Hana wau i ka inoa #current A a me ka #current A: hover sta no laila uaʻano iki aʻelua. Hiki iāʻoe ke hoʻololi i ke kala, ka lae hope,ʻo ke kiʻekiʻe, ka laulā a me ka paleʻana o kēlā māhele. E hana i nā hoʻololi i kūpono i kāu hana.
.tablist li # o kēia nei [Background-color: # 777; ʻilima: #fff; } .tablist li # nei a: hover {ʻaoʻao: # 39C; }A makeʻoe! Ua hoʻolālā waleʻoe i kahi koho kūikawā no kāu pūnaewele.