html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局

css样式表代码：

html布局代码：

效果图：

html布局部分，可根据自己需要添加对应的div即可。

1、CSS关键样式单词解释

1)、ul.imglist{ margin:0 auto; width:536px; overflow:hidden}

使用margin:0 auto，让ul结构布局居中；

使用overflow:hidden，因为ul的子级使用float属性会产生浮动，所以使用清除子级使用float对父级产生不能撑开问题；

使用宽度width:536px;固定宽度让子级li准确一排只排3个效果

2)、ul.imglist li{ float:left; padding:4px 8px; width:160px}

float:left，让li靠左开始并列；

padding:4px 8px设置li与li盒子之间间距；

width:160px 必须设置固定好li宽度(宽度值通过ps软件的切片工具测得)

3)、ul.imglist li img{ display:block; width:160px; height:90px}

display:block对图片设置独占一行；

width:160px; height:90px必须固定设置好图片高度宽度

4)、ul.imglist li span{ display:block; width:100%; heigh