DivCSS布局实例：很实用的图文混排CSS列表-富有语义-CSS布局实例

<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>

<div id="list_mb5u_com">
<div class="list_title">
<h3><a href="http://www.21shipin.com/" title="模板无忧">模板无忧 MB5U.com</a></h3>
<ul>
<li><a href="http://www.21shipin.com/css_websites_showcase/" title="CSS酷站欣赏">CSS酷站欣赏</a></li>
<li><a href="http://www.21shipin.com/default.asp" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="http://www.21shipin.com/css_template/" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href="http://www.21shipin.com/css_websites_showcase/"><img src="1.jpg" alt="CSS酷站欣赏" /></a>
<span><a href="http://www.21shipin.com/css_websites_showcase/">CSS酷站欣赏</a></span>
</p>
<ul>
<li>·<a href="http://www.21shipin.com/css_websites_showcase/view.asp?id=100">The Highland Fling</a></li>
<li>·<a href="http://www.21shipin.com/css_websites_showcase/view.asp?id=99">We Make Merch We Sell Merch</a></li>
<li>·<a href="http://www.21shipin.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.21shipin.com/css_websites_showcase/view.asp?id=97">Adventure Trekking in Nepal</a></li>
<li>·<a href="http://www.21shipin.com/css_websites_showcase/view.asp?id=96">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="http://www.21shipin.com/css_websites_showcase/view.asp?id=95">We have been doing strategic consulting Digiwize</a></li>
<li>·<a href="http://www.21shipin.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.21shipin.com/default.asp"><img src="2.jpg" alt="DivCSS教程" /></a>
<span><a href="http://www.21shipin.com/default.asp">Div CSS教程</a></span>
</p>
<ul>
<li>·<a href="http://www.21shipin.com/article.asp?id=668">CSS控制Table单元格强制换行与强制不换行 </a></li>
<li>·<a href="http://www.21shipin.com/article.asp?id=667">DivCSS实例：CSS菜单Flash效果 用图片模拟实现 </a></li>
<li>·<a href="http://www.21shipin.com/article.asp?id=666">DivCSS布局实例 用dl dt dd来制作列表 </a></li>
<li>·<a href="http://www.21shipin.com/article.asp?id=660">符合web标准的嵌入Flash的方法-JS调用 </a></li>
<li>·<a href="http://www.21shipin.com/article.asp?id=656">CSS经验：如何治理好样式CSS？ </a></li>
<li>·<a href="http://www.21shipin.com/article.asp?id=655">DIV CSS实例：橙蓝互换的CSS翻页效果 </a></li>
<li>·<a href="http://www.21shipin.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.21shipin.com/css_template/"><img src="3.jpg" alt="CSS模板下载" /></a>
<span><a href="http://www.21shipin.com/css_template/">CSS模板下载</a></span>
</p>
<ul>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=100">CS模板下载 - Scuba Holding</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=99">CS模板下载 - Keeping It Clean</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=98">CS模板下载 - Culture Shock</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=97">CS模板下载 - Simply CSS</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=96">CS模板下载 - Doctors Office</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=95">CS模板下载 - Mint Chocolate Chip</a></li>
<li>·<a href="http://www.21shipin.com/css_template/view.asp?id=94">CS模板下载 - Andrea Layout</a></li>
</ul>
</div>
<div class="clear"></div>
</div>

* { 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;}

.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_unit { float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted #9AC4E9;}
.list_unit { display:inline;}

.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 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;}

#l_templates { border-width:0;}
.clear { clear:both;}