DivCSS实例：上下结构的图文混排CSS列表

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

 

最顶部的是栏目的名称我爱52css与更多，然后下面分两个块，一块显示缩略图片，另一块显示文字连接，这两个部分都可以通过ul+li来实现。有了上面的分析开始下面的HTML编码：

<div id="wrap"> <div class="list"> <div class="list_title">   <ul class="list_pic"></ul> <ul class="list_text"></ul>

 

将所有的元素放入id为wrap的层中，设置它的边框颜色为#e5f2f8，这是为了让他看起来有阴影的效果，
然后再他的内部建立一个层list，在list的内部建立三个层，分别是：

list_title list_pic list_text

 

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

<div id="wrap"> <div class="list"> <div class="list_title"> <h3>我爱52css</h3> <span><a href="#">更多</a></span>   <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">   <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 class="clear">

　　在list_title层内h3左浮动创建标题，span右浮动创建更多连接
在list_pic层内创建ul+li图片左浮动；
在list_text层内创建ul+li创建新闻列表；
在最底部，放置一个类为clear的层来清除浮动。

有了上面的基础开始下面的CSS编码：
整体声明：

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

设置整个层wrap的样式，宽度为450px,上下边距为30px,左右为水平居中对其，边框设置为蓝色实先（这里为了增加阴影效果）

 

#wrap{ width:450px; margin:30px auto; border:1px solid #e5f2f8; overflow:hidden;} .list{ width:448px; border:1px solid #a4a4a4;}

 

　　标题部分list_title的样式定义：
设置宽度为426px，上下内边距为0，左右为10px
栏目名称h3元素向左浮动；宽度为300px;
设置span元素向右浮动，宽度为60px;文字右对齐，并设置链接

.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_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；文字水平居中对齐。

.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_text的样式定义：
通过ul+li定义新闻列表，需要注意的是时间的设置span向右浮动，并且文字是居右的
蓝色虚线写在上边框上面，并且设置上边距为10px;

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

　最后是清除浮动：.clear{ clear:both;}