网站首页 > 网页设计教程 > WEB标准化 > DivCSS实例教程：上下结构的图文混排CSS列表

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

作者：互联网
时间：2009-06-11 17:32:41

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

　　本实例的效果：

　　本文作者：52***.com ;李想如需转载请建立本站链接（http://ww***css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　最顶部的是栏目的名称我爱52css与更多，然后下面分两个块，一块显示缩略图片，另一块显示文字连接，这两个部分都可以通过ul+li来实现。有了上面的分析开始下面的HTML编码：

div css xhtml xml Example Source Code

Example Source Code [www.downcodes.com]

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

div css xhtml xml Example Source Code

Example Source Code [www.downcodes.com]

list_title
list_pic
list_text

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

div css xhtml xml Example Source Code

Example Source Code [www.downcodes.com]

我爱52css

更多

downcodes.com

DivCSS布局实例

模版下载

DivCSS教程

[2007-09-11]•定义列表dl打造图文并茂的CSS列表元素

[2007-09-11]•CSS网页布局实例：以合适的标签创建具有语义的表格

[2007-09-11]•DivCSS布局实例：很实用的图文混排CSS列表 - 富有语义

[2007-09-11]•DivCSS布局实例用dl dt dd来制作列表

[2007-09-11]•DivCSS布局实例：三行单列上下固定高度中间自适应

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

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

div css xhtml xml Example Source Code

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,左右为水平居中对其，边框设置为蓝色实先（这里为了增加阴影效果）

div css xhtml xml Example Source Code

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;文字右对齐，并设置链接

div css xhtml xml Example Source Code

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

div css xhtml xml Example Source Code

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;

div css xhtml xml Example Source Code

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

上一篇：百度不能说的秘密搜索引擎为什么抵制SEO？

下一篇： DIVCSS实例：打造一款常见的Blog列表

相关阅读

DIVCSS实例：打造一款常见的Blog列表 2009-06-11
DivCSS经验：三种实用CSS清除浮动的方法 2009-06-20
DivCSS布局基础：如何正确的定义CSS伪类？ 2009-06-07
全面理解javascript的caller,callee,call,apply概念 2009-06-08
Windows 7下,搭建PHP开发环境(Apache,PHP,ZendOptimizer,MySQL,Zend) 2010-08-08
MSBuild, NAnt, NUnit, MSTest所带来的不爽 2009-07-01

人气下载推荐

相关应用

获取MSN,Live,google,Yahoo 好友列表

获取MSN,Live,google,Yahoo 好友列表

服饰商城]小程序,分销,团队,推广,分红,一键发圈,开源,电商,H5,积分,秒杀,分享,会员,支付,私域,变现

服饰商城]小程序,分销,团队,推广,分红,一键发圈,开源,电商,H5,积分,秒杀,分享,会员,支付,私域,变现

热门文章

推荐游戏

换一换