字体图标的使用
字体图标的使用步骤:
- 第一步: 通过link引入iconfont.css文件
- 第二步: 使用字体图标
使用字体图标常见的有两种方式:
- 方式一: 通过对应字体图标的Unicode来显示代码;
- 方式二: 利用已经编写好的class, 直接使用即可;
精灵图 CSS Sprite
什么是CSS Sprite？CSS Sprite是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分。有人翻译为：CSS雪碧、CSS精灵。
使用CSS Sprite的好处：
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite图片制作（雪碧图、精灵图）：
- 方法1：Photoshop, 设计人员提供
- 方法2：www.toptal.com/developers/…
精灵图的使用
精灵图如何使用呢?精灵图的原理是通过只显示图片的很小一部分来展示的。
通常使用背景:
- 1.设置对应元素的宽度和高度
- 2.设置精灵图作为背景图片
- 3.调整背景图片的位置来展示
如何获取精灵图的位置：www.spritecow.com/
cusor
cursor可以设置鼠标指针（光标）在元素上面时的显示样式。
cursor常见的值有：
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
