为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网里有另一门类似的课程《用字体在网页中画ICON图标》也是讲CSS Sprite
其中的代码是用js实现的。有兴趣的朋友可以去学习学习~~
哈哈 在这都不爱打中文
还是不明白为什么雪碧图要叫雪碧图
填好的啊啊
*{padding:0;margin:0;}
.ul-shop{
width:150;
list-style:none;
padding:0 10px;
border:2px solid #bbb;
}
.ul-shop li{
border-bottom:1px solid #ccc;
}
.ul-shop li:last-of-type{
border:none;
}
.ul-shop li>h3{
font-size:16px;
color:#666;
text-align:center;
}
css
background-position: ;
编辑器炸了还是我的输入法炸了
有没有习惯按 ctrl+s 的
优点
1.减少加载网页图片时对服务器的请求次数
2.提高页面的加载速度
缺点
1.CSS雪碧的最大问题是内存使用
2.影响浏览器的缩放功能
3.拼图维护比较麻烦
全屏看了效果图,发现数值要改,收齐,直接按了Backspace...然后就没有然后了,呵呵呵呵呵
前面都学得挺好的,到自己编写的时候就跪了。。
雪碧图真的是非常常用!!!
不错,每天get点新知识
这里为什么要给<i>,设置display:block呢, <i>是行内标签,不会独占一行,它没有背景,不能设置背景图片,而这里我们是需要设置背景图片的,所以必须block,不然没有效果.如果你觉得不妥,可以用<div>来显示,当然最好的方式是建议大家到电商网站,用浏览器去看看他们是怎么实现这个小图标的,用的什么标签, 是Css雪碧图,还是其他什么的.掌握最前沿的技术方法来实现,毕竟CSS Sprite不是最好最完美的方式
这里也可以不用<i>标签放图片,也可以用其他的标签, 最好是便于代码维护,其实这里可以设置<i> display: inline-block,这样既可以显示图标,又不需要float,也不会独占一行. 很方便,建议这样设置, 因为float对后面的元素是有影响的,要清楚浮动,clear:both
课程须知
您至少具备HTML/CSS基础知识。
老师告诉你能学到什么?
1.学会CSS Sprite雪碧图制作方法。2.学会CSS Sprite雪碧图的使用方法。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消