ZT：上下结构的图文混排CSS列表
今天我们共同学习一款经常能用到的“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。在52CSS.com以前的文章中，有着许多相似的页面元素的CSS布局教程。您还可以参考：
DivCSS布局实例：很实用的图文混排CSS列表 - 富有语义
http://www.52css.com/article.asp?id=669
DivCSS实例教程：新颖别致的网站栏目列表元素
http://www.52css.com/article.asp?id=759
定义列表dl打造图文并茂的CSS列表元素
http://www.52css.com/article.asp?id=813
本实例的效果：
本文作者：52CSS.com 李想 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
最顶部的是栏目的名称我爱52css与更多，然后下面分两个块，一块显示缩略图片，另一块显示文字连接，这两个部分都可以通过ul+li来实现。有了上面的分析开始下面的HTML编码：
Example Source Code [www.52css.com]<div id="wrap">
<div class="list">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul class="list_text"></ul>
</div>
</div>
<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 [www.52css.com]list_title
list_pic
list_text
list_pic
list_text
下面开始具体深入的编写HTML代码：
Example Source Code [www.52css.com]<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="http://www.52css.com/"><img src="img/tu_04.png" /></a><span><a href="http://www.52css.com/">52css.com</a></span></li>
<li><a href="http://www.52css.com/default.asp?cateID=9"><img src="img/tu_01.png" /></a><span><a href="http://www.52css.com/default.asp?cateID=9">DivCSS布局实例</a></span></li>
<li><a href="http://www.52css.com/css_template/"><img src="img/tu_02.png" /></a><span><a href="http://www.52css.com/css_template/">模版下载</a></span></li>
<li><a href="http://www.52css.com/default.asp?cateID=3"><img src="img/tu_03.png" /></a><span><a href="http://www.52css.com/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="http://www.52css.com/article.asp?id=813">定义列表dl打造图文并茂的CSS列表元素 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=720">CSS网页布局实例：以合适的标签创建具有语义的表格</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=669">DivCSS布局实例：很实用的图文混排CSS列表 - 富有语义 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=666">DivCSS布局实例 用dl dt dd来制作列表 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=636">DivCSS布局实例：三行单列 上下固定高度 中间自适应 </a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="list">
<div class="list_title">
<h3>我爱52css</h3>
<span><a href="#">更多</a></span>
</div>
<ul class="list_pic">
<li><a href="http://www.52css.com/"><img src="img/tu_04.png" /></a><span><a href="http://www.52css.com/">52css.com</a></span></li>
<li><a href="http://www.52css.com/default.asp?cateID=9"><img src="img/tu_01.png" /></a><span><a href="http://www.52css.com/default.asp?cateID=9">DivCSS布局实例</a></span></li>
<li><a href="http://www.52css.com/css_template/"><img src="img/tu_02.png" /></a><span><a href="http://www.52css.com/css_template/">模版下载</a></span></li>
<li><a href="http://www.52css.com/default.asp?cateID=3"><img src="img/tu_03.png" /></a><span><a href="http://www.52css.com/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="http://www.52css.com/article.asp?id=813">定义列表dl打造图文并茂的CSS列表元素 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=720">CSS网页布局实例：以合适的标签创建具有语义的表格</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=669">DivCSS布局实例：很实用的图文混排CSS列表 - 富有语义 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=666">DivCSS布局实例 用dl dt dd来制作列表 </a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.52css.com/article.asp?id=636">DivCSS布局实例：三行单列 上下固定高度 中间自适应 </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 [www.52css.com]* { margin:0; padding:0; font-size:12px; color:#666; list-style:none;}
a{ color:#666666; text-decoration:none;}
a:hover{ color:#2764b4; text-decoration:underline;}
a{ color:#666666; text-decoration:none;}
a:hover{ color:#2764b4; text-decoration:underline;}
设置整个层wrap的样式，宽度为450px,上下边距为30px,左右为水平居中对其，边框设置为蓝色实先（这里为了增加阴影效果）
Example Source Code [www.52css.com]#wrap{ width:450px; margin:30px auto; border:1px solid #e5f2f8; overflow:hidden;}
.list{ width:448px; border:1px solid #a4a4a4;}
.list{ width:448px; border:1px solid #a4a4a4;}
标题部分list_title的样式定义：
设置宽度为426px，上下内边距为0，左右为10px
栏目名称h3元素向左浮动；宽度为300px;
设置span元素向右浮动，宽度为60px;文字右对齐，并设置链接
本文作者：52CSS.com 李想 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
Example Source Code [www.52css.com].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;}
.list_title h3{ float:left; width:300px;}
.list_title span{ float:right; width:60px; text-align:right;}
图片层list_pic的样式定义：
首先觉定使用ul列表，宽度设定为433px；
需要注意的是内边距的设置：padding:15px 0 0 15px;
（右侧内边距之所以设置为0，是因为li的间距问题，这样更有力页面的表现，您也可以将它设置为：padding:15px 15px 0 15px;对比效果）
li设置图片块的大小94px，间距margin:0 14px 0 0;
鼠标悬停的情况下图片的边框颜色由蓝色变成灰色；
设置链接文字样式，
将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是94px; 20px；行距设置为20px；文字水平居中对齐。
Example Source Code [www.52css.com].list_pic{width:433px; padding:15px 0 0 15px;}
.list_pic li{ display:inline; float:left; width:94px; margin:0 14px 0 0; overflow:hidden;}
.list_pic li img{ width:90px; height:70px;}
.list_pic li a img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ display:block; width:94px; height:20px; line-height:22px; text-align:center;}
.list_pic li span a{ display:block;}
.list_pic li{ display:inline; float:left; width:94px; margin:0 14px 0 0; overflow:hidden;}
.list_pic li img{ width:90px; height:70px;}
.list_pic li a img{ border:2px solid #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li span{ display:block; width:94px; height:20px; line-height:22px; text-align:center;}
.list_pic li span a{ display:block;}
文字层list_text的样式定义：
通过ul+li定义新闻列表，需要注意的是时间的设置span向右浮动，并且文字是居右的
蓝色虚线写在上边框上面，并且设置上边距为10px;
Example Source Code [www.52css.com].list_text{width:426px; margin:10px; padding:10px 0 0; border-top:1px dotted #2764b4; }
.list_text li{ float:left; width:100%; line-height:22px;}
.list_text li span{ float:right; text-align:right;}
.list_text li{ float:left; width:100%; line-height:22px;}
.list_text li span{ float:right; text-align:right;}
最后是清除浮动：.clear{ clear:both;}
▲▲▲ >>>点击查看最终的“上下结构的图文混排CSS列表”效果<<<
