Kinakailangan ng layout ng CSS na iniisip mo ang layout ng iyong website bilang isang kabuuan, at pagkatapos ay kunin ang mga piraso at ilagay ang mga ito nang sama-sama. Alamin kung paano bumuo ng isang simpleng 3-haligi layout na may CSS.
01 ng 09Gumuhit ng iyong Layout
Maaari mong iguhit ang iyong layout sa papel o sa isang programa ng graphics. Kung mayroon ka nang isang wire-frame o kahit na mas malawak na disenyo sa isip, gawing simple ito sa mga pangunahing mga kahon na bumubuo sa site. Ang disenyo na kasama sa artikulong ito ay may tatlong haligi sa pangunahing lugar ng nilalaman, pati na rin ang isang header at footer. Kung titingnan mo nang mabuti, maaari mong makita na ang tatlong haligi ay hindi katumbas ng lapad.
Pagkatapos mong makuha ang iyong layout, maaari mong simulan ang pag-iisip ng mga sukat. Ang disenyo ng halimbawang ito ay magkakaroon ng mga sumusunod na pangunahing sukat:
- Hindi hihigit sa 900 pixel ang lapad
- 20 px kanal sa kaliwa
- 10 px sa pagitan ng mga hanay at hanay
- Ang mga haligi na 250px, 300px, at 300px ang lapad
- Ang taas na hanay ay 150px ang taas
- Ang hilera sa ilalim ay 100px ang taas
Isulat ang Pangunahing HTML / CSS at Lumikha ng isang Container Element
Dahil ang pahinang ito ay isang wastong dokumentong HTML, Magsimula sa isang walang laman na lalagyan ng HTML
Idagdag sa mga pangunahing estilo ng CSS upang i-zero ang mga margin ng pahina, mga hangganan, at mga paddings. Habang may iba pang karaniwang mga estilo ng CSS para sa mga bagong dokumento, ang mga estilo na ito ay ang minimum na kailangan mo upang makakuha ng malinis na layout. Idagdag ang mga ito sa ulo ng iyong dokumento:
Upang simulan ang paggawa ng layout, ilagay sa isang elemento ng lalagyan. Minsan ang mangyayari na maaari mong mapupuksa ang lalagyan mamaya, ngunit para sa karamihan ng mga nakapirming lapad na mga layout, ang pagkakaroon ng lalagyan ng elemento ay ginagawang mas madaling pamahalaan ang iba't ibang mga Web browser. Kaya sa katawan ilagay ito: At sa CSS style sheet, ilagay ang: Tinutukoy ng lalagyan kung gaano kalawak ang mga nilalaman ng web page, gayundin ang anumang mga margin sa paligid ng labas at padding sa loob. Para sa dokumentong ito, ang lalagyan ay 870px ang lapad na may 20 pixel na kanal sa kaliwa. Ang kanal ay naka-set up sa isang estilo ng margin, ngunit ang padding sa lalagyan ay nahihilig upang maiwasan ang anumang mga elemento mula sa pagiging mas malawak na bilang ng lalagyan. #container { lapad: 870px; margin: 0 0 0 20px; / * itaas na kanang ibaba kaliwa * / padding: 0; } Kung i-save mo ang iyong dokumento ngayon, mahirap makita ang lalagyan dahil wala ito roon. Kung nagdagdag ka ng teksto ng placeholder, makikita mo nang mas malinaw ang elemento ng lalagyan. Kung paano ka magpasiya na estilo ang hilera ng header ay depende ng maraming sa kung ano ang nasa loob nito. Kung ang header ng row ay magkakaroon lamang ng logo graphic at headline, pagkatapos ay gumamit ng isang headline tag ( Ang HTML para sa hanay ng header ay pupunta sa tuktok ng lalagyan at ganito ang hitsura nito: Pagkatapos, upang maitakda ang mga estilo sa ibabaw nito, isang pulang hangganan ay idinagdag sa ibaba upang makita mo kung saan ito natapos, ang mga gilid at padding ay wala na, ang lapad ay nakatakda sa 100% at ang taas sa 150px: #container h1 { margin: 0; padding: 0; lapad: 100%; taas: 150px; lumutang pakaliwa; border-bottom: # c00 solid 3px; } Huwag kalimutan na lumutang ang elementong ito kasama ang float: kaliwa; ari-arian. Ang susi sa pagsusulat ng mga layout ng CSS ay upang lumutang ang lahat - kahit na mga bagay na pareho ang lapad ng lalagyan. Sa ganoong paraan, lagi mong nalalaman kung nasaan ang mga elemento sa pahina. Ang isang CSS descendant selector na inilapat estilo lamang sa H1 elemento na nasa loob ng elemento ng #container. Kapag bumuo ka ng isang tatlong haligi layout na may CSS, kailangan mong hatiin ang iyong layout sa mga grupo ng dalawa. Kaya para sa layout na ito ng tatlong haligi, ang gitnang at kanang haligi at pinangkat at inilagay sa tabi ng kaliwang haligi sa isang dalawang haligi na layout kung saan ang kaliwang hanay ay 250px ang lapad, at ang kanang haligi ay 610px ang lapad (300 bawat isa para sa dalawang haligi , kasama ang 10px para sa kanal sa pagitan nila). Mukhang ganito ang HTML: Kumuha ka ng isang komentaryo mula sa. Kung nais mong mag-sign up para sa iyong mga kaibigan, mangyaring mag-email sa amin. Sa reprehenderit sa voluptate kung saan ang pagsasanay ay nawala sa pamamagitan ng mga panuntunan. Ang mga ito ay dapat na mag-alala sa mga manggagawa sa trabaho upang mag-aral sa mga ito mula sa mga komisyon. Ang mga ito ay isang maliit na kampanya, ngunit ang mga oras na ito ay maaaring maging sanhi ng mga problema sa trabaho. Ang labour et dolore magna aliqua. Ang mga ito ay dapat na mabawasan ang iyong pera. Ang teksto ng placeholder sa mga hanay ay ginagawang mas nakikita ang mga ito kapag sinusubok. Mukhang ganito ang CSS: #container # col1 { lapad: 250px; lumutang pakaliwa; } #container # col2outer { lapad: 610px; lumutang: tama; margin: 0; padding: 0; } Ang haligi sa kaliwa ay floated sa kaliwa, habang ang iba pang ay floated sa kanan. Dahil ang kabuuang lapad ng parehong mga haligi ay 860px, mayroong isang 10px na kanal sa pagitan nila. Upang lumikha ng tatlong hanay, magdagdag ng dalawang div sa loob ng mas malawak na pangalawang haligi, tulad ng iyong idinagdag ang 2 div sa loob ng hanay ng lalagyan sa huling hakbang. Mukhang ganito ang HTML: Ang mga ito ay isang maliit na kampanya, ngunit ang mga oras na ito ay maaaring maging sanhi ng mga problema sa trabaho. Ang labour et dolore magna aliqua. Ang mga ito ay dapat na mabawasan ang iyong pera. Nam libero tempore, na kung saan ay maaaring umupo sa isang lugar na kung saan maaari mong makita.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum na ito ay maaaring magamit sa isang araw na ito, ngunit maaari mong i-click ang lahat ng mga bagay na ito upang makagawa ng isang bagay upang makamit ito. At ganito ang hitsura ng CSS: # col2outer # col2mid { lapad: 300px; lumutang pakaliwa; } # col2outer # col2side { lapad: 300px; lumutang: tama; } Dahil ang mga dalawang 300px na malawak na kahon ay nasa loob ng 610px wide box, magkakaroon muli ng isang 10px na kanal sa pagitan nila. Ngayon na ang iba pang mga pahina ay naka-istilong, maaari kang magdagdag sa footer. Gumamit ng isang huling div na may "footer" id, at magdagdag ng nilalaman upang makita mo ito. Maaari ka ring magdagdag ng hangganan sa itaas, kaya malalaman mo kung saan ito nagsisimula. Ang HTML: Ang CSS: #container #footer {
lumutang pakaliwa;
lapad: 870px;
hangganan-itaas: # c00 solid 3px;
} 08 ng 09 Ngayon na natapos mo na ang layout, maaari mong simulan ang pagdaragdag ng iyong sariling mga personal na estilo at nilalaman. Tandaan na ang mga hangganan sa header at footer ay idinagdag upang ipakita ang mga seksyon ng layout, hindi partikular para sa disenyo. Narito ang buong dokumento, HTML, at CSS: Estilo ang Lalagyan
Gumamit ng Headline Tag para sa Header
) ay mas mayaman kaysa sa paggamit ng isang
Aking Header Row
Upang Kumuha ng Tatlong Hanay, Magsimula sa pamamagitan ng Mga Dalawang Haligi ng Building
Magdagdag ng Dalawang Haligi Sa loob ng Malawak na Haligi ng Haligi
Idagdag sa Footer
Idagdag sa Iyong Mga Personal na Estilo at Nilalaman
Ang Huling HTML / CSS
