好看的历史书籍推荐,玄幻小说,完美世界官网

如今做網頁為了使網站豐富多彩，富于表現力，往往需要應用大量的圖片/圖標。如何處理這些圖片，使其盡量不影響網頁載入，解析等速度，是一個不大不小的問題。如果你的網站用各種圖標圖案裝飾的靚麗無比，但是需要等待較長的時間加載，那么相信很多用戶會等不及而離開。盡量將圖片做的小些，可能是大部分人選擇的解決之道。但是100張1kb的圖片加載與一張100kb的圖片加載，這之間又是不同的，這涉及到網站服務器的同時連接數，網絡質量等。但是，顯然，加載一張圖片要遠比加載多張圖片簡便的多。

還有最重要的一點，就是涉及到用戶動作才表現的圖片，例如鼠標移上/移下的圖片切換，由于是由動作觸發的，所以在動作觸發前是不會加載的，而當需要時再從服務器下載，這之間又需要一定的時間，如果圖片較大，此時網絡質量又不太好，就會出現頁面空白。而以上這一切，如果你將所有需要的圖片放到一張圖片上，這些問題就都不會有了。因為在網頁加載時這張圖片就已經從服務器上下載來了，所以不會出現丟失，未加載等現象。

對于老鳥來說，這一點可能已經成為一種意識，他們都很自覺，下意識的就會這么做，但是對于新手，初接觸網頁的人來說，可能還停留在用到哪張圖片就單獨處理哪張圖片的階段。我當然也是新手，之前在做網站右上角的一張圖片切換時，就是做了兩張不同的圖片，結果往往容易碰到網速不好時，第二張圖片不能及時加載上來。于是今天便將其處理了一下，整到了一張圖片上。我比較懶，后期往網站上添加一些內容時，懶得去動以前的東西，所以后期某些地方加入的圖標啥的都是單獨一張小圖標加上去的，也沒與之前的整合。但是，有一些尺寸稍大的，就不行了，就像我今天處理的，總是有延遲?，F在我就拿其做個例子，說說css中圖片定位及整合的好處。

為了使某處富于表現力，比如菜單，導航等，往往會用到鼠標移上移下的不同樣式表現，最簡單的就是圖片切換了。比如兩張圖片，一張用于鼠標未指向時，另一張用于鼠標移上去時。為了使第二張圖片無縫載入，就需要將這兩張圖片放到一起。比如本站右上角的那圖案，初始時是灰色，鼠標移上則變為彩色。即是用到了此張圖片：