Ko te whakatakotoranga CSS e hiahia ana koe ki te whakatakoto i to tautuhinga paetukutuku katoa, ka tango i nga mowhiti me te tuhi tahi. Akohia me pehea te hanga i tetahi raupapa 3-tīwae noa me CSS.
01 o te 09
Tohua To Tahora
Ka taea e koe te tuhi i to tahora i runga i te pepa, i roto i te mahere whakairoiro . Mena kua whai keehia e koe he waea-arahi ranei, he nui ake te hoahoa i roto i te hinengaro, he whakaiti i nga pouaka taketake kei te hanga i te pae. Ko tenei hoahoa e whai ana i tenei tuhinga he toru nga pou i roto i te rohe ihirangi matua, me te pane me te hiku. Mena ka titiro koe, ka taea e koe te kite ko nga pou e toru e kore e rite ki te whanui.
I muri i to huinga kua puta mai, ka taea e koe te whakaaro ki nga waahanga. Ko tenei tauira hoahoa ka whai i nga waahanga e whai ake nei:
- Kaore e neke ake i te 900 pika te whanui
- 20 px te whara i te taha maui
- 10 px i waenga i nga pou me nga rarangi
- Ko nga pou e 250px, 300px, me te 300px whānui
- Ko te raina runga te 150px te roa
- Ko te rarangi raro kei te 100px te roa
02 o 09
Tuhia te HTML / CSS taketake me te Waihanga i tetahi Mea Whakauru
Mai i tenei tuhinga ko te tuhinga HTML whaimana, Tīmata ki te pouaka HTML kore
Tāpirihia ki roto i nga momo CSS taketake kia kore e whakaputa i nga taapete whanui, nga rohe, me nga hoe . Ahakoa he momo ritenga CSS ano hoki mo nga tuhinga hou, ko enei momo te iti rawa e hiahia ana koe ki te tiki i tetahi taapaka ma. Tāpirihia ki te upoko o to tuhinga:
Hei tīmata ki te hanga i te tahora, tuhia ki roto i te huānga ipu. I etahi wa ka taea e koe te peke atu i te ipu i muri mai, engari mo te nuinga o nga waahanga whanui-whanui, kei te mea kawari ake te whakahaere i te kaupapa ipurangi puta noa i nga mapu tukutuku rereke. Na i roto i te tinana hoatu tenei:
A i roto i te pepa style CSS, hoatu:
#container {}Tuhinga o mua
Te Kāhua o te Pane
Ko te pouaka e whakaatu ana i te whanui o nga tuhinga o te paetukutuku, me nga taapiri katoa i waho o te waa me te paera i roto. Mo tenei tuhinga, ko te ipu he 870px te whanui me te 20 pika pika i te maui. Kei te tautuhia te pungarehu me te ahua tawhito, engari kaore i te whakakorea nga waahu i runga i te ipu hei arai i ngaa waahanga o te waa.
#container {whanui: 870px; tapahi: 0 0 0 20px; / * te taha mauī mauī runga: *; }Ki te tiaki koe i to tuhinga i tenei wa, ka uaua ki te kite i te putea no te mea kahore he mea i roto. Mena ka tapiritia e koe te kuputuhi kaitautoko, ka taea e koe te kite i te waahanga o te putea maata atu.
04 o te 09
Whakamahia te Taitara Tahua mo te Pane
Me pehea to whakatau ki te tahua i te rarangi pane ka pumau ki runga i nga mea kei roto. Mena kei te haere tonu te rarangi pane ka whai tohu whakairoiro me te upoko, ka whakamahi i te tūtohu matua (
) nui atu i te whakamahi i te . Ka taea e koe te whakariterite i te upoko i te ara ano e whakaatu ana koe i te tohu, a ka karohia e koe nga tohu kaute.
Ko te HTML mo te rarangi pane ka haere ki runga o te ipu ka penei:
Te Raina Header
Na, ki te whakatakoto i nga momo i runga i taua mea, ka tapiritia tetahi rohe whero ki raro, kia kite ai koe i te wahi i mutu ai, kaore i taatai te tawhitinga me te taraiwa, te whanui ki te 100% me te teitei ki te 150px:
#container h1 {tawhito: 0; te papaha: 0; whanui: 100%; teitei: 150px; rererangi: te maui; rohe-raro: # c00 pakiaka 3px; } Kaua e wareware ki te whakatere i tenei huinga me te rererangi: maui; taonga. Ko te mahinga ki te tuhi i nga whakatakotoranga CSS ko te whakawhiti i nga mea katoa - tae noa ki nga mea e rite ana te whanui rite te ipu. I taua ara, kei te mohio tonu koe ki hea nga mea e takoto ana ki te whaarangi.
Ko te kaitono o te CSS he mea tono i nga momo H1 anake i roto i te huānga #container.
Tuhinga o mua
Hei Whakarite i nga Tīwae e toru, Tīmata ma te Hanga Whare e rua
A, no te hanga i tetahi tautuhinga toru-pou ki te CSS, me wehe e koe to tahora ki nga roopu o te rua. Na mo tenei whakatakotoranga-toru, ko te waenganui me te taha matau, ka whakarōpūhia, ka tohaina ki te taha maui ki te raupapa-rua i te waahanga o te taha maui ki te 250px te whanui, me te kohanga tika 610px te whanui (300 mo ia waahanga e rua , me te 10px mo te whara i waenganui ia ratou).
Ko te HTML rite tenei:
Kia kore e taea e koe te whakaputa i tenei. Ka taea e koe te whakamahi i te utu mo te kore e taea e koe te tiki atu, me te kore e taea e koe. I roto i te rerenga i roto i te voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ka taea e koe te mahi i te mahi i roto i te mahi i te mea e kore e taea e koe te mahi i te tikanga.
Hei utu mo te mahi, Ko te mahi me te mahi i roto i te mahi. Ka taea e koe te mahi i roto i te korero. Ko te kuputuhi wahi i roto i nga pou e tino kitea ana i te wa e whakamatautau ana. Ko te CSS rite tenei:
#container # col1 {whanui: 250px; rererangi: te maui; } #container # col2outer {whanui: 610px; rererangi: tika; tapaina: 0; te papaha: 0; } Ko te tīwae i te taha mauī e rere ana ki te taha maui, i te mea e rere ana tetahi atu ki te taha matau. No te mea ko te whanui katoa o nga pou e 860px, he 10 ngutu putea i waenganui ia ratou.
06 o 09
Whakauruahia nga Kowae e rua i roto i te Tae Tuarua Tuarua
Hei waihanga i nga pou e toru, tohaina nga tohu e rua i roto i te papa tuarua tuarua, me te mea kua tapiritia e koe nga 2 divs ki roto i te pou o te pouaka i te waahanga whakamutunga. Ko te HTML rite tenei:
Ki te hiahia koe ki te haere ki te rapu i etahi atu mahi, engari e kore e taea e koe te whakamahi i etahi atu mahi. Ko te mahi me te mahi i roto i te mahi. Ka taea e koe te mahi i te waitohu.
Ko te wa e pai ai te whakaputa, e kore e taea e koe te whakamahi i te utu. Ko te nuinga o te kaupapa e mahi ana i te kaupapa o te kaupapa, me te whakarahi i te kaupapa. Ka taea e koe te whakamahi i te tautuhinga o te reo, me te kore e taea te whakamahi i nga wa katoa ki te mahi i te mahi me te mahi.
A ko te CSS rite penei:
# col2outer # col2mid {whanui: 300px; rererangi: te maui; } # col2outer # col2side {whanui: 300px; rererangi: tika; } Mai i enei pouaka nui 300px i roto i te pouaka whanui 610px, ka waiho ano kia 10px te whara i waenganui ia ratou.
07 o te 09
Tāpirihia ki te Hiku
Na, ko te toenga o te whaarangi kua tuhia, ka taea e koe te whakauru atu ki te hiku. Whakamahia te whakawhitinga whakamutunga me te "footer" id, me te tāpiri ihirangi kia kite ai koe. Ka taea hoki e koe te tapiri i tetahi rohe ki runga, kia mohio ai koe ki hea e timata ai.
Ko te HTML:
Ko te HTML mo te rarangi pane ka haere ki runga o te ipu ka penei:
Te Raina Header
Na, ki te whakatakoto i nga momo i runga i taua mea, ka tapiritia tetahi rohe whero ki raro, kia kite ai koe i te wahi i mutu ai, kaore i taatai te tawhitinga me te taraiwa, te whanui ki te 100% me te teitei ki te 150px:
#container h1 {tawhito: 0; te papaha: 0; whanui: 100%; teitei: 150px; rererangi: te maui; rohe-raro: # c00 pakiaka 3px; }Kaua e wareware ki te whakatere i tenei huinga me te rererangi: maui; taonga. Ko te mahinga ki te tuhi i nga whakatakotoranga CSS ko te whakawhiti i nga mea katoa - tae noa ki nga mea e rite ana te whanui rite te ipu. I taua ara, kei te mohio tonu koe ki hea nga mea e takoto ana ki te whaarangi.
Ko te kaitono o te CSS he mea tono i nga momo H1 anake i roto i te huānga #container.
Tuhinga o mua
Hei Whakarite i nga Tīwae e toru, Tīmata ma te Hanga Whare e rua
A, no te hanga i tetahi tautuhinga toru-pou ki te CSS, me wehe e koe to tahora ki nga roopu o te rua. Na mo tenei whakatakotoranga-toru, ko te waenganui me te taha matau, ka whakarōpūhia, ka tohaina ki te taha maui ki te raupapa-rua i te waahanga o te taha maui ki te 250px te whanui, me te kohanga tika 610px te whanui (300 mo ia waahanga e rua , me te 10px mo te whara i waenganui ia ratou).
Ko te HTML rite tenei:
Kia kore e taea e koe te whakaputa i tenei. Ka taea e koe te whakamahi i te utu mo te kore e taea e koe te tiki atu, me te kore e taea e koe. I roto i te rerenga i roto i te voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ka taea e koe te mahi i te mahi i roto i te mahi i te mea e kore e taea e koe te mahi i te tikanga.
Hei utu mo te mahi, Ko te mahi me te mahi i roto i te mahi. Ka taea e koe te mahi i roto i te korero. Ko te kuputuhi wahi i roto i nga pou e tino kitea ana i te wa e whakamatautau ana. Ko te CSS rite tenei:
#container # col1 {whanui: 250px; rererangi: te maui; } #container # col2outer {whanui: 610px; rererangi: tika; tapaina: 0; te papaha: 0; }Ko te tīwae i te taha mauī e rere ana ki te taha maui, i te mea e rere ana tetahi atu ki te taha matau. No te mea ko te whanui katoa o nga pou e 860px, he 10 ngutu putea i waenganui ia ratou.
06 o 09
Whakauruahia nga Kowae e rua i roto i te Tae Tuarua Tuarua
Hei waihanga i nga pou e toru, tohaina nga tohu e rua i roto i te papa tuarua tuarua, me te mea kua tapiritia e koe nga 2 divs ki roto i te pou o te pouaka i te waahanga whakamutunga. Ko te HTML rite tenei:
Ki te hiahia koe ki te haere ki te rapu i etahi atu mahi, engari e kore e taea e koe te whakamahi i etahi atu mahi. Ko te mahi me te mahi i roto i te mahi. Ka taea e koe te mahi i te waitohu.
Ko te wa e pai ai te whakaputa, e kore e taea e koe te whakamahi i te utu. Ko te nuinga o te kaupapa e mahi ana i te kaupapa o te kaupapa, me te whakarahi i te kaupapa. Ka taea e koe te whakamahi i te tautuhinga o te reo, me te kore e taea te whakamahi i nga wa katoa ki te mahi i te mahi me te mahi.
A ko te CSS rite penei:
# col2outer # col2mid {whanui: 300px; rererangi: te maui; } # col2outer # col2side {whanui: 300px; rererangi: tika; }Mai i enei pouaka nui 300px i roto i te pouaka whanui 610px, ka waiho ano kia 10px te whara i waenganui ia ratou.
07 o te 09
Tāpirihia ki te Hiku
Na, ko te toenga o te whaarangi kua tuhia, ka taea e koe te whakauru atu ki te hiku. Whakamahia te whakawhitinga whakamutunga me te "footer" id, me te tāpiri ihirangi kia kite ai koe. Ka taea hoki e koe te tapiri i tetahi rohe ki runga, kia mohio ai koe ki hea e timata ai.
Ko te HTML: