CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。
今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。
列表的效果如图所示：
最顶部是栏目名称“我爱CSS
下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ul+li的无序列表。
有了上面的分析开始下面的HTML编码：
ExampleSource Code [www.52css.com]
<div id="list_52css_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_52css_com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。
下面开始具体深入的编写HTML代码：
ExampleSource Code [www.52css.com]
<div id="list_52css_com">
<div class="list_title">
<h3><a href="http://www.52css.com/" title="我爱CSS">我爱CSS 52CSS.com</a></h3>
<ul>
<li><a href="http://www.52css.com/css_websites_showcase/" title="CSS酷站欣赏">CSS酷站欣赏</a></li>
<li><a href="http://www.52css.com/default.asp" title="DivCSS教程">DivCSS教程</a></li>
<li><a href="http://www.52css.com/css_template/" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</div>
<div class="list_unit" id="l_showcase">
<p>
<a href="http://www.52css.com/css_websites_showcase/"><img src="1.jpg" alt="CSS酷站欣赏" /></a>
<span><a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a></span>
</p>
<ul>
<li>·<a href="http://www.52css.com/css_websites_showcase/view.asp?id=100">The Highland Fling</a></li>
<li>·<a href="http://www.52css.com/css_websites_showcase/view.asp?id=99">We Make Merch We Sell Merch</a></li>
<li>·<a href="http://www.52css.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.52css.com/css_websites_showcase/view.asp?id=97">Adventure Trekking in Nepal</a></li>
<li>·<a href="http://www.52css.com/css_websites_showcase/view.asp?id=96">Web Design Hamilton - VO2 Studio</a></li>
<li>·<a href="http://www.52css.com/css_websites_showcase/view.asp?id=95">We have been doing strategic consulting Digiwize</a></li>