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
本实例的效果:
![](http://www.52css.com/attachments/month_0809/b200895214920.jpg)
本文作者:52CSS.com 李想 如需转载请建立本站链接(http://www.52css.com/),并且不得随意改动文章内容、保留此版权声明文本!
最顶部的是栏目的名称我爱52css与更多,然后下面分两个块,一块显示缩略图片,另一块显示文字连接,这两个部分都可以通过ul+li来实现。有了上面的分析开始下面的HTML编码:
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
<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的内部建立三个层,分别是:
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
list_title
list_pic
list_text
list_pic
list_text
下面开始具体深入的编写HTML代码:
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
<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编码:
整体声明:
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
* { 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,左右为水平居中对其,边框设置为蓝色实先(这里为了增加阴影效果)
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
#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/),并且不得随意改动文章内容、保留此版权声明文本!
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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;文字水平居中对齐。
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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;
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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列表”效果<<<