Ang layout sa CSS nagkinahanglan nga imong hunahunaon ang layout sa imong website ingon nga usa ka bug-os, ug unya kuhaa ang mga piraso ug ipatapik sila. Pagkat-on unsaon sa pagtukod sa yano nga 3-kolum nga layout sa CSS.
01 sa 09
I-drawing ang imong Layout
Mahimo nimong ibutang ang imong layout sa papel o sa usa ka programa sa graphics . Kung aduna ka'y usa ka wire-frame o bisan mas dako nga plano sa hunahuna, pasimpleha kini sa mga batakang mga kahon nga naglangkob sa site. Kini nga disenyo nga nag-uban niining artikuloha adunay tulo ka mga kolum sa nag-unang sulod nga lugar, maingon man usa ka header ug footer. Kon imong tan-awon pag-ayo, imong makita nga ang tulo ka mga kolum dili managsama sa gilapdon.
Human nimo makuha ang imong layout nga gibira, mahimo ka magsugod sa paghunahuna sa mga sukod. Kini nga panig-ingnan nga disenyo adunay mga mosunod nga mga sukaranan:
- Dili sobra sa 900 ka pixel ang gilapdon
- 20 px gutter sa wala
- 10 px tali sa mga kolum ug mga linya
- Mga kolum nga 250px, 300px, ug 300px ang gilapdon
- Ang ibabaw nga laray 150px ang gitas-on
- Ang ubos nga laray 100px ang gitas-on
02 sa 09
Isulat ang Basic HTML / CSS ug Create a Container Element
Tungod kay kini nga panid mahimong balido nga dokumento sa HTML, magsugod sa usa ka walay sulod nga sudlanan sa HTML
Idugang sa batakang mga estilo sa CSS aron dili makuha ang mga margin, mga utlanan, ug mga paddling sa panid . Samtang adunay ubang mga estilo sa estilo sa CSS alang sa mga bag-ong dokumento, kini nga mga estilo mao ang labing diyutay nga kinahanglan nimo nga makuha ang limpyo nga layout. Idugang kini sa ulo sa imong dokumento: