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 09
Gumuhit 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
02 ng 09
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: