前端学习第三天-精灵图、文本操作、元素分类

精灵图（需要用到ps）

一次载入可以多次使用，省去了多次重复载入，可以提高性能。

精灵图使用步骤：

1. 测量精灵图中需要展示的图标的大小
2. 创建和需要展示的图标相同尺寸的div
3. 测量图标在精灵图中的位置
4. 修改背景图位置（坐标，负左上角坐标（-x -y）），即用background来展示图标

使用方法：

1. 把图片拖进ps打开
2. 最上方一栏中找到视图，打开标尺

 

1. 接下来用标尺测量。从标尺处拉出。从两条线之间的位置都能拽出线。（鼠标画的不直，请见谅）

 

1. 需要上面和左面各拖出2条线。

 

分别放在图片的上下左右，我们需要计算图片的长宽以及图片左上角的坐标。

图片的宽：右坐标-左坐标

图片的高：下坐标-上坐标

左上角坐标：左坐标，上坐标。

注意：文件名最好不要带空格，网页容易识别错误。