今天我们共同学习一款经常能用到的“图文混排CSS列表”的制作。首先从分析一下此列表的特点,然后编写HTML代码,最终应用CSS样式实现最终的效果。
本实例的效果:
本文作者:52CSS.com 李想 如需转载请建立本站链接(http://www.52css.com/),并且不得随意改动文章内容、保留此版权声明文本!
最顶部的是栏目的名称我爱52css与更多,然后下面分两个块,一块显示缩略图片,另一块显示文字连接,这两个部分都可以通过ul+li来实现。有了上面的分析开始下面的HTML编码:
Example Source Code
[www.downcodes.com]
将所有的元素放入id为wrap的层中,设置它的边框颜色为#e5f2f8,这是为了让他看起来有阴影的效果,
然后再他的内部建立一个层list,在list的内部建立三个层,分别是:
Example Source Code
[www.downcodes.com]
list_title
list_pic
list_text
下面开始具体深入的编写HTML代码:
Example Source Code
[www.downcodes.com]
在list_title层内h3左浮动创建标题,span右浮动创建更多连接
在list_pic层内创建ul+li图片左浮动;
在list_text层内创建ul+li创建新闻列表;
在最底部,放置一个类为clear的层来清除浮动。
有了上面的基础开始下面的CSS编码:
整体声明:
Example Source Code
[www.downcodes.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;}
设置整个层wrap的样式,宽度为450px,上下边距为30px,左右为水平居中对其,边框设置为蓝色实先(这里为了增加阴影效果)
Example Source Code
[www.downcodes.com]
#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;文字右对齐,并设置链接
Example Source Code
[www.downcodes.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_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.downcodes.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_text的样式定义:
通过ul+li定义新闻列表,需要注意的是时间的设置span向右浮动,并且文字是居右的
蓝色虚线写在上边框上面,并且设置上边距为10px;
Example Source Code
[www.downcodes.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;}
最后是清除浮动:.clear{ clear:both;}