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

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

网页DIV CSS布局图文列表

一、DIV CSS布局介绍

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

首先，引入HTML8初始化模板，在此基础修改为本实例使用的代码（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网页局部模块免费打包下载

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