Contoh DIVCSS: Membuat daftar blog umum

<div id="bungkus">
<div kelas="daftar">
<p kelas="tanggal"></p>
<h2></h2>
<p kelas="meta"></p>
<p></p>
</div>
</div>

<div id="bungkus">
<div kelas="daftar">
<p class="tanggal"><b>03 September</b></p> September
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">Contoh tata letak DIV CSS: sepuluh langkah menggunakan tata letak situs web css! </a></h2>
<p class="meta">Dari: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> |. <a href="#">Tidak ada balasan?</a></p>
<p>Tab baru: Setiap kali Anda membuka tab baru, Anda akan secara intuitif melihat situs web yang paling sering Anda kunjungi, mesin pencari yang paling sering digunakan, halaman yang baru saja ditandai, tab yang baru saja ditutup, dll. .
Pintasan Aplikasi: Aktifkan aplikasi web tanpa membuka browser. Pintasan aplikasi langsung memuat aplikasi online yang sering Anda gunakan. </p>
</div>
<div kelas="daftar">
<p class="tanggal">Agustus <b>26</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">Tentukan list dl untuk membuat elemen daftar CSS dengan gambar dan teks</a></h2>
<p class="meta">Dari: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> |. <a href="#">Tidak ada balasan?</a></p>
<p>Tab baru: Setiap kali Anda membuka tab baru, Anda akan secara intuitif melihat situs web yang paling sering Anda kunjungi, mesin pencari yang paling sering digunakan, halaman yang baru saja ditandai, tab yang baru saja ditutup, dll. .
Pintasan Aplikasi: Aktifkan aplikasi web tanpa membuka browser. Pintasan aplikasi langsung memuat aplikasi online yang sering Anda gunakan. </p>
</div>
<div kelas="daftar">
<p class="tanggal"><b>22 Agustus</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">Contoh menu CSS+JS keren yang bisa disembunyikan dan digeser keluar</a></h2>
<p class="meta">Dari: <a href="http://www.downcodes.com/">www.downcodes.com</a> | Editor: <a href="#">downcodes.com </a> |. <a href="#">Tidak ada balasan?</a></p>
<p>Tab baru: Setiap kali Anda membuka tab baru, Anda akan secara intuitif melihat situs web yang paling sering Anda kunjungi, mesin pencari yang paling sering digunakan, halaman yang baru saja ditandai, tab yang baru saja ditutup, dll. .
Pintasan Aplikasi: Aktifkan aplikasi web tanpa membuka browser. Pintasan aplikasi langsung memuat aplikasi online yang sering Anda gunakan. </p>
</div>
</div>

* { margin:0; bantalan:0; ukuran font:12px; warna:#666; gaya daftar:tidak ada; keluarga font:Arial, Helvetica, sans-serif;}
tubuh{ latar belakang:#ebead1;}
a{ color:#514f42;teks-dekorasi:tidak ada;}
a:arahkan kursor{ warna:#669900;}

#bungkus{ lebar:650px; margin:30px otomatis;
.list{ lebar:650px; padding:0 0 20px 0; margin:0 0 20px 0; batas bawah:1px putus-putus #666633;}

.list .tanggal{ float:kiri;lebar:76px; tinggi:58px; margin:0 20px 0 0; padding:2px 0 0; latar belakang:#514F42;transformasi teks: huruf besar;perataan teks: tengah;ukuran font :10px;berat font: tebal; warna:#FFF;}
.list b{tampilan:blok; ukuran font:40px; warna:#FFF;

.list .meta{margin:0 0 25px 0;
.list h2 a{ukuran font: 1,8em;
.list p{ tampilan:blok; tinggi garis:18px;}