Tata letak CSS mbutuhake sampeyan mikir tata letak situs web minangka kabeh, banjur njupuk potongan lan sijine bebarengan. Katrangan cara mbangun tata letak 3-kolom prasaja kanthi CSS.
01 saka 09
Gambar Panjenengan Layout
Sampeyan bisa nggambar tata letak ing kertas utawa ing program grafis . Yen sampeyan wis duwe kawat kabel utawa rancangan sing luwih jembar, umpetake menyang kothak dhasar sing mbentuk situs kasebut. Desaine sing ngiringi artikel iki nduweni telung kolom ing area isi utama, uga minangka header lan footer. Yen katon rapet, sampeyan bisa ndeleng yen telung kolom ora padha karo jembar.
Sawise sampeyan duwe tata letak sing ditarik metu, sampeyan bisa miwiti pamikiran dimensi. Desain conto iki bakal duwe dimensi dhasar ing ngisor iki:
- Ora luwih saka 900 piksel
- 20 px gutter ing sisih kiwa
- 10 px antarane kolom lan baris
- Kolom sing ana 250px, 300px, lan 300px
- Baris paling dhuwur yaiku 150px
- Baris ngisor iki dhuwuré 100px
02 saka 09
Tulis Asil HTML / CSS lan Gawe Unsur Container
Awit kaca iki bakal dadi dokumen HTML sing bener, Mulai karo wadah HTML kosong
Nambah ing gaya CSS dhasar kanggo nol metu pinggir, wates, lan padding kaca . Nalika ana gaya CSS standar liyane kanggo dokumen anyar, gaya iki minangka minimal sampeyan kudu njaluk tata letak sing resik. Tambahake menyang kepala dokumen sampeyan: