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


　　CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。

　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。

列表的效果如图所示：

　　最顶部是栏目名称“教程 ”与栏目导航“CSS酷站欣赏 DivCSS教程 CSS模板下载”。栏目名称用标题元素Hx来表示，栏目导航可以用ul li的无序列表。
　　下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ul li的无序列表。

有了上面的分析开始下面的HTML编码：

Example Source Code []

<div id="list__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__com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。

下面开始具体深入的编写HTML代码：

Example Source Code []

<div id="list__com">
<div class="list_title">
<h3><a href="" title="教程">教程 </a></h3>
<ul>
<li><a href="" title="CSS酷站欣赏">CSS酷站欣赏</a></li>
<li><a href="" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href=""><img src="1.jpg" alt="CSS酷站欣赏" /></a>
<span><a href="">CSS酷站欣赏</a></span>
</p>
<ul>
<li>·<a href="?id=100">The Highland Fling</a></li>
<li>·<a href="?id=99">We Make Merch We Sell Merch</a></li>
<li>·<a href="?id=98">Kingsfield Church Connecting with God Each Other and the World</a></li>
<li>·<a href="?id=97">Adventure Trekking in Nepal</a></li>
<li>·<a href="?id=96">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="?id=95">We have been doing strategic consulting Digiwize</a></li>
<li>·<a href="?id=94">Modern Arboricultural Services</a></li>
</ul>
</div>
<div class="list_unit" id="l_article">
<p>
<a href=""><img src="2.jpg" alt="DivCSS教程" /></a>
<span><a href="">Div CSS教程</a></span>
</p>
<ul>
<li>·<a href="?id=668">CSS控制Table单元格强制换行与强制不换行 </a></li>
<li>·<a href="?id=667">DivCSS实例：CSS菜单Flash效果 用图片模拟实现 </a></li>
<li>·<a href="?id=666">DivCSS布局实例 用dl dt dd来制作列表 </a></li>
<li>·<a href="?id=660">符合web标准的嵌入Flash的方法-JS调用 </a></li>
<li>·<a href="?id=656">CSS经验：如何治理好样式CSS？ </a></li>
<li>·<a href="?id=655">DIV CSS实例：橙蓝互换的CSS翻页效果 </a></li>
<li>·<a href="?id=650">div css表单布局技巧及CSS Form表单设计技巧 </a></li>
</ul>
</div>
<div class="list_unit" id="l_templates">
<p>
<a href=""><img src="3.jpg" alt="CSS模板下载" /></a>
<span><a href="">CSS模板下载</a></span>
</p>
<ul>
<li>·<a href="?id=100">CS模板下载 - Scuba Holding</a></li>
<li>·<a href="?id=99">CS模板下载 - Keeping It Clean</a></li>
<li>·<a href="?id=98">CS模板下载 - Culture Shock</a></li>
<li>·<a href="?id=97">CS模板下载 - Simply CSS</a></li>
<li>·<a href="?id=96">CS模板下载 - Doctors Office</a></li>
<li>·<a href="?id=95">CS模板下载 - Mint Chocolate Chip</a></li>
<li>·<a href="?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 []