DivCSS布局實例：很實用的圖文混排CSS列表
最頂部是欄目名稱「模板無憂 MB5U.com 」與欄目導航「CSS酷站欣賞 DivCSS教程 CSS模板下載」。欄目名稱用標題元素Hx來表示，欄目導航可以用ul li的無序列表。 下部的三個鏈接區域形式基本雷同，左側是圖片鏈接，右側是文章列表元素。將左側的圖片與文字看成是一個段落，用p標籤來表示，右側的文章列表用ul li的無序列表。有了上面的分析開始下面的HTML編碼：
Example Source Code
<div id="list_mb5u_com"><div class="list_title"></div><div class="list_unit" id="l_showcase"></div><div class="list_unit" id="l_article"></div><div class="list_unit" id="l_templates"></div></div>
將所有元素置入id為list_mb5u_com的層中，以便於進行整體布局的控制。在其內部建立四個層，它們分別是：list_title、l_showcase、l_article、l_templates。對於下部的三個內容層，應用同樣的class，為list_unit。下面開始具體深入的編寫HTML代碼：Example Source Code
<div id="list_mb5u_com"><div class="list_title"><h3><a href="http://www.mb5u.com/" title="模板無憂">模板無憂 MB5U.com</a></h3><ul><li><a href="http://www.mb5u.com/css_websites_showcase/" title="CSS酷站欣賞">CSS酷站欣賞</a></li><li><a href="http://www.mb5u.com/default.asp" title="DivCSS教程">DivCSS教程</a></li><li><a href="http://www.mb5u.com/css_template/" title="CSS模板下載">CSS模板下載</a></li></ul></div><div class="list_unit" id="l_showcase"><p><a href="http://www.mb5u.com/css_websites_showcase/"><img src="1.jpg" alt="CSS酷站欣賞" /></a><span><a href="http://www.mb5u.com/css_websites_showcase/">CSS酷站欣賞</a></span></p><ul><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=100">The Highland Fling</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=99">We Make Merch We Sell Merch</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=98">Kingsfield Church Connecting with God Each Other and the World</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=97">Adventure Trekking in Nepal</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=96">Web Design Hamilton - VO2 Studio</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=95">We have been doing strategic consulting Digiwize</a></li><li>·<a href="http://www.mb5u.com/css_websites_showcase/view.asp?id=94">Modern Arboricultural Services</a></li></ul></div><div class="list_unit" id="l_article"><p><a href="http://www.mb5u.com/default.asp"><img src="2.jpg" alt="DivCSS教程" /></a><span><a href="http://www.mb5u.com/default.asp">Div CSS教程</a></span></p><ul><li>·<a href="http://www.mb5u.com/article.asp?id=668">CSS控制Table單元格強制換行與強制不換行 </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=667">DivCSS實例：CSS菜單Flash效果 用圖片模擬實現 </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=666">DivCSS布局實例 用dl dt dd來製作列表 </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=660">符合web標準的嵌入Flash的方法-JS調用 </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=656">CSS經驗：如何治理好樣式CSS？ </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=655">DIV CSS實例：橙藍互換的CSS翻頁效果 </a></li><li>·<a href="http://www.mb5u.com/article.asp?id=650">div css表單布局技巧及CSS Form表單設計技巧 </a></li></ul></div><div class="list_unit" id="l_templates"><p><a href="http://www.mb5u.com/css_template/"><img src="3.jpg" alt="CSS模板下載" /></a><span><a href="http://www.mb5u.com/css_template/">CSS模板下載</a></span></p><ul><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=100">CS模板下載 - Scuba Holding</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=99">CS模板下載 - Keeping It Clean</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=98">CS模板下載 - Culture Shock</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=97">CS模板下載 - Simply CSS</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=96">CS模板下載 - Doctors Office</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=95">CS模板下載 - Mint Chocolate Chip</a></li><li>·<a href="http://www.mb5u.com/css_template/view.asp?id=94">CS模板下載 - Andrea Layout</a></li></ul></div><div class="clear"></div></div>
在list_title層，置入h3元素作為欄目名稱，建立一個ul列表放置欄目導航。 下部的三個內容層（list_unit），分別置入段落標籤p，引入鏈接圖片與文字；建立一個ul放置文章列表。 在最底部，放置一個類為clear的層來清除浮動。有了上面的基礎開始下面的CSS編碼：Example Source Code
* { margin:0; padding:0; font-size:13px; color:#000; list-style:none;}a { color:#03c; text-decoration:none;}a:hover { text-decoration:underline;}#list_mb5u_com { width:418px; margin:30px auto; border:1px solid #999;}
整體布局聲明： 設置整個層的樣式，寬度為418px，上下外邊距為30px，左右為自動實現水平居中對齊。邊框設置為1px的灰色實線。
Example Source Code
.list_title { width:418px; height:32px; border-bottom:1px solid #999; background:#f2f9fd; overflow:hidden;}.list_title h3 { float:left; width:160px; line-height:32px; text-indent:15px;}.list_title h3 a { color:#c00;}.list_title h3 a:hover { color:#03c;}.list_title ul { float:right; width:230px;}.list_title ul li { float:left; line-height:32px; padding:0 5px;}.list_title ul li a { font-size:12px; color:#333;}
標題區域list_title層的CSS樣式定義： 設置list_title層寬度與高度分別是：418px、32px；下邊框為1px的灰色實線；設置背景色及溢出隱藏。 欄目名稱h3元素向左浮動；寬度160px；行距32px實現文字垂直居中對齊；文本縮進為15px。緊接著設置欄目名稱h3鏈接的樣式。 欄目導航ul列表的CSS樣式，向右浮動；寬度為230px；設置列表項li向左浮動；行距為32px；上下內邊距為0，左右內邊距為5px；緊接著設置鏈接文字大小與顏色。Example Source Code
.list_unit { float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted #9AC4E9;}.list_unit { display:inline;}
內容層（list_unit）整體樣式定義： 向左浮動；寬度為388px，左外邊距為15px，上內邊距15px、下內邊距8px；設置下邊框為淺藍色的虛線。 設置為內聯是避免IE的雙邊距BUG。Example Source Code
.list_unit p { float:left; width:164px;}.list_unit p a { display:block; border:1px solid #03c;}.list_unit p a:hover { border:1px dashed #00f;}.list_unit p a img { width:160px; height:120px; margin:1px; border:0;}.list_unit span { display:block;}.list_unit span a { display:block; width:164px; height:22px; border:0; line-height:22px; text-align:center;}.list_unit span a:hover { border:0; color:#c00;}
內容層（list_unit）內圖片鏈接樣式定義： 整個段落p，向左浮動，寬度為164px。 設置鏈接為塊元素；設置邊框為1px藍色實線。 鏈接懸念狀態下，邊框變為1px深藍色虛線。 鏈接元素內的圖片定義，寬度與高度分別是：160px、120px；外邊距為1px；邊框為0（消除圖片鏈接瀏覽器的默認邊框）。 設置鏈接文字樣式，由於上面的設置是整體的，因而在下面的內容中，注重將上面的一些內容層疊掉。 將span轉換為塊元素。span內的鏈接同樣轉換為塊元素，設置寬度與高度分別是164px、22px；設置邊框為0（層疊先前的設置）；行距設置為22px；文字水平居中對齊。 span內的鏈接文字懸停狀態下，設置邊框為0；顏色設置為#c00；顯示下劃線。Example Source Code
.list_unit ul { float:right; width:216px; margin-top:-5px;}.list_unit ul li { float:left; width:216px; line-height:22px; color:#039; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
內容層（list_unit）內文章列表樣式定義： 整個列表ul向右浮動；寬度為216px；上外邊距為-5px。 列表項li的CSS樣式設置，向左浮動，寬度為216px；行距為22px；顏色為#039；後面的三個屬性是實現「截字」效果，mb5u.com網站上有具體的介紹。（請注重此效果在FF下無效）
Example Source Code
#l_templates { border-width:0;}.clear { clear:both;}
最後的CSS設置： 最後一個內容層（list_unit）是沒有下邊框的，此層的id為l_templates。因而在此進行層疊定義，消除此層的邊框即可。 清除浮動是必須的，否則在FF下可能會出現混亂。這是一個良好的編碼實踐。
Ps:自己又敲了一遍，真的蠻不錯的，對學習CSS的有好處....
推薦閱讀：
※div+css文章段落怎麼豎排顯示？
※關於讓一個未知寬高的img在一個div中居中的問題？
※在HTML&CSS中，如何最科學地將文字顯示在圖片正中間？
※div 疑惑？
※CSS 中 a 標籤為什麼不能繼承父類的顏色？