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

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

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

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

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

3、精灵技术的使用

案例1:

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

案例2:

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

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

案例3:

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

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

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

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

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

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

推荐转换网站

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

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

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

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

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

使用步骤

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

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

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

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

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

上一篇:c++垃圾回收代码练习 引用计数


下一篇:JavaScript 中对变量和函数声明提前的演示样例