当您打开网页时，网页中的所有图片和文字都是从服务器上取下来并显示在屏幕上的，就像： 然而，一个网页中的图片超过数百张。如果像上述过程一样每张图片都拍一次，网页的效率会相当低，这会大大降低网页的加载速度。为了有效减少服务器接收和发送请求的数量，提高页面的加载速度，CSS Sprite技术（CSS Sprite/CSS Sprite）出现了。 简单地说，向导映射是处理网页背景图像的一种方式。它将页面中涉及的所有图片放到一张图片中，然后从服务器中取出，这样用户只需向服务器请求一次，就可以获得网页所需的所有图片。这种由许多图片组成的大图片被称为雪碧图（Sprite Map）。以下为京东精灵地图： 得到向导地图后，每个网页元素通常只需要在向导地图中不同位置的一个小地图。要想准确定位向导地图中的小地图，需要利用CSS的background-image、background-repeat和background-position属性进行定位，其中background-position是最关键的属性。 切记要善用烟火剪图。 它使用Macromeida烟花http://www.zhucesz.com/，可以通过百度下载。 图片： 首先，通过烟火获得我们需要的图标大小： 然后设置div的大小以及图片通过下面的宽度、高度和XY轴移动的位置。 守则如下： 目标效果： 图片： 代码： 现实中的推拉门是这样的： 在网页中，经常会出现以下情况： 这时候可以通过后台来解决，但是每个标题栏的字数是不一样的，这就使得我们的后台很难设置，也没有一个统一的、可以随着字数缩放收缩的后台，这时候就需要推拉门了。 滑动门是利用CSS向导（主要是背景位置）和方框填充打开宽度，可以适应不同文字的导航栏。 一般的经典布局是这样的： 效果： 原始风格： 被文字铺开后： 就像现实中的推拉门一样。 注： 设置左侧背景，填充打开适当的宽度。 Span设置背景的右侧，填充扩展适当的宽度，文本继续扩展宽度。 A包含span，因为整个导航都是可单击的。 目标效果： 图片： 代码： 目标效果： 图片： AO： 致： WX： 代码： 不同的浏览器支持不同的字体格式，所以我们有必要了解一下字体格式。 http://www.zhucesz.com/（.ttf）格式 那个。ttf字体是Windows和Mac上最常见的字体，是IE9+、http://www.zhucesz.com/+、Chrome 4+、Safari 3+、Opera 10+、iOS Mobile、http://www.zhucesz.com/+等浏览器支持的RAW格式； http://www.zhucesz.com/（.otf）格式 那个。otf字体被认为是TureType中内置的一种原始字体格式，并受到http://www.zhucesz.com/+、http://www.zhucesz.com/浏览器的支持 http://www.zhucesz.com/+、http://www.zhucesz.com/+、http://www.zhucesz.com/+、iOS Mobile、http://www.zhucesz.com/+； http://www.zhucesz.com/开放字体格式（.Woff）格式 woff字体是Web字体的最佳格式。它是TrueType/OpenType的开放压缩版本，还支持元数据包的分离。支持该字体的浏览器有IE9+、http://www.zhucesz.com/+、Chrome 6+、http://www.zhucesz.com/+、http://www.zhucesz.com/+； 4.嵌入式开放类型（.eot）格式 那个。eot字体是一种特定于IE的字体，可以从TrueType创建。支持这种字体的浏览器是IE4+； http://www.zhucesz.com/（.SVG）格式 那个。svg字体是一种基于svg字体呈现的格式，受到浏览器的支持，如Chrome 4+、http://www.zhucesz.com/+、http://www.zhucesz.com/+、iOS Mobile http://www.zhucesz.com/+； 了解以上知识后，我们需要为不同的浏览器准备不同格式的字体。通常我们会通过字体生成工具帮助我们生成各种格式的字体，所以我们不需要太在意字体格式之间的差异。 设计字体图标实际上是UI设计师的工作。一般我们不需要在意，只需要学会如何使用图标就可以了。如果图标很受欢迎，并且已经在互联网上可用，那么我们可以直接跳到第三步。 当UI设计器给我们提供svg文件时，我们需要将其转换为页面可以使用的字体文件，我们需要生成的文件兼容并适合于每个浏览器。在这一点上，你可以上传到网站，然后下载。这里，以icomoon网站为例。A.点击右上角的IcoMoon应用程序 B.选择导入图标 C.上传文件 I.上传svg文件 上传第二步并下载后，可以将svg图片转换为我们可以使用的字体格式。 当然，有时候我们并不需要特殊的图标，这时候我们可以在网站上下载。 推荐的图标站点： 推荐网址：http://www.zhucesz.com/ Icomoon字体 IcoMoon成立于2011年，推出了第一款自定义图标字体生成器，允许用户选择他们需要的图标并使其对齐。内容种类繁多，非常全面。唯一遗憾的是国外服务器打开网络的速度很慢。 推荐网址：http://www.zhucesz.com/ 阿里图标字体 http://www.zhucesz.com/ 这是阿里妈妈M2UX的一个icon font font字体库，包括淘宝图标库和阿里妈妈图标库。你可以用AI制作图标并上传。一个字，自由，自由！！ 丰泰洛 http://www.zhucesz.com/ 在线定制自己的图标字体字体库，或者直接从同样开源的GitHub下载整个图标集。 字体-真棒 http://www.zhucesz.com/ 这是我最喜欢的字体之一。更新比较 来啊。目前共有369个图标。 字形半身形 http://www.zhucesz.com/ 这个字体图标可以在bootstrap下免费使用。它配有200多个图标。 图标8 http://www.zhucesz.com/ PNG可免费下载，像素可达500px 以icomoon为例，按以下顺序获取字体： ①点击右上角的IcoMoon应用图标 ②选择你想要的图标 ③点击右下角的生成字体 ④点击下载 在得到下载的压缩包后，我们需要将其引入到我们的HTML中。 ①解压缩后的内容如下。首先，我们需要将字体文件夹复制到我们的项目文件夹中。 将字体文件夹复制到： 2在样式中声明字体，并告诉其他人我们的自定义字体。 使用框的字体。 将结构添加到框中 在原始字体文件夹中打开http://www.zhucesz.com/ A. 将代码复制到所需图标字体下面 把它放在跨度里 B. 复制图标字体下面的小框 把它放在跨度里 效果如下： ⑤可以调整图标的大小和颜色，就像调整字体一样。 效果：