Jika menggunakan metode desain tabel, biasanya tata letaknya tiga baris dengan baris atas, tengah, dan bawah. 
. Jika menggunakan DIV, saya pertimbangkan untuk menggunakan tiga kolom untuk layout, seperti ini 
.
2. Tentukan gaya tubuh
Pertama tentukan gaya isi seluruh halaman. Kodenya adalah sebagai berikut:
isi {MARGIN: 0 piksel;
BANTALAN: 0px;
LATAR BELAKANG: url(../images/bg_logo.gif) #FEFEFE tidak ada pengulangan di kanan bawah;
KELUARGA FONT: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
WARNA: #666;
UKURAN FONT:12px;
TINGGI GARIS: 150%;
Fungsi kode di atas telah dijelaskan secara rinci pada tutorial hari sebelumnya, dan semua orang harus memahaminya secara sekilas. Margin tepi didefinisikan sebagai 0; warna latar belakang #FEFEFE, gambar latar belakang adalah bg_logo.gif, dan gambar terletak di sudut kanan bawah halaman, tanpa pengulangan ukuran font ditetapkan sebagai font 12px; warnanya #666; tinggi garisnya adalah 150%.
3. Tentukan div utama
Pertama kali saya menggunakan layout CSS, saya memutuskan untuk menggunakan layout tiga kolom dengan lebar tetap (yang lebih sederhana dari desain resolusi adaptif, hoho, jangan bilang saya malas, terapkan yang sederhana dulu untuk mendapatkan kepercayaan diri !). Tentukan lebar kiri, tengah dan kanan masing-masing menjadi 200:300:280, yang didefinisikan sebagai berikut dalam CSS:
/*Menentukan gaya kolom kiri halaman*/
#kiri{ LEBAR:200px;
MARGIN: 0 piksel;
BANTALAN: 0px;
LATAR BELAKANG: #CDCDCD;
}
/*Menentukan gaya kolom pada halaman*/
#tengah{ POSISI: mutlak;
KIRI: 200 piksel;
ATAS:0 piksel;
LEBAR: 300 piksel;
MARGIN: 0 piksel;
BANTALAN: 0px;
LATAR BELAKANG: #DADADA;
}
/*Menentukan gaya kolom kanan halaman*/
#kanan{ POSISI: mutlak;
KIRI: 500 piksel;
ATAS:0 piksel;
LEBAR: 280 piksel;
MARGIN: 0 piksel;
BANTALAN: 0px;
LATAR BELAKANG: #FFF; }
Catatan: Saya menggunakan POSITION: absolute; saat menentukan div kolom tengah dan kolom kanan, lalu mendefinisikan LEFT:200px;TOP:0px; dan LEFT:500px;TOP:0px; posisi absolut lapisan. Tentukan kolom tengah menjadi 200px dari batas kiri halaman dan 0px dari atas; tentukan kolom kanan menjadi 500px dari batas kiri halaman dan 0px dari atas;.
Saat ini, kode seluruh halaman adalah:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<kepala>
<title>Selamat datang di "Perancang Web" baru: tutorial dan promosi standar web</title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<meta http-equiv="Isi-Bahasa" content="gb2312" />
<meta content="all" name="robot" />
<meta name="penulis" content="ajie(at)netease.com,阿杰" />
<meta name="Hak Cipta" content=" www.w3cn.org , hak cipta gratis, reproduksi apa pun" />
<meta name="description" content="Perancang web baru, situs tutorial standar web, mempromosikan penerapan standar web di Tiongkok." />
<meta content="standar web, tutorial, web, standar, xhtml, css, kegunaan, aksesibilitas" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="ikon pintasan" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</kepala>
<tubuh>
<div id="left">Kolom kiri halaman</div>
<div id="middle">Kolom tengah halaman</div>
<div id="right">Kolom kanan halaman</div>
</tubuh>
</html>
Saat ini, efek halaman hanya dapat melihat tiga persegi panjang abu-abu yang disandingkan dan gambar latar belakang. Tapi saya ingin tingginya layar penuh, apa yang harus saya lakukan?
4.100% tinggi adaptif?
Untuk menjaga ketiga kolom pada ketinggian yang sama, saya mencoba mengatur "tinggi:100%;" di #kiri, #tengah dan #kanan, tetapi ternyata tidak ada efek ketinggian adaptif yang diharapkan sama sekali. Setelah beberapa kali mencoba, saya harus memberikan ketinggian absolut pada setiap div: "height:1000px;", dan seiring bertambahnya konten, saya perlu terus-menerus memperbaiki nilai ini. Apakah tidak ada cara untuk mengatur ketinggiannya? Saat studi Ajie semakin mendalam, dia menemukan solusi yang fleksibel. Faktanya, tidak perlu menetapkan 100% sama sekali. Kita telah terlalu terkurung oleh pemikiran tabel.