首页 > Web开发 > 详细

css学习_css精灵技术、字体图标

时间:2019-03-31 18:14:25      阅读:133      评论:0      收藏:0      [点我收藏+]

1、精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力)

技术分享图片

2、精灵技术的本质(小的背景图集中在一张大图上)

技术分享图片

3、精灵技术的使用

案例1:

技术分享图片

 案例2:

技术分享图片

注意:产品类的图片一般不是用背景,而是用img标签

案例3:

技术分享图片

4、字体图标---比精灵图标更占优势

技术分享图片

技术分享图片

字体图标使用流程(如果前2步不需要,可以直接从第3步开始)

技术分享图片

推荐转换网站

技术分享图片

如何下载字体图标(压缩包一定不要丢。把压缩包里的fonts文件放在自己的项目中)

技术分享图片

技术分享图片

技术分享图片

使用步骤

技术分享图片

注意fonts路径问题,别放错了。

技术分享图片

如何追加新图标到原来的库里面?

技术分享图片

 

css学习_css精灵技术、字体图标

原文:https://www.cnblogs.com/yangyutian/p/10632365.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!