html5图片列表纵向,div css图片列表实例布局案例ul li布局

DIV CSS布局图文列表布局案例 ul li图文列表

使用div css ul li布局图文列表小局部案例，学习图文列表布局实际案例。

div+css图文布局案例图

本案例在DIVCSS5模板基础上进行(让开发项目或案例兼容更好)，采用ul li列表标签+css布局，简单易学易懂。

一、css实例布局思维分析   -   TOP

1、ul li列表布局选择。因为此CSS DIV布局实例是典型列表型布局，可以将每个li里放入一组图片和标题。

2、对ul设置好总css宽度；对ul里li设置好宽度并且浮动靠左(float:left)这样让li并列显示，一排显示不完自动换行继续显示图文li内容。

3、获得高度宽度。PS软件获取li内容宽度(间距错外)宽度为160px，图片宽度为160px，css高度为90px。

4、每个li上下左右有相同间距，所以要获取一组图文与相邻图文的间距距离。我们采用对li使用padding设置间距(使用PS软件测的padding:6px 8px的值)

以上分析我们采用ul li布局，li里放上图片下文字(图片使用img标签，文字使用span盒子包裹，同时设置span背景色)。

二、准备素材   -   TOP

1、DIVCSS5初始化模板

为了兼容各大浏览器，开发案例或项目建议下载使用。使用前先修改预先设置的样式(DIVCSS5初始化模板)。

2