スプライトのフロントエンドは、Web、スプライト、スプライト図を滴下しました。

CSSスプライト

通称：スプライト、スプライト描画、ページ全体が異なる絵やアイコンを指し、マップ上で結合されている;
利点：使用CSSスプライトは、ネットワーク要求を減らすページロードのパフォーマンスを向上させる、ページの上端の下に表示されないことができ、まだロードされてロードされていますこの問題では

短所：あなたが遅く、アイコンの1つを変更する場合、およびピクセルサイズの変更、再見つけ、すべてのアイコンへの必要性

スプライト生産：

アイコンや写真にフォトショップの透明層選ばかかります

 

テストチャート：

​​​

1  <！DOCTYPE HTML > 
2  < HTML > 
3      < ヘッド> 
4          < メタのcharset = "UTF-8" > 
5          < タイトル> </ タイトル> 
6          < スタイルタイプ= "テキスト/ CSS" > 
7              #box { 
8                  マージン：は50px 。;
9              } 
10                  
11              #boxのA { 
12                  表示：ブロック。
13                  幅：74px ; 
14                  高さ：20ピクセル; 
15                  国境：1pxの固体#CCC 。
16                  色：ブラック。
17                  フォントサイズ：12ピクセル; 
18                  テキスト装飾：なし; 
19                  テキスト整列：センター。
20                  のborder-top ：なし。
21                  パディングトップ：54px ; 
22                  背景画像：URL（icon.pngの）。
23              } 
24              #boxの#zone { 
25                  ボーダートップ：1ピクセル固体#CCCCCC 。
26                  背景位置：-17px 4PX 。
27                  背景リピート：なしリピート; 
28              } 
29              #box #zone：ホバー{ 
30                  のbackground-position ：-17px -98px 。
31              } 
32             #boxの#mail { 
33                  のbackground-position ：-12px -186px 。
34                  背景リピート：なしリピート; 
35              } 
36              #box #mail：ホバー{ 
37                  のbackground-position ：-12px -286px 。
38              } 
39          </ スタイル> 
40      </ ヘッド> 
41      < ボディ> 
42          < DIV ID = "ボックス" > 
43              < AHREF = "＃" ID = "ゾーン" >空间</ A > 
44              < HREF = "＃" ID = "メール" >邮箱</ A > 45 </ DIV > 46 47 </ ボディ> 48 </ HTML >