前端学习第10天：精灵图-滑动门

第10天

1.精灵图

1.1背景

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

1.2本质

​ CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

1.3使用

​ CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

1.4制作

​ CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

1.我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。

2.我们精灵图的宽度取决于最宽的那个背景。

3.我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。

4.在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

2.滑动门

2.1背景

​ 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多

​ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，**出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门.

2.2核心技术

​ 说明：核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>

   <a href="#">

            <span>导航栏内容</span>

   </a>

</li>

总结：

​ 1.a设置 背景左侧，padding撑开合适宽度。

​ 2.span设置 背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度。

​ 3.之所以a包含span就是因为整个导航栏是可以点击的。