當網頁中存在多個小圖片 比如logo ，菜單圖片， 導航圖片等，如果每次都是從服務請求，或者圖片鏈接在另一個地址那麼不進頁面的加載速度會很慢，而且也會很消耗流量，
那麼就需要下面的技術了：
一.圖片整合
圖片整合技術(CSSSprites):將導航背景圖片，圖片按鈕背景圖片等有規則的合併爲一張背景圖，即多張圖片合爲一整張圖，然後用background-position來實現背景圖的定位技術。
優勢：通過中等和圖片，減少對服務器的請求數量，從而加快頁面的加載速度。9張圖片——9次——36K，一張——1次——4k。
二.滑動門技術
1.滑動門技術特徵
可以使CSS設計出來的導航菜單兼具傳統佈局的圖像效果與CSS佈局的高效擴展性。
2.什麼是滑動門
滑動門是一個形象的稱呼，它利用CSS背景圖像可層疊性，並允許彼此之上進行滑動來創造一些特殊的動態效果。
圖片： 
效果圖：
代碼例子：
<html>
<head>
<meta charset="utf-8">
<title>滑動</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,ol,dl{list-style:none;}
a{text-decoration:none;}
.nav{width:680px;height:42px;margin:50px auto;}
.nav li{float:left;margin-right:10px;}
.nav li a{display:block;height:42px;background:url(img1.jpg) no-repeat right top;}
.nav li a span{display:block;height:42px;padding:0 10px;line-height:42px;background:url(img2.jpg) no-repeat;color:#fff;}
.nav li a:hover{background-position:right -42px;}
.nav li a:hover span{background-position:left -42px;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>首頁</span></a></li>
<li><a href="#"><span>首頁首頁首頁首頁首頁首頁</span></a></li>
<li><a href="#"><span>首首頁首頁頁</span></a></li>
<li><a href="#"><span>首首頁首頁頁</span></a></li>
<li><a href="#"><span>首首頁首頁頁</span></a></li>
</ul>
</body>
</html>