Nchịkọta CSS na- achọ ka i chee echiche na nhazi weebụ gị dum, wee buru iberibe ma tinye ha ọnụ. Mụta otu esi arụpụta atụmatụ dị mfe nke atọ na CSS.
01 nke 09
Detuo Atụmatụ gị
Ị nwere ike ịdọta nhazi gị na akwụkwọ ma ọ bụ na mmemme ndịna-emeputa . Ọ bụrụ na ị nwere ntanye waya ma ọ bụ ọbụna ihe ndị ọzọ buru ibu n'uche, mee ka ọ dị mfe na igbe ndị dị na saịtị ahụ. Ihe a na-eso isiokwu a nwere okpukpu atọ na mpaghara ọdịnaya, yana nkụnye eji isi mee na n'okpuru. Ọ bụrụ na i lee anya nke ọma, ị ga-ahụ na ogidi atọ ahụ abụghị nhata.
Mgbe i nwetasịrị nhazi gị, ị nwere ike ịmalite iche echiche banyere akụkụ. Nlereanya ihe atụ a ga-enwe usoro isi ndị a:
- Enweghị ihe karịrị 900 pixels n'obosara
- 20 px gutter n'aka ekpe
- 10 px n'etiti ogidi na ahịrị
- Ogidi ndị dị 250px, 300px, na 300px n'obosara
- Eke n'elu bụ 150px ogologo
- Akara ala bụ 100px ogologo
02 nke 09
Dee Mmasị HTML / CSS ma mepụta Mkpụrụ Ejiri
Ebe ọ bụ na ibe a ga-abụ akwụkwọ HTML ziri ezi, Malite na akpa HTML efu
"! PUBLIC Html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Tinye na isi CSS ka ha ghara ịpụta akụkụ peeji nke ala, ala, na ụda . Ọ bụ ezie na e nwere ụkpụrụ ọkọlọtọ ọzọ nke CSS maka akwụkwọ ọhụrụ, ụdị ndị a bụ nke kachasị nta ịchọrọ iji nweta nhazi dị ọcha. Tinye ha n'isi nke akwụkwọ gị:
ụdị ụdị = "ederede / css"> html, akụkụ ahụ [0bx; na-eme akwa: 0px; ókè: 0px; }Iji malite ịmepụta nhazi ahụ, tinye ya na mbido akpa. Ọ na - eme mgbe ụfọdụ na ị nwere ike iwepu akpa ahụ mgbe e mesịrị, mana maka ọtụtụ nhazi nke obosara, nwere ihe mmepụta ahụ na - eme ka ọ dịkwuo mfe ijikwa ihe nchọgharị weebụ dị iche iche. Ya mere n'anụ ahụ tinye nke a:
Na na CSS style sheet, tinye:
#container {}03 nke 09
Style nke akpa
Ogwe ahụ na-akọwa otú ọnye weebụ ga-esi dị, yana akụkụ ọ bụla n'akụkụ na mpempe akwụkwọ n'ime. Maka akwụkwọ a, akpa ahụ dị 870px n'obosara na mkpokọta 20 pixel n'akụkụ aka ekpe. A na-edozi gutter na ụdị ụzọ dị oke, ma a na-edozi ihe mgbochi na akpa ahụ iji gbochie ihe ọ bụla dị ka obosara dị ka akpa.
#container {obosara: 870px; oke: 0 0 0 20px; / * aka nri aka nri aka nri elu / / padding: 0; }Ọ bụrụ na ị chekwaa akwụkwọ gị ugbu a, ọ ga-esi ike ịhụ akpa ahụ n'ihi na ọ nweghị ihe ọ bụla na ya. Ọ bụrụ na ị gbakwunye ederede ebe, ị ga-enwe ike ịhụ ihe mmezi ahụ n'ụzọ doro anya karị.
04 nke 09
Jiri Ndepụta Isi Ihe maka nkụnye eji isi mee
Otu ị ga - esi kpebie ịkpụcha n'usoro isiokwu nwere ike ịdabere na ihe dị na ya. Ọ bụrụ na usoro nkụnye eji isi mee ga-enwe akara ngosi na isiokwu, mgbe ahụ jiri akara edemede (
) mee ka uche karịa iji . Ị nwere ike ịmepụta isi ihe ahụ otu ụzọ ị na-esi kọwaa, ị na-ezere mkpado ndị ọzọ.
The HTML maka ahịrị nkụnye eji isi mee na-aga n'elu akpa ma yiri nke a:
Igodo Okwu Mbụ
Mgbe ahụ, iji dozie mpaghara ya, a gbakwunyere ókè ala uhie na ala ka ị wee hụ ebe ọ na-agwụ, a na-atụgharị akụkụ ya na ihe mgbochi ya, obosara ya ruru 100% na ịdị elu ruo 150px:
#container h1 {oke: 0; Na-akwagharị: 0; obosara: 100%; elu: 150px; ise n'elu: aka ekpe; ala ala: # c00 siri ike 3px; } Echefukwala ka ị na-esegharị ihe a na-ese n'elu: n'aka ekpe; ihe onwunwe. Isi igodo ederede CSS bu ichota ihe nile - obuna ihe ndi obosara dika obosara. N'ụzọ dị otú a, ị maara mgbe niile ebe ihe ndị ahụ ga-adị na peeji nke.
Otu onye CSS na-ahọrọ ụdị naanị ya na H1 ihe dị n'ime #container element.
05 nke 09
Iji nweta ogidi atọ, Malite site na Ụlọ Mwube abụọ
Mgbe ị na-emepụta ntọala atọ na kọlụm na CSS, ịkwesịrị ịkekọrịta nhazi gị n'ime otu nke abụọ. Ya mere, maka nhazi nke atọ a, kọlụm etiti na aka nri ma chịkọta ma tinye n'akụkụ okpokoro aka ekpe na ndepụta nke abụọ ebe ogwe aka ekpe dị 250px n'obosara, na kọlụm aka nri bụ 610px n'obosara (300 nke ọ bụla maka ogidi abụọ ahụ , tinyekwa 10px maka gutter n'etiti ha).
The HTML anya dị ka nke a:
Ọ bụrụ na ị nwere ike ịchọta ya. Ọ bụrụ na ị na-achọ ka ị na-eche na ị na-achọ ka ị na-eche banyere gị, ị nwere ike ịlele gị ozi. Na ntinye aka na-eme ihe na-eme ka ọ bụrụ na ị na-eme ihe na-eme. Ọ bụrụ na ị na-eme ka ndị ọzọ na-arụ ọrụ, ị ga-achọpụta na ị nwere ike ịchọta ndị ọzọ.
Iji nweta ụfọdụ ọrụ, Ị na-arụ ọrụ ma na-arụ ọrụ. Ọ bụrụ na ị chọrọ ịchọta ihe ọ bụla ị ga-eme, ị ga-ahụ ya.
Ihe edere ederede n'ime ogidi na-eme ka ha hụkwuo mgbe a nwalere ha. CSS dị ka nke a:
#container # col1 {n'obosara: 250px; ise n'elu: aka ekpe; } #container # col2outer {n'obosara: 610px; ugbo elu: nri; oke: 0; Na-akwagharị: 0; } Kọlụm dị n'aka ekpe na-agafe n'aka ekpe, ebe nke ọzọ na-ese n'elu nri. N'ihi na obosara nke obosara abuo di 860px, enwere 10px gutter n'etiti ha.
06 nke 09
Tinye ogidi abụọ n'ime akuku nke abuo
Iji mepụta ogidi atọ ahụ, gbakwunye divs abụọ n'ime okpukpu abụọ nke okpukpu abụọ, dị ka ị gbakwunyere 2 divs n'ime kọlụm akpa na nzọụkwụ ikpeazụ. The HTML anya dị ka nke a:
Ị nwere ike ịchọta ndị ọzọ, ma ọ bụrụ na ị na-ahụ oge na-ezigara ndị ọzọ ọrụ. Ị na-arụ ọrụ ma na-arụ ọrụ. Ọ bụrụ na ị na-eme ihe ọ bụla, ị ga-eme ka ọ dị mma.
Na CSS dị ka nke a:
# col2outer # col2mid {n'obosara: 300px; ise n'elu: aka ekpe; } # col2outer # col2side {n'obosara: 300px; ugbo elu: nri; } Ebe ọ bụ na igbe abụọ a dị 300px dị n'ime igbe nchekwa 610px, a ga-enweghachi 10px gutter n'etiti ha.
07 nke 09
Tinye ya n'okpuru
Ugbu a na etinyere peeji nke ọzọ, ị nwere ike ịgbakwunye na footer. Jiri nkeda ikpeazụ na "idiri" id, ma gbakwunye ọdịnaya ka ị wee hụ ya. Ịnwere ike ịgbakwunye ókèala n'elu, n'ihi ya ị ga-ama ebe ọ na-amalite.
The HTML:
The HTML maka ahịrị nkụnye eji isi mee na-aga n'elu akpa ma yiri nke a:
Igodo Okwu Mbụ
Mgbe ahụ, iji dozie mpaghara ya, a gbakwunyere ókè ala uhie na ala ka ị wee hụ ebe ọ na-agwụ, a na-atụgharị akụkụ ya na ihe mgbochi ya, obosara ya ruru 100% na ịdị elu ruo 150px:
#container h1 {oke: 0; Na-akwagharị: 0; obosara: 100%; elu: 150px; ise n'elu: aka ekpe; ala ala: # c00 siri ike 3px; }Echefukwala ka ị na-esegharị ihe a na-ese n'elu: n'aka ekpe; ihe onwunwe. Isi igodo ederede CSS bu ichota ihe nile - obuna ihe ndi obosara dika obosara. N'ụzọ dị otú a, ị maara mgbe niile ebe ihe ndị ahụ ga-adị na peeji nke.
Otu onye CSS na-ahọrọ ụdị naanị ya na H1 ihe dị n'ime #container element.
05 nke 09
Iji nweta ogidi atọ, Malite site na Ụlọ Mwube abụọ
Mgbe ị na-emepụta ntọala atọ na kọlụm na CSS, ịkwesịrị ịkekọrịta nhazi gị n'ime otu nke abụọ. Ya mere, maka nhazi nke atọ a, kọlụm etiti na aka nri ma chịkọta ma tinye n'akụkụ okpokoro aka ekpe na ndepụta nke abụọ ebe ogwe aka ekpe dị 250px n'obosara, na kọlụm aka nri bụ 610px n'obosara (300 nke ọ bụla maka ogidi abụọ ahụ , tinyekwa 10px maka gutter n'etiti ha).
The HTML anya dị ka nke a:
Ọ bụrụ na ị nwere ike ịchọta ya. Ọ bụrụ na ị na-achọ ka ị na-eche na ị na-achọ ka ị na-eche banyere gị, ị nwere ike ịlele gị ozi. Na ntinye aka na-eme ihe na-eme ka ọ bụrụ na ị na-eme ihe na-eme. Ọ bụrụ na ị na-eme ka ndị ọzọ na-arụ ọrụ, ị ga-achọpụta na ị nwere ike ịchọta ndị ọzọ.
Iji nweta ụfọdụ ọrụ, Ị na-arụ ọrụ ma na-arụ ọrụ. Ọ bụrụ na ị chọrọ ịchọta ihe ọ bụla ị ga-eme, ị ga-ahụ ya.
Ihe edere ederede n'ime ogidi na-eme ka ha hụkwuo mgbe a nwalere ha. CSS dị ka nke a:
#container # col1 {n'obosara: 250px; ise n'elu: aka ekpe; } #container # col2outer {n'obosara: 610px; ugbo elu: nri; oke: 0; Na-akwagharị: 0; }Kọlụm dị n'aka ekpe na-agafe n'aka ekpe, ebe nke ọzọ na-ese n'elu nri. N'ihi na obosara nke obosara abuo di 860px, enwere 10px gutter n'etiti ha.
06 nke 09
Tinye ogidi abụọ n'ime akuku nke abuo
Iji mepụta ogidi atọ ahụ, gbakwunye divs abụọ n'ime okpukpu abụọ nke okpukpu abụọ, dị ka ị gbakwunyere 2 divs n'ime kọlụm akpa na nzọụkwụ ikpeazụ. The HTML anya dị ka nke a:
Ị nwere ike ịchọta ndị ọzọ, ma ọ bụrụ na ị na-ahụ oge na-ezigara ndị ọzọ ọrụ. Ị na-arụ ọrụ ma na-arụ ọrụ. Ọ bụrụ na ị na-eme ihe ọ bụla, ị ga-eme ka ọ dị mma.
Na CSS dị ka nke a:
# col2outer # col2mid {n'obosara: 300px; ise n'elu: aka ekpe; } # col2outer # col2side {n'obosara: 300px; ugbo elu: nri; }Ebe ọ bụ na igbe abụọ a dị 300px dị n'ime igbe nchekwa 610px, a ga-enweghachi 10px gutter n'etiti ha.
07 nke 09
Tinye ya n'okpuru
Ugbu a na etinyere peeji nke ọzọ, ị nwere ike ịgbakwunye na footer. Jiri nkeda ikpeazụ na "idiri" id, ma gbakwunye ọdịnaya ka ị wee hụ ya. Ịnwere ike ịgbakwunye ókèala n'elu, n'ihi ya ị ga-ama ebe ọ na-amalite.
The HTML: