Ma ka hoʻolālā CSS makemakeʻoe e noʻonoʻo i kāu papahana pūnaewele i piha, a laila e lawe i nā'āpana a kauʻia. E aʻo pehea e kūkulu ai i kahi hoʻonohonoho 3-'olamu me CSS.
01 o 09
E kiʻi i kāu hoʻolālā
Hiki iāʻoe ke kahaki i kāuʻaoʻao ma ka pepa a iʻole ma kahi polokalamu kiʻi . Ināʻoe i kahi lemu uila a iʻole keʻano o ka hoʻolālā nui i loko o ka naʻau, e hoʻololi i nā pahu kumu i kūkulu i ka pūnaewele. Aia kēia hana e pili ana i kēiaʻatikala iʻekolu kolamu ma ka mahele punahele nui, a me ke poʻo a me ka footer. Inā nānāʻoe iāʻoe iho, hiki iāʻoe keʻikeʻaʻole i like nā panakoluʻekolu i ka laulā.
Ma hope o kou hoʻolālāʻana, hiki iāʻoe ke hoʻomaka e noʻonoʻo i ka nui. E loaʻa i kēia hoʻolālā hoʻolālā nāʻano kumu maʻamau penei:
- ʻAʻole iʻoi aku i 900 pixels ākea
- 20 px ma ka hema
- 10 px ma waena o nā pou a me nā lālani
- ʻO nā koluma 250px, 300px, a me 300px whānui
- ʻO ka laina luna he 150px ka lōʻihi
- ʻO ka laina lalo 100px ka lōʻihi
02 o 09
E kākau i ka HTML / CSS kumu a me ka Hanaʻana i kahi Kōmike Pūnaewele
No ka mea he palapala mana HTML kēia palapala, E hoʻomaka me kahi waihona HTML nele
Hoʻohui i nā kāhua CSS maʻamau iʻole e hoʻopau i nā kahaʻaoʻao, nā palena, a me nā hoe . ʻOiai aia kekahi mauʻokoʻa CSS'ē aʻe no nā palapala hou,ʻo kēia mauʻano keʻano liʻiliʻi loa e pono aiʻoe e loaʻa kahi maʻemaʻe. E hoʻokuʻi iā lākou i ke poʻo o kāu palapala:
<ʻano style = "kikokikona / css"> html, pilina o ke kino: 0px; ka pale: 0px; palena: 0px; } kāhuaNo ka hoʻomakaʻana i ke kūkuluʻana i ka papahana, e kau i loko o kahi pūmole pahu. I kekahi manawa e hiki iāʻoe ke hoʻokuʻu aku i ka pahu ma hope aku, akā, no ka hoʻonohonoho ponoʻana o nā pūnaewele hōʻaia, hiki ke maʻalahi ka mālama i nā pūnaewele pūnaewele'ē aʻe. No laila i loko o ke kino waiho i kēia:
A i loko o ka pepa style CSS, waiho:
#onokena {}03 o 09
Kāhua i ke Keʻena
Hōʻike ka pahu i ka whānui o nā pūnaewele pūnaewele, a me nāʻaoʻao ma waho a me ka paleʻana i loko. No kēia palapala,ʻo ka pahu he 870px ākea a me kahi 20 pixel piʻi ma ka hema. Hoʻokumuʻia kaʻili me kahiʻanoʻili, akā, ua paleʻia ka paleʻana ma ka pahu i mea e pale ai i nā mea likeʻole me ka pahu.
#container {whānui: 870px; ke kaha: 0 0 0 20px; / * hapa hema kiʻekiʻe + / pale: 0; }Inā mālamaʻoe i kāu palapala i kēia manawa, e paʻakikī kaʻikeʻana i ka pahu no ka meaʻaʻohe mea i loko. Ināʻoe e hoʻohui i kahi kikokikona wahi, e hiki iāʻoe keʻike pono i ka māhele o ka pahu.
04 o 09
E hoʻohana i kahi Headline Tag no ke poʻo
Peheaʻoe e hoʻoholo ai i keʻano o ka pae poʻomanaʻo e pili nui i nā mea i loko. Ināʻo ka laulā pane e hele wale ana i kahi kiʻi kiʻi a me ke poʻo, a laila, e hoʻohana i ka helu poʻokela (
) i keʻano kūpono ma mua o ka hoʻohanaʻana i . Hiki iāʻoe ke hoʻohālike i ke poʻokela i kaʻaoʻao like āu e hoʻohālike ai i ka div, a keʻaʻa neiʻoe i nā mau meaʻoi aku.
ʻO ka HTML no ka lālani pane ke hele i luna o ka pahu a e like me kēia:
Ke Ao Lena h1>
A laila, e hoʻonohonoho i keʻano ma luna, ua hoʻohuiʻia ka palenaʻulaʻula i lalo eʻikeʻoe i ka hopena o ka palena, ua paleʻia nāʻaoʻao a me nā paleʻana,ʻo ka whānui i 100% a me ke kiʻekiʻe i 150px:
#container h1 Loaʻa: 0; pale: 0; whānui: 100%; ke kiʻekiʻe: 150px; ka lana: haʻalele; palena palena: # c00 solid 3px; } Mai poina i ka hoʻokaheʻana i kēia māhele me ka float: hema; waiwai. ʻO ke ki i ka kākauʻana i nā hoʻolālā CSSʻo ka hoʻokuʻuʻana i nā mea a pau -ʻo nā mea like ka laulā like me ka pahu. ʻO ia ala, uaʻike mauʻoe i kahi e waiho ai nā kumuhana ma kaʻaoʻao.
ʻO kahi keiki CSS ka mea koho i nāʻano i nā H1 wale nō i loko o ka mana #container.
05 o 09
No ka loaʻaʻana oʻekolu Kolamu, e hoʻomaka i ke kūkuluʻana iʻelua Kolamu
Ke kūkuluʻoe i kahi hoʻolālāʻekolu papa me CSS, ponoʻoe e māhele i kāuʻaoʻao i nā huiʻelua. No laila o kēia papahanaʻekolu, ka piko a me ka'ākau a hoʻonohonohoʻia a hoʻonohoʻia ma kaʻaoʻao o ka'āpana hema i kahi papaheluʻelua-pae kahi i hoʻonohonohoʻia ai ka paepae hema he 250px whānui, aʻo ka'āpana'ākau he 610px ākea (300 pakahi no nā kolamuʻelua , me 10px no ke kuʻi ma waena o lākou).
Ua like ka HTML me kēia:
E hōʻoia i kēlā me kēia mea. No ka mea,ʻo kā mākou mea e'ōlelo nei no ka mea hiki iāʻoe ke hoʻokuʻu aku iāʻoe. Ma ka hoʻopiʻi ma ka voluptate quis nostrud e hoʻokomo i ka hopena. No ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, e hoʻokau i ka hana. P> div>
Ut labore et dolor magna aliqua. E hele aku i kēia manawa e haʻi aku i ka inoa o ka'ōlelo. P> div>
ʻO ka mea kākau ma kahi o nā pou eʻikeʻia i kaʻikeʻana. Ua like ka CSS me kēia:
#container # col1 {whānui: 250px; ka lana: haʻalele; } #container # col2outer {whānui: 610px; ke lana: pololei; ka palena: 0; pale: 0; } ʻO ka paepae ma ka hema hema e lele ana i ka hema,ʻoiai e lele ana kekahi ma ka'ākau. Ma muli o ka whānui o ka laulā o 860px, aia he 10px gutter i waena o lākou.
06 o 09
E hoʻouka iʻelua papa ma loko o ka papahana lua nui
No ka hanaʻana iʻekolu koluma, e hoʻohui iʻelua māhele i loko o ka paepaeʻeluaʻoi aku, e like me kāu i hoʻohui ai i 2 div i loko o ka paepae pahu i ka hopena hope loa. Ua like ka HTML me kēia:
No ka mea, no ka mea, e hana i kekahi manawa e hoʻolālā i kekahi mea. Ut labore et dolor magna aliqua. E hele aku i kēia manawa i ka mea eʻike ai i ka'ōlelo Hawaiʻi. P> div>
Nā manawa kūpono no ka manawa, aʻo ka nohoʻana o ka manawa kūpono. Ullam corporis alahana hanahana, a me nā mea nui loa. Kuʻikahi ka'ōlelo a ke kahuna kiʻekiʻe i kahi manawa o ka heluhelu, no ka mea, e hoʻokau i ka manawa e hoʻohana ai i ka hana a me ka'ōlelo. P> div> div>
A like ka CSS me kēia:
# col2outer # col2mid {whānui: 300px; ka lana: haʻalele; } # col2outer # col2side {whānui: 300px; ke lana: pololei; } Ma hope o kēia mau pahuʻelua 300px i loko o kahi pahu nui 610px, e waiho houʻia he 10px gutter ma waena o lākou.
07 o 09
E hoʻohui i ka lalo
I kēia manawa, kapaʻia ke koena o kaʻaoʻao, hiki iāʻoe ke hoʻohui i ka lalo. E hoʻohana i ka hope hope me kahi 'foot foot' id, a e hoʻohui i nā mea iʻikeʻia eʻoe. Hiki iāʻoe ke hoʻohui i kahi palena ma luna, no laila eʻikeʻoe kahi i hoʻomaka ai.
ʻO ka HTML:
ʻO ka HTML no ka lālani pane ke hele i luna o ka pahu a e like me kēia:
Ke Ao Lena h1>
A laila, e hoʻonohonoho i keʻano ma luna, ua hoʻohuiʻia ka palenaʻulaʻula i lalo eʻikeʻoe i ka hopena o ka palena, ua paleʻia nāʻaoʻao a me nā paleʻana,ʻo ka whānui i 100% a me ke kiʻekiʻe i 150px:
#container h1 Loaʻa: 0; pale: 0; whānui: 100%; ke kiʻekiʻe: 150px; ka lana: haʻalele; palena palena: # c00 solid 3px; }Mai poina i ka hoʻokaheʻana i kēia māhele me ka float: hema; waiwai. ʻO ke ki i ka kākauʻana i nā hoʻolālā CSSʻo ka hoʻokuʻuʻana i nā mea a pau -ʻo nā mea like ka laulā like me ka pahu. ʻO ia ala, uaʻike mauʻoe i kahi e waiho ai nā kumuhana ma kaʻaoʻao.
ʻO kahi keiki CSS ka mea koho i nāʻano i nā H1 wale nō i loko o ka mana #container.
05 o 09
No ka loaʻaʻana oʻekolu Kolamu, e hoʻomaka i ke kūkuluʻana iʻelua Kolamu
Ke kūkuluʻoe i kahi hoʻolālāʻekolu papa me CSS, ponoʻoe e māhele i kāuʻaoʻao i nā huiʻelua. No laila o kēia papahanaʻekolu, ka piko a me ka'ākau a hoʻonohonohoʻia a hoʻonohoʻia ma kaʻaoʻao o ka'āpana hema i kahi papaheluʻelua-pae kahi i hoʻonohonohoʻia ai ka paepae hema he 250px whānui, aʻo ka'āpana'ākau he 610px ākea (300 pakahi no nā kolamuʻelua , me 10px no ke kuʻi ma waena o lākou).
Ua like ka HTML me kēia:
E hōʻoia i kēlā me kēia mea. No ka mea,ʻo kā mākou mea e'ōlelo nei no ka mea hiki iāʻoe ke hoʻokuʻu aku iāʻoe. Ma ka hoʻopiʻi ma ka voluptate quis nostrud e hoʻokomo i ka hopena. No ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, no ka mea, e hoʻokau i ka hana. P> div>
Ut labore et dolor magna aliqua. E hele aku i kēia manawa e haʻi aku i ka inoa o ka'ōlelo. P> div>
ʻO ka mea kākau ma kahi o nā pou eʻikeʻia i kaʻikeʻana. Ua like ka CSS me kēia:
#container # col1 {whānui: 250px; ka lana: haʻalele; } #container # col2outer {whānui: 610px; ke lana: pololei; ka palena: 0; pale: 0; }ʻO ka paepae ma ka hema hema e lele ana i ka hema,ʻoiai e lele ana kekahi ma ka'ākau. Ma muli o ka whānui o ka laulā o 860px, aia he 10px gutter i waena o lākou.
06 o 09
E hoʻouka iʻelua papa ma loko o ka papahana lua nui
No ka hanaʻana iʻekolu koluma, e hoʻohui iʻelua māhele i loko o ka paepaeʻeluaʻoi aku, e like me kāu i hoʻohui ai i 2 div i loko o ka paepae pahu i ka hopena hope loa. Ua like ka HTML me kēia:
No ka mea, no ka mea, e hana i kekahi manawa e hoʻolālā i kekahi mea. Ut labore et dolor magna aliqua. E hele aku i kēia manawa i ka mea eʻike ai i ka'ōlelo Hawaiʻi. P> div>
Nā manawa kūpono no ka manawa, aʻo ka nohoʻana o ka manawa kūpono. Ullam corporis alahana hanahana, a me nā mea nui loa. Kuʻikahi ka'ōlelo a ke kahuna kiʻekiʻe i kahi manawa o ka heluhelu, no ka mea, e hoʻokau i ka manawa e hoʻohana ai i ka hana a me ka'ōlelo. P> div> div>
A like ka CSS me kēia:
# col2outer # col2mid {whānui: 300px; ka lana: haʻalele; } # col2outer # col2side {whānui: 300px; ke lana: pololei; }Ma hope o kēia mau pahuʻelua 300px i loko o kahi pahu nui 610px, e waiho houʻia he 10px gutter ma waena o lākou.
07 o 09
E hoʻohui i ka lalo
I kēia manawa, kapaʻia ke koena o kaʻaoʻao, hiki iāʻoe ke hoʻohui i ka lalo. E hoʻohana i ka hope hope me kahi 'foot foot' id, a e hoʻohui i nā mea iʻikeʻia eʻoe. Hiki iāʻoe ke hoʻohui i kahi palena ma luna, no laila eʻikeʻoe kahi i hoʻomaka ai.
ʻO ka HTML: