CSS打造清單或類似清單的頁面元素，一直是大家著重與大家討論的話題。今天我們來共同學習一款常用的blog列表，關於列表我們已經學過很多種的做法，以下是您可以參考的範例：
本實例的效果圖：
首先來看他的結構，設定時間層date居左側，文章的標題h2,文章的描述層meta，文章的主題內容為p
Example Source Code
[www.downcodes.com]將所有的元素放入id為wrap的層中，
下面開始具體深入的編寫HTML程式碼：
Example Source Code
[www.downcodes.com] September 03
來自：www.downcodes.com | 編輯：downcodes.com | 沒有回覆?
新標籤頁：每當您開啟一個新的標籤頁，就會直觀地看到您最常造訪的網站、最常使用的搜尋引擎、最近加入書籤的頁面以及最近關閉的標籤頁等等。
應用程式捷徑：無需開啟瀏覽器即可啟用網頁應用程式。應用程式捷徑可以直接載入您常用的線上應用程式。
有了上面的基礎開始下面的CSS編碼：
整體聲明：
Example Source Code
[www.downcodes.com] * { margin:0; padding:0; font-size:12px; color:#666; list-style:none; font-family:Arial, Helvetica, sans-serif;}
body{ background:#ebead1;}
a{ color:#514f42;text-decoration:none;}
a:hover{ color:#669900;}
設定整個層wrap的樣式，寬度為650px；上下邊距為30px,左右為水平居中對齊list是設定每一個清單層，寬度為650px；
Example Source Code
[www.downcodes.com] #wrap{ width:650px; margin:30px auto; overflow:hidden;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:1px dashed #666633;}
設定時間左側浮動，寬76px; text-transform: uppercase;(小寫轉換成大寫)
Example Source Code
[www.downcodes.com] .list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0; background:#514F42;text-transform: uppercase;text-align:); :10px;font-weight: bold; color:#FFF;}
.list b{display:block; font-size:40px; color:#FFF; line-height:40px;}
設定標題描述層meta；設定它的下邊距為25px，是為了，主體內容可以左對齊不環繞。
Example Source Code
[www.downcodes.com] .list .meta{margin:0 0 25px 0; color:#979680;}
.list h2 a{font-size: 1.8em; }
.list p{ display:block; line-height:18px;}
