您的位置:首页 > DIV CSS模块 > 【 返回上一页

div css布局三图一标题列表布局 网页模块

上三图下标题和点击量的图文布局列表模块,采用纯DIV CSS布局,列表采用ul li列表布局实现的网页局部模板模块。

网页局部图文列表布局
网页DIV CSS布局图文列表

一、DIV CSS布局介绍

采用DIV CSS布局,使用ul li列表标签布局图文列表,一个li盒子一组内容(上三图下标题)。

首先,引入ThinkCSS初始化模板,在此基础修改为本实例使用的代码(HTML和CSS均修改来符号本模块)。

切出图片、点击量图标素材放入images文件夹。

关键:使用ul li布局有规律图文列表,每个li盒子装一组三图、一标题、一点击量。

二、关键代码介绍

CSS代码:

ul.imglist{ width:502px; margin:0 auto; overflow:hidden}
ul.imglist li{ border-bottom:1px solid #E5E5E5; text-align:left; width:100%; padding:6px 0; height:123px}
ul.imglist li .imgbox{height:95px}
ul.imglist li .imgbox img{ float:left; width:150px; height:95px; padding-right:17px}
ul.imglist li .txt{ padding-top:6px; height:22px; overflow:hidden}
ul.imglist li .txt h3{ float:left; font-size:16px; width:390px; overflow:hidden}
ul.imglist li .txt span{ float:right; padding-right:17px; overflow:hidden}
ul.imglist li .txt span a{ float:left; padding-left:22px; height:22px; background:url(ico-a.gif) no-repeat 4px 6px}
ul.imglist li .txt span a:hover{background:url(ico-hover.gif) no-repeat 4px 6px}
ul.imglist li:hover{ background:#F7F7F7}

设置ul class=imglist为盒子,li设置高度边框内边距

ul.imglist li .imgbox设置装三个图片的盒子;
ul.imglist li .imgbox img 设置图片靠左浮动 设置图片靠右间距(padding-right),设置图片宽度 高度
ul.imglist li .txt 设置装标题和点击量 浏览量盒子
ul.imglist li .txt h3 设置了标题直接使用h3标签,设置字体大小、盒子宽度、靠左(float:left)
ul.imglist li .txt span 直接使用span装点击量,靠右
ul.imglist li .txt span a 设置超链接点击量图标

HTML代码:

<ul class="imglist">
<li>
<div class="imgbox">
<a href="#"><img src="images/i150x95.jpg"></a>
<a href="#"><img src="images/i150x95.jpg"></a>
<a href="#"><img src="images/i150x95.jpg"></a>
</div>
<div class="txt">
<h3><a href="#">美国多地普降暴雪 积雪厚度最深达2米</a></h3>
<span><a href="#">126</a></span>
</div>
</li>
</ul>

以上是一组li布局与内容。 div css布局时注意嵌套结构关系。

三、在线演示与免费下载

1、在线演示

查看案例

2、div css网页局部模块免费打包下载

此网页模块是常见网页布局中一个小局部布局,所有样式设置均根据美工图与需求设置,多实践。

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/mokuai/1217.shtml

修订日期:2017-01-13 13:08 www.thinkcss.com ThinkCSS