ตัวอย่าง DIVCSS: สร้างรายการบล็อกทั่วไป

<div id="ห่อ">
<คลาส div="รายการ">
<p class="วันที่"></p>
<h2></h2>
<p class="เมตา"></p>
<p></p>
</div>
</div>

<div id="ห่อ">
<คลาส div="รายการ">
<p class="date">กันยายน <b>03</b></p>
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">ตัวอย่างเค้าโครง DIV CSS: สิบขั้นตอนในการใช้เค้าโครงเว็บไซต์ css! </a></h2>
<p class="meta">จาก: <a href="http://www.downcodes.com/">www.downcodes.com</a> | ผู้แก้ไข: <a ​​href="#">downcodes.com </a> |. <a href="#">ไม่มีการตอบกลับ</a></p>
<p>แท็บใหม่: เมื่อใดก็ตามที่คุณเปิดแท็บใหม่ คุณจะเห็นเว็บไซต์ที่คุณเข้าชมบ่อยที่สุด เครื่องมือค้นหาที่ใช้บ่อยที่สุด หน้าบุ๊กมาร์กล่าสุด แท็บที่เพิ่งปิด ฯลฯ
ทางลัดแอพ: เปิดใช้งานเว็บแอปโดยไม่ต้องเปิดเบราว์เซอร์ ทางลัดของแอปพลิเคชันจะโหลดแอปพลิเคชันออนไลน์ที่คุณใช้บ่อยโดยตรง </p>
</div>
<คลาส div="รายการ">
<p class="date"><b>26 สิงหาคม</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">กำหนด list dl เพื่อสร้างองค์ประกอบรายการ CSS พร้อมรูปภาพและข้อความ</a></h2>
<p class="meta">จาก: <a href="http://www.downcodes.com/">www.downcodes.com</a> | ผู้แก้ไข: <a ​​href="#">downcodes.com </a> |. <a href="#">ไม่มีการตอบกลับ</a></p>
<p>แท็บใหม่: เมื่อใดก็ตามที่คุณเปิดแท็บใหม่ คุณจะเห็นเว็บไซต์ที่คุณเข้าชมบ่อยที่สุด เครื่องมือค้นหาที่ใช้บ่อยที่สุด หน้าบุ๊กมาร์กล่าสุด แท็บที่เพิ่งปิด ฯลฯ
ทางลัดแอพ: เปิดใช้งานเว็บแอปโดยไม่ต้องเปิดเบราว์เซอร์ ทางลัดของแอปพลิเคชันจะโหลดแอปพลิเคชันออนไลน์ที่คุณใช้บ่อยโดยตรง </p>
</div>
<คลาส div="รายการ">
<p class="date"><b>22 สิงหาคม</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">ตัวอย่างเมนู CSS+JS สุดเจ๋งที่สามารถซ่อนและเลื่อนออกได้</a></h2>
<p class="meta">จาก: <a href="http://www.downcodes.com/">www.downcodes.com</a> | ผู้แก้ไข: <a ​​href="#">downcodes.com </a> |. <a href="#">ไม่มีการตอบกลับ</a></p>
<p>แท็บใหม่: เมื่อใดก็ตามที่คุณเปิดแท็บใหม่ คุณจะเห็นเว็บไซต์ที่คุณเข้าชมบ่อยที่สุด เครื่องมือค้นหาที่ใช้บ่อยที่สุด หน้าบุ๊กมาร์กล่าสุด แท็บที่เพิ่งปิด ฯลฯ
ทางลัดแอพ: เปิดใช้งานเว็บแอปโดยไม่ต้องเปิดเบราว์เซอร์ ทางลัดของแอปพลิเคชันจะโหลดแอปพลิเคชันออนไลน์ที่คุณใช้บ่อยโดยตรง </p>
</div>
</div>

* { ระยะขอบ:0; การขยาย:0; ขนาดตัวอักษร:12px; สี:#666;
ร่างกาย { พื้นหลัง:#ebead1;}
a{ สี:#514f42;การตกแต่งข้อความ:none;}
a:โฮเวอร์ { สี:#669900;}

#wrap{ ความกว้าง:650px; ระยะขอบ:30px อัตโนมัติ;}
.list{ width:650px; padding:0 0 20px 0; ระยะขอบ:0 0 20px 0; border-bottom:1px ประ #666633;}

.list .date{ float:left;width:76px; height:58px; text-align: center;font-size :10px;font-weight: สี:#FFF;}
.list b{display:block; font-size:40px; color:#FFF;

.list .meta{ระยะขอบ:0 0 25px 0; สี:#979680;}
.list h2 a{ขนาดตัวอักษร: 1.8em;
.list p { จอแสดงผล: บล็อก ความสูงบรรทัด: 18px;}