DIV+CSS kode tata letak halaman web yang umum digunakan

Baris dan kolom tunggal

Berikut kutipannya:

isi { margin: 0 piksel; bantalan: 0 piksel; perataan teks: tengah }

#content { margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel lebar: 370 piksel;

Dua baris dan satu kolom

Berikut kutipannya:

isi { margin: 0px; bantalan: 0px; perataan teks: tengah;}

#content-top { margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel lebar: 370 piksel;}

#content-end {margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel lebar: 370 piksel;}

Tiga baris dan satu kolom

Berikut kutipannya:

isi { margin: 0 piksel; bantalan: 0 piksel; perataan teks: tengah }

#content-top { margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel; lebar: 370 piksel;

#content-mid { margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel; lebar: 370 piksel;

#content-end { margin-kiri:otomatis; margin-kanan:otomatis; lebar: 400 piksel; lebar: 370 piksel;

Baris tunggal dan dua kolom

Berikut kutipannya:

#bodycenter { lebar: 700px;margin-kanan: otomatis; margin-kiri: otomatis;meluap: otomatis }

#bodycenter #dv1 {float: kiri; lebar: 280 piksel;}

#bodycenter #dv2 {float: kanan; lebar: 410 piksel;}

Dua baris dan dua kolom

Berikut kutipannya:

#header{ lebar: 700px; margin-kanan: otomatis;margin-kiri: otomatis; luapan: otomatis;}

#bodycenter { lebar: 700 piksel; margin-kanan: otomatis; margin-kiri: otomatis;

#bodycenter #dv1 { float: kiri; lebar: 280 piksel;}

#bodycenter #dv2 { float: kanan;lebar: 410px;}

Tiga baris dan dua kolom

Berikut kutipannya:

#header{ lebar: 700 piksel; margin-kanan: otomatis; margin-kiri: otomatis }

#bodycenter {lebar: 700 piksel; margin-kanan: otomatis; margin-kiri: otomatis }

#bodycenter #dv1 { float: kiri;lebar: 280px;}

#bodycenter #dv2 { float: kanan; lebar: 410 piksel;}

#footer{ lebar: 700px; margin-kanan: otomatis; margin-kiri: otomatis;

Baris tunggal dan tiga kolom

penentuan posisi mutlak

Berikut kutipannya:

#kiri { posisi: absolut; atas: 0 piksel; kiri: 0 piksel;

#tengah {margin: 20px 190px 20px 190px }

#kanan {posisi: absolut;atas: 0px; kanan: 0px lebar: 120px;}

posisi mengambang satu

xhtml:

Berikut kutipannya:

<div id="melengkung">

<div id="kolom">

<div id="column1">Ini adalah kolom pertama</div>

<div id="column2">Ini adalah kolom kedua</div>

<div kelas="hapus"></div>

</div>

<div id="column3">Ini adalah kolom ketiga</div>

<div kelas="hapus"></div>

</div>

CSS:

Berikut kutipannya:

#bungkus{ lebar:100%; tinggi:otomatis;}

#kolom{ mengapung:kiri; lebar:60%;}

#kolom1{ float:kiri; lebar:30%;}

#kolom2{ float:kanan; lebar:30%;}

#kolom3{ mengapung:kanan; lebar:40%;}

.clear{ jelas:keduanya;}

posisi mengambang dua

xhtml:

Berikut kutipannya:

<div id="pusat" kelas="kolom">

<h1>Ini adalah konten utama.</h1>

</div>

<div id="kiri" kelas="kolom">

<h2>Ini adalah sidebar kiri.</h2>

</div>

<div id="kanan" kelas="kolom">

<h2>Ini adalah sidebar kanan.</h2>

</div>

CSS:

Berikut kutipannya:

body {margin: 0;padding-kiri: 200px;padding-kanan: 190px;min-width: 240px;}

.column {posisi: relatif;float: kiri;}

#pusat {lebar: 100%;}

#kiri {lebar: 180 piksel; kanan: 240 piksel; margin-kiri: -100%;}

#kanan {lebar: 130 piksel;margin-kanan: -100%;}

Dua baris dan tiga kolom

xhtml:

Berikut kutipannya:

<div id="header">Inilah baris paling atas</div>

<div id="melengkung">

<div id="kolom">

<div id="column1">Ini adalah kolom pertama</div>

<div id="column2">Ini adalah kolom kedua</div>

<div kelas="hapus"></div>

</div>

<div id="column3">Ini adalah kolom ketiga</div>

<div kelas="hapus"></div>

</div>

CSS:

Berikut kutipannya:

#header{lebar:100%; tinggi:otomatis;}

#bungkus{ lebar:100%; tinggi:otomatis;}

#kolom{ mengapung:kiri; lebar:60%;}

#kolom1{ float:kiri; lebar:30%;}

#kolom2{ float:kanan; lebar:30%;}

#kolom3{ mengapung:kanan; lebar:40%;}

.clear{ jelas:keduanya;}

Tiga baris dan tiga kolom

xhtml:

Berikut kutipannya:

<div id="header">Inilah baris paling atas</div>

<div id="melengkung">

<div id="kolom">

<div id="column1">Ini adalah kolom pertama</div>

<div id="column2">Ini adalah kolom kedua</div>

<div kelas="hapus"></div>

</div>

<div id="column3">Ini adalah kolom ketiga</div>

<div kelas="hapus"></div>

</div>

<div id="footer">Ini adalah baris paling bawah</div>

CSS:

Berikut kutipannya:

#header{lebar:100%; tinggi:otomatis;}

#bungkus{ lebar:100%; tinggi:otomatis;}

#kolom{ mengapung:kiri; lebar:60%;}

#kolom1{ float:kiri; lebar:30%;}

#kolom2{ float:kanan; lebar:30%;}

#kolom3{ mengapung:kanan; lebar:40%;}

.clear{ jelas:keduanya;}

#footer{lebar:100%; tinggi:otomatis;}

PS: Contoh yang tercantum di sini adalah contoh yang umum digunakan, bukan untuk tujuan penelitian. Untuk setiap kotak, margin, padding, boeder, dan atribut lainnya tidak disetel!