div+css（ulli）实现图⽚上⽂字下列表布局css样式表代码：
html布局代码：
效果图：
html布局部分，可根据⾃⼰需要添加对应的div即可。
1、CSS关键样式单词解释
css特效文字1)、ul.imglist{ :0 auto; width:536px; }
使⽤margin:0 auto，让ul结构布局居中；
使⽤overflow:hidden，因为ul的⼦级使⽤float属性会产⽣浮动，所以使⽤清除⼦级使⽤float对⽗级产⽣不能撑开问题；
使⽤宽度width:536px；固定宽度让⼦级li准确⼀排只排3个效果
2)、ul.imglist li{ float:left; :4px 8px; width:160px}
，让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}
让span设置宽度⾼度⽣效同时独占⼀⾏效果；
width:100%; height:30px; 设置宽度和⾼度，宽度100%会继承⽗级li宽度相等于设置（160px宽度，设置100%宽度好处是随⽗级宽度⽽⾃动计算出100%宽度与⽗级宽度保持⼀致）；
:30px; 设置⽂字在30px中垂直居中；
:#F6F6F6设置span
2、HTML关键点
使⽤ul li组合列表标签布局，每个li盒⼦放图⽚+⽂字标题内容，li盒⼦直接使⽤a超链接标签将图⽚和⽂
字内容包裹着，使⽤img标签引⼊图⽚，使⽤span标签与img形成两个盒⼦⽽CSS分别设置独占⼀⾏功能效果的样式（display:block），避免⽂字和图⽚排成⼀排⽽⾮上下结构。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。