01 o te 06
Me pehea te Waihanga Tapapa Taehia me CSS me Ata kore
Ko te whakaterenga ki nga whārangi tukutuku he ahua o te rarangi, a, ko te whakaterenga o te whakaterenga he rite te raupapa whakapae. He mea tinowari ki te hanga i te whakawhiti me te CSS hei whakawhitinga whakapae, engari ka homai e CSS 3 etahi taputapu kia pai ai te titiro ki a raatau.
Ma tenei akoranga e kawe ki a koe i roto i te HTML me te CSS e hiahiatia ana hei waihanga i te tahua CSS. Pāwhiritia te hononga kia kite i te ahua o te titiro.
Kaore tenei mahinga tautuhinga e whakamahi ana i nga whakaahua , HTML noa me CSS 2 me CSS 3. Ka taea te whakarerekētanga kia taea ai te taapiri atu i nga ripa ka whakarereke i nga kuputuhi kei roto.
Tautoko Pūtirotiro
Ka mahi tenei tahua ripa ki nga tirotiro nui katoa . Kaore e whakaatuhia e te Kaiparapu Ipurangi te kokonga o te kokonga, engari, ka whakaaturia e ia nga ripa kia rite ki Firefox, Safari, Opera, me Chrome.
02 o te 06
Tuhia to Rarangi Tahua
Ko nga mahinga whakatere katoa me nga ripa he tino raupapa herangi. Na ko te mea tuatahi e hiahia ana koe ki te tuhi i tetahi rarangi o nga hononga ki te wahi e hiahia ana koe ki te whakatere ki te haere.
Kei te whakaaro tenei akoranga kei te tuhi koe i to HTML i roto i te kaitautuhi kuputuhi me te mohio kei hea koe e tu ai te HTML mo to tahua i to papanga tukutuku.
Tuhia ta rarangi wharangi penei:
- class = "tablist">
- CSS 3
- id = "te awatea"> Nga ripa
- Hoki
- Nga tahua
Ka kite koe ka karangahia e te waehere nga mea e rua: class = "tablist" me id = "kei aianei". Ko te mea tuatahi e hiahiatia ana . Mena kaore koe e whakauru i te akomanga ripa i runga i to rarangi taatau, kaore nga taabu e mahi. Ko te tuarua ko te kōwhiringa. Whakanohia te id = "kei aianei" kei runga i tetahi ripa e hiahia ana koe kia whakanuiahia i taua whaarangi. Ka whakamahi ahau i tenei ki te whakanui i te whārangi kei runga ahau, engari ka taea e koe te whakamahi hei whakaatu i te ripa nui. Ka taea ranei e koe te tango katoa.
Tuhinga o mua
Tīmata Whakatika i to Rau Rauemi
Ka taea e koe te whakamahi i tetahi pepa tahua o waho ranei, he waahua taraiwa ranei . Ko te whārangi tahua tauira e whakamahi ana i te waahua o roto i te
Tuatahi Ka tahua e matou te UL ake
Koinei te wahi e whakamahi ai matou i te ripa ripa o te akomanga .in te HTML. Engari i te tautuhi i te tūtohu UL, ka waihanga i nga rarangi kaore katoa i runga i to papanga, me tuhi anake i te akomanga UL. tablist Na ko te urunga tuatahi o to CSS kia:
.tablist {}E hiahia ana ahau ki te whakauru i te whitiki whakamau (►) i mua i te wa, na e kore e wareware i ahau i muri mai.
Ahakoa e whakamahi ana matou i te tūtohu taamaa korerangi mo te rarangi tahua ripa, engari kaore matou e hiahia ana i nga kohinga me nga tau kei roto. rārangi rārangi: kahore; E whakaatu ana tenei ki te tirotiro i te mea ko te rarangi, ko te rarangi kaore he waahanga i mua i te waahanga (penei he poaka, he tau).
Na, ka taea e koe te whakanoho i te teitei o to rarangi hei whakarite i te waahi e hiahia ana koe ki te whakaki. I whiriwhiria e ahau 2em mo toku teitei, no te mea ko te rua o te momotuhi paerewa paerewa, a ka hoatu e koe he hawhe em i runga ake i raro i te kuputuhi o te ripa. teitei: 2em; Engari ka taea e koe te tautuhi i to whanui ki te rahi e hiahia ana koe. Ka tangohia ake e nga tohu UL te 100% o te whanui, na, mehemea ka hiahia koe kia iti iho i te ipu o teianei, ka taea e koe te waiho i te whanui.
Hei whakamutunga, mehemea kaore he papanga mo te papanga a te kaitohu mo nga tohu UL me te OL, ka hiahia koe ki te whakauru ki roto. Ko te tikanga tenei me tahuri atu koe i nga rohe, tawhiti, me nga whara i runga i to UL. te papaha: 0; tapaina: 0; rohe: kahore; Mena kua tautuhia ano e koe te tūtohu UL, ka taea e koe te whakarereke i nga taapete, te paera, te rohe ranei ki tetahi mea e pai ana ki to hoahoa.
Ko to akoranga whakamutunga .tablist me penei:
.tablist {kāhua-rārangi: kahore; teitei: 2em; te papaha: 0; tapaina: 0; rohe: kahore; }Tuhinga o mua
Te whakatika i nga Tūemi Rārangi LI
I te waahi kua tahia e koe to raupapa whaimana, me tuhi koe i nga tūtohu LI i roto. Kaore, ka mahi hei raupapa paerewa, ka neke ki te rarangi e whai ake nei me te kore e tu tika ana i nga ripa.
Tuatahi, tautuhi i to taonga taonga:
.tablist ra {}Na ka hiahia koe ki te whakatere i nga ripa kia rauka ai koe ki runga i te paparangi whakapae. rererangi: te maui;
A kaua e wareware ki te whakauru i tetahi waahanga i waenganui i nga ripa, na kaore e hono tahi. te taha-matau: 0.13em;
Kia penei nga ahua o ou li:
.Ko te raupapa o te raupapa (float: left; te taha-matau: 0.13em; }Tuhinga o mua
Te hanga i nga Tapa kia rite ki nga Tapa ki te CSS 3
Ki te mahi i te nuinga o te whakanui taimaha i roto i tenei momo kāhua, kei te aro ahau ki te hono i roto i te rārangi kore. Kei te mohio nga kaiwhakatere e hono ana nga hononga ki te wharangi tukutuku atu i era atu tūtohu, na te mea kawari ake te mahinga o nga kaituhi pakeke ki nga mea e rite ana ki te ahua o te hoarutanga mehemea kei te whakauru koe ki te tohu taamu (hononga). Na ka tuhi tuatahi i nga tikanga o te kāhua:
.tablist he {} .tablist he: hover {}No te mea me mahi enei ripa kia rite ki nga ripa i roto i te tono, e hiahia ana koe kia whakapirihia te rohe katoa o te ripa, kauaka noa te kuputuhi hono. Hei mahi i tenei, me whakarereke i te A tohu mai i te ahua o te " tautuhinga " o te taatai ki te huinga poraka . whakaatu: poraka; (Ki te hiahia koe ki te mohio atu ki te rereke, korero Plock-Level vs. Eleline Elements .)
Na, he huarahi ngawari ki te akiaki i o taapene hei hoahoa tetahi ki tetahi, engari kei te whakaheke ki te whanui o te kuputuhi ko te hanga i te taha matau me te taha maui. I whakamahia e ahau nga taonga pakaru mo te whakanoho i te tihi me te raro ki 0 me te taha matau me te maui ki te 1m. te whakaekea: 0 1em;
I whiriwhiria ano e ahau te tango i te hononga e hono ana, kia kore ai nga ripa e iti ake ano he hononga. Engari ki te raruraru to hunga whakarongo, waihohia tenei raina. hono-whakapaipai: kahore;
Na roto i te makaina o te waahi porohita ki nga taha taapiri, ka hangaia kia rite ki nga ripa. I whakamahia e ahau te riihi taapiri rohe hei whakanoho i te rohe a tawhio noa i nga rohe e wha: 0.06em pumau # 000; Na ka whakamahia te rohe rohe-raro kia tangohia mai i te raro. rohe-raro: 0;
Na ka hanga e ahau etahi huringa ki te momotuhi, tae, me te tae papamuri o nga ripa. Whakaturia enei ki nga momo e hono ana ki to pae. momotuhi: maia 0.88em / 2em arial, geneva, helvetica, kore-serif; tae: # 000; tae-tae: #ccc;
Ko nga momo o runga ake me haere i roto i te kaiwhiwhi .tablist ko a, te ture kia pa ai ratou ki nga tohu o te punga. Na ka whakaatuhia nga taapiri ki te mea ka taea te whakamahi, me whakaurua he ture iti.
E hiahia ana ahau ki te huri i te tae o te tuhinga me te papamuri kia puta ai te pop pa ki te kiore. whakamārama: # 3cf; tae: #fff;
Na ka whakauru atu ahau ki tetahi atu whakamaumaharatanga ki nga kaituhi e hiahia ana ahau kia kaua e tuhia te hononga. whakapaipai kuputuhi: kahore; Ko tetahi atu tikanga noa ko te huri i te raina i runga i te wa e kiore ai koe i te ripa. Ki te hiahia koe ki te mahi i taua mea, hurihia ki te whakapaipai kuputuhi: tohaina;
Engari kei hea te CSS 3?
Mena kua whakaarohia e koe, kua kitea pea kuaore he ahua CSS 3 i whakamahia i roto i te waahua. He painga tenei ki te mahi i tetahi pukenga hou, tae atu ki te Internet Explorer. Engari kaore nga taabene e ahua kia rite ki nga pouaka tapawha. Na roto i te whakauru i te raina-a-raupapa CSS 3 (me nga ingoa e whai ana ki te kiri-motuhake) ka taea e koe te karapoti i nga taha, kia rite ki nga ripa i runga i te kōpaki manila.
Ko nga momo e tapiritia e koe ki te .tablist ko te ture: -webkit-border-top-right-radius: 0.50em; -awerangi-ki runga-runga-maui-raorao: 0.50em; -moz-boundary-radius-topright: 0.50em; -moz-boundary-radius-topleft: 0.50em; raina-runga-matau-raiti: 0.50em; raina-teitei-maui-radius: 0.50em;
Koinei nga tikanga kāhua whakamutunga i tuhituhi ahau:
.tablist ko te [whakaatu: poraka; te whakaekea: 0 1em; whakapaipai kuputuhi: kahore; rohe: 0.06em pakari # 000; rohe-raro: 0; momotuhi: maia 0.88em / 2em arial, geneva, helvetica, kore-serif; tae: # 000; tae-tae: #ccc; / * CSS 3 huānga * / webkit-rohe-runga-matau-radius: 0.50em; -awerangi-ki runga-runga-maui-raorao: 0.50em; -moz-boundary-radius-topright: 0.50em; -moz-boundary-radius-topleft: 0.50em; raina-runga-matau-raiti: 0.50em; raina-teitei-maui-radius: 0.50em; } .tablist ko te: hover {papamuri: # 3cf; tae: #fff; whakapaipai kuputuhi: kahore; }Ki enei momo, he tautuhinga tautuhi kei te mahi i nga kaitoro nui katoa, kei te ahua ano o nga ripa pai i roto i nga kaiwhakarato o CSS 3. Ko te whārangi e whai ake nei ka hoatu ki a koe tetahi atu whiringa ka taea e koe te whakamahi ki te whakakakahu atu i nga mea ake.
06 o 06
Whakaatuhia te Tapa o Naianei
I roto i te HTML i waihangahia e ahau, he maha nga kaupapa o te UL me tetahi ID. Ka taea e tenei ki a koe te hoatu i tetahi LI hei ahua rereke mai i te toenga. Ko te mea tino nui ko te hanga i te ripa o teianei e tu ana i etahi huarahi. Ko tetahi atu huarahi ki te whakaaro i tenei ko te hiahia ki te makawe i nga ripa e kore e ora. Ka huri koe i te wahi kei te rere te id i nga whārangi rereke.
Ka tahua ahau i te tohu o te #current A, me te #current A: hover sta kia rua e rereke rereke. Ka taea e koe te huri i te tae, te tae papamuri, tae noa ki te teitei, te whanui, me te panuku o taua huanga. Whakamahia nga huringa katoa ki to hoahoa.
.tablist li # kei teenei he [taiao-tae: # 777; tae: #fff; } .tablist li # i teie nei: hover {papamuri: # 39C; }Na kua oti koe! Kua hangaia e koe he tahua tahua mo to paetukutuku.