今天我们共同学习一款经常能用到的“图文混排 CSS列表”的制作。首先从分析一下此列表的特点，然后编写 HTML代码，最终应用 CSS样式实现最终的效果。在 以前的文章中，有着许多相似的页面元素的 CSS布局教程。您还可以参考： DivCSS布局实例：很实用的图文混排 CSS列表 -富有语义 /article.asp?id=669 DivCSS实例教程：新颖别致的网站栏目列表元素 /article.asp?id=759定义列表 dl打造图文并茂的 CSS列表元素 /article.asp?id=813
本实例的效果：
本文作者：李想如需转载请建立本站链接(/),并且不得随意改动文章内容、保留此版权声明文本！最顶部的是栏目的名称我爱 52css与更多，然后下面分两个块，一块显示缩略图片，另一块显示文字连接，这两个部分都可以通过 ul+li来实现。有了上面的分析开始下面的 HTML编码：
Example Source Code[]
<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[] list_title list_pic list_text
下面开始具体深入的编写 HTML代码：
Example Source Code[]<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="/"><img src="img/tu_04.png"/></a><span><a href="h ttp:///"></a></span></li>
<li><a href="/default.asp?cateID=9"><img src="img/tu_01.png"/></ a><span><a href="/default.asp?cateID=9">DivCSS布局实例</a></span></li><li><a href="/css_template/"><img src="img/tu_02.png"/></a><spa n><a href="/css_template/">模版下载</a></span></li><li><a href="/default.asp?cateID=3"><img src="img/tu_03.png"/></ a><span><a href="/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="/article.asp?id=813">定义列表 dl打造图文并茂的 CSS列表元素</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=720">CSS网页布局实例：以合适的标签创建具有语义的表格</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=669">DivCS S布局实例：很实用的图文混排 CSS列表 -富有语义</a></li><li><span>[2007-09-11]</span> <a href="http://ww
/article.asp?id=666">DivCS S布局实例用 dl dt dd来制作列表</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=636">DivCS S布局实例：三行单列上下固定高度中间自适应</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
.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;}
搜索“diyifanwen.net”或“第一范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，第一范文网，提供最新教学研究上下结构的图文混排CSS列表全文阅读和word下载服务。
相关推荐：
蝶翼天使