CSS中的精靈技術
在製作網頁的過程中我們會用很多個細碎的小圖，每當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。
由於網頁中細碎的小圖片很多，會導致向服務器發送N多次請求，這樣不僅降低了頁面的加載速度，也會影響服務器的效率。
**爲了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度。
聰明機智的前輩們研究出了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。需要用到background-img屬性，background-position屬性，當然也可以連寫起來，都寫在background屬性中。
這樣，當用戶訪問該頁面時，只需向服務發送一次請求，通過定位就可以將網頁中的背景圖像全部展示出來。
主要就是用CSS的
- background-image、
- background-repeat
- background-position屬性進行背景定位，
- 其中最關鍵的是使用background-position 屬性精確地定位。
精靈技術使用的核心
首先我們知道，css精靈技術主要針對於背景圖片，插入的圖片img 是不需要這個技術的。
- 首先測量所需圖片在整張精靈圖上的爲值，測量爲X軸方向，Y軸方向。
- 使用
background將精靈引入，並且確定好位置。 - 因爲以左上角X，Y的0點，所以X，Y軸的距離均使用負值。
css中滑動門
製作網頁時，爲了美觀，常常需要爲網頁元素設置特殊形狀的背景，但是文字不一樣長，所需要的背景也不一樣長，這樣就會出現一些問題。
爲了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。 最常見於各種導航欄的滑動門。
核心技術
核心技術就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應不同字數的導航欄。
一般的經典佈局都是這樣的：
<li>
<a href="#">
<span>導航欄內容</span>
</a>
</li>以下附上我的代碼可以作參考
