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%; height:30px; line-height:30px; background:#F6F6F6}
display:block让span设置宽度高度生效同时独占一行效果；
width:100%; height:30px; 设置宽度和高度，宽度100%会继承父级li宽度相等于设置（160px宽度，设置100%宽度好处是随父级宽度而自动计算出100%宽度与父级宽度保持一致）；
line-height:30px; 设置文字在30px中垂直居中；
background:#F6F6F6设置span背景颜色

2、HTML关键点
使用ul li组合列表标签布局，每个li盒子放图片+文字标题内容，li盒子直接使用a超链接标签将图片和文字内容包裹着，使用img标签引入图片，使用span标签与img形成两个盒子而CSS分别设置独占一行功能效果的样式（display:block），避免文字和图片排成一排而非上下结构。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有