今天我們共同學習一款常能用到的「圖文混排CSS清單」的製作。首先從分析此清單的特點，然後編寫HTML程式碼，最終應用CSS樣式來實現最終的效果。
此實例的效果：
本文作者：52CSS.com 李想 如需轉載請建立本站連結（http://www.52css.com/），且不得隨意改動文章內容、保留此版權聲明文字！
最頂部的是欄目的名稱我愛52css與更多，然後下面分兩個塊，一塊顯示縮略圖片，另一塊顯示文字連接，這兩個部分都可以通過ul+li來實現。有了上面的分析開始下面的HTML編碼：
Example Source Code
[www.downcodes.com] <div id="wrap">
<div class="list">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul class="list_text"></ul>
</div>
</div>
將所有的元素放入id為wrap的圖層中，設定它的邊框顏色為#e5f2f8，這是為了讓他看起來有陰影的效果，
然後再他的內部建立一個層list，在list的內部建立三個層，分別是：
Example Source Code
[www.downcodes.com] list_title
list_pic
list_text
下面開始具體深入的編寫HTML程式碼：
Example Source Code
[www.downcodes.com] <div id="wrap">
<div class="list">
<div class="list_title">
<h3>我愛52css</h3>
<span><a href="#">更多</a></span>
</div>
<ul class="list_pic">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">downcodes .com</a></span></li>
<li><a href="/u/info_img/2009-06/11/7852_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=9">DivCSS佈局實例</a></span></li>
<li><a href="/u/info_img/2009-06/11/8437_quote.gif" /></a><span><a href="http://www.downcodes.com/css_template/" >模版下載</a></span></li>
<li><a href="/u/info_img/2009-06/11/3408_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=3">DivCSS教學</a></span></li>
</ul>
<div class="clear"></div>
<ul class="list_text">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">定義列表dl打造圖文並茂的CSS列表元素</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">CSS網頁佈局實例：以適當的標籤建立具有語意的表格</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">DivCSS佈局實例：很實用的圖文混排CSS列表- 富有語意</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">DivCSS佈局實例用dl dt dd來製作清單</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">DivCSS佈局實例：三行單列上下固定高度中間自適應</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
在list_title層內h3左浮動創建標題，span右浮動創建更多連接在list_pic層內創建ul+li圖片左浮動；
在list_text層內建立ul+li建立新聞清單；
在最底部，放置一個類別為clear的層來清除浮動。
有了上面的基礎開始下面的CSS編碼：
整體聲明：
Example Source Code
[www.downcodes.com] * { margin:0; padding:0; font-size:12px; color:#666; list-style:none;}
a{ color:#666666; text-decoration:none;}
a:hover{ color:#2764b4; text-decoration:underline;}
設定整個層wrap的樣式，寬度為450px,上下邊距為30px,左右為水平居中對其，邊框設定為藍色實先（這裡為了增加陰影效果）
Example Source Code
[www.downcodes.com] #wrap{ width:450px; margin:30px auto; border:1px solid #e5f2f8; overflow:hidden;}
.list{ width:448px; border:1px solid #a4a4a4;}
標題部分list_title的樣式定義：
設定寬度為426px，上下內邊距為0，左右為10px
欄位名稱h3元素向左浮動；寬度為300px;
設定span元素向右浮動，寬度為60px;文字右對齊，並設定鏈接
Example Source Code
[www.downcodes.com] .list_title{ width:426px; padding:0 10px; border:1px solid #fff; background:#f2e9da; height:22px; line-height:22px;}
.list_title h3{ float:left; width:300px;}
.list_title span{ float:right; width:60px; text-align:right;}
圖片層list_pic的樣式定義：
首先覺定使用ul列表，寬度設定為433px；
要注意的是內邊距的設定：padding:15px 0 0 15px;
（右側內邊距之所以設定為0，是因為li的間距問題，這樣更有力頁面的表現，您也可以將它設為：padding:15px 15px 0 15px;對比效果）
li設定圖片塊的大小94px，間距margin:0 14px 0 0;
滑鼠懸停的情況下圖片的邊框顏色由藍色變成灰色；
設定連結文字樣式，
將span轉換為塊元素。 span內的連結同樣轉換為區塊元素，設定寬度與高度分別是94px; 20px；行距設定為20px；文字水平居中對齊。
Example Source Code
[www.downcodes.com] .list_pic{width:433px; padding:15px 0 0 15px;}
.list_pic li{ display:inline; float:left; width:94px; margin:0 14px 0 0; overflow:hidden;}
.list_pic li img{ width:90px; height:70px;}
.list_pic li a img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ display:block; width:94px; height:20px; line-height:22px; text-align:center;}
.list_pic li span a{ display:block;}
文字層list_text的樣式定義：
透過ul+li定義新聞列表，需要注意的是時間的設定span向右浮動，並且文字是居右的藍色虛線寫在上邊框上面，並且設定上邊距為10px;
Example Source Code
[www.downcodes.com] .list_text{width:426px; margin:10px; padding:10px 0 0; border-top:1px dotted #2764b4; }
.list_text li{ float:left; width:100%; line-height:22px;}
.list_text li span{ float:right; text-align:right;}
最後是清除浮動：.clear{ clear:both;}
