学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

显示

控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和display:grid;flex表示弹性盒子，grid表示网格；

布局

在历数技术进步的代价时，弗洛伊德遵循的路线使人感到压抑。他同意塔姆斯的评论：我们的发明只不过是手段的改进，目的却未见改善。

——尼尔波斯曼《技术垄断》

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS3

18 CSS精灵技术

1 CSS精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户，然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称 CSS Sprites、CSS雪碧）。

一直有点模模糊糊的。为什么有的图片在不同屏幕下显示的效果不一样，有的清楚，有的模糊，有的大有的小

今天我要彻底给他搞明白

不牵扯太多的概念，主要是让自己理解

● 屏幕分辨率

简单理解，就是横着竖着能放多少像素点。

比如320 * 640 就是横着最多放320个点，竖着能放640个点。

本小节基本要求：

• 会使用webstorm开发工具
• 至少明白html与css的作用

要点：

1. <ul><li>首页</li><li>xxxx</li>.....</ul>标签的使用

CSS3 加入的 @media 媒体查询使得无需修改内容，便可使样式应用于某些特定的设备范围。媒体查询像是样式表的 if 语句，通过判断表达式的真假来执行特定的分支 （加载特定的样式）。

链接伪类选择器(重点)

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。