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

div css 左图右标题列表模块布局 详解教程

采用DIV CSS布局左边图,右边标题与点击量的图文列表布局,同时会采用ul li列表标签来布局此网页局部模块。

需要布局出效果图

网页小局部案例效果图

一、关键CSS属性代码

float:设置靠左(float:left)靠右(float:right
width:设置宽度
height:设置宽度
border-bottom:设置下边框
background:设置背景
padding:设置各处内边距
等样式

二、关键标签

div:布局大结构
span:布局小细节
ul li:布局列表
img:引入图片

等标签

三、引入ThinkCSS初始化模板

使用ThinkCSS初始化模板节约初始化CSS样式编写、HTML代码基础等准备时间,又能兼容各大浏览器。

下载ThinkCSS初始化模板,在此基础上进行开发。

将HTML代码中多余内容删除修改符号本布局案例。

修改后HTML代码
修改后HTML代码

将CSS文件代码修改成符号本模块需求。

修改后CSS代码
修改后CSS代码

将切出图片素材放入images文件夹内

images文件夹内CSS文件与图片素材
images文件夹内CSS文件与图片素材

四、开发制作此DIV CSS布局模块

布局思维,采用ul li列表标签布局,实现每个li盒子内放一组内容(图文)。大图靠左(float:left),标题和点击量内容靠右(float:left),细节宽度、高度、背景颜色、字体颜色边框颜色使用PS软件获取。

布局具体代码与分析如下:

1、CSS代码

ul#main{ width:500px; margin:0 auto}
ul#main li{ overflow:hidden; height:95px; padding:6px 0;display:block; border-bottom:1px solid #E4E4E4}
ul#main li img{ float:left; width:150px; height:95px}
ul#main li .txt{ float:right; width:326px; padding:7px 15px 0 0;text-align:left}
ul#main li .txt h3{ height:60px; line-height:20px; padding-bottom:6px; overflow:hidden; font-size:16px }
ul#main li .txt div{height:22px}
ul#main li .txt div a{ float:left; padding-left:22px; height:22px; background:url(ico-a.gif) no-repeat 4px 6px}
ul#main li .txt div a:hover{background:url(ico-hover.gif) no-repeat 4px 6px}
ul#main li:hover{ background:#F7F7F7}

2、DIV CSS布局的CSS代码解析图
ul#main为此小局部模块盒子,设置css布局居中与宽度;
ul#main li对ul内li标签设置高度,下边框,独占一行块(display:block),padding上下边距,overflow:hidden隐藏超出内容和清除浮动作用;
ul#main li img 对图片设置靠左,高度、宽度;
ul#main li .txt 设置靠右盒子用于装标题和浏览量;
ul#main li .txt h3 设置标题盒子使用H3标签,设置行高、高度、字体大小等样式
ul#main li .txt div 设置点击量盒子
ul#main li .txt div a 设置点击量A超链接靠左设置背景图片,靠左padding-left距离
ul#main li .txt div a:hover 设置鼠标悬停时背景图片改变
ul#main li:hover 设置鼠标悬停li上时对应li 背景颜色改变

3、HTML代码

<ul id="main">
<li>
<a href="#"><img src="images/i150x95.jpg" /></a>
<div class="txt">
<h3><a href="#">重庆最小房车售1.98万 当场被买走</a></h3>
<div><a href="#">1712</a></div>
</div>
</li>

<li>
<a href="#"><img src="images/i150x95.jpg" /></a>
<div class="txt">
<h3><a href="#">金融硕士返乡卖多肉年入40万 50天赚大学4年学费</a></h3>
<div><a href="#">1712</a></div>
</div>
</li>
</ul>

4、HTML代码解析
以上使用ul li布局,每组内容使用一个li盒子布局,li里包括图片、内容。具体标签均设置需求的CSS样式

5、最终效果截图

图文列表布局案例截图
图文列表布局案例截图

五、在线演示与下载

DIV CSS左图右文网页小局部模块模板布局在线演示与下载如下

1、在线演示

查看案例

2、打包下载

六、小结

学会ThinkCSS初始化模板引入;
学会初始化模板引入后进行需求修改;
学会图文布局;
学会float、背景、宽度、高度等应用;
下来要学会PS软件获取美工图的图片素材切出、宽度、高度、背景色、字体色等颜色值获得。

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

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