css超链接文字下图片,div+css(ulli)实现图片上文字下列表布局

css样式表代码:

903154-20160920230038512-2104452727.png

html布局代码:

903154-20160920230058996-10677213.png

效果图:

903154-20160920230328637-455359031.png

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),避免文字和图片排成一排而非上下结构。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值