Tad 教材網 - 線上書籍

:::

prev

17. XOOPS佈景速成

18-1 範例一：左半的圖 next

next

\[1001\]XOOPS網站門面專業設計
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/18.zip)

### 一、 何謂CSS Sprites

1. CSS Sprites就是將許多小圖併成一張大圖，並以CSS的定位方式來讓某圖示出現。
2. 例子：FCK編輯器的工具列、http://tw.yahoo.com/的小圖示。優點： 
  - (1) 效能好！減少了網頁的http請求，從而大大的提高了頁面的性能！
  - (2) 就當前網絡速度而言，不大於200KB的單張圖片的所需載入時間基本是差不多的，載入10張2K的圖，比載入一張20K的圖，可能需要多好幾倍時間。也就是說一張大圖比許多小圖的存取來得快，加上瀏覽器快取，可以讓圖示的呈現更為順暢。
  - (3) 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
 
### 二、 CSS Sprites原理

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」、「background- repeat」、「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

### 三、 CSS Sprites相關工具

1. 可快速定位出某一個圖示：http://www.floweringmind.com/sprite-creator/index.php
2. 可將許多小圖進行合併：http://cn.spritegen.website-performance.org/
 
### 四、 CSS Sprites範例

### 方法一

<style type="text/css">  
 ul#menu{  
 width:200px;  
 height:297px;  
 background:url(bg\_studygroup.png) 0px 0px no-repeat;  
 list-style:none;  
 padding:0px;  
 margin:0px;  
 position:relative;  
 }  
 ul#menu li a{  
 width:125px;  
 height:40px;  
 position:absolute;  
 left:65px;  
 }  
 li.b1 a{top:87px;}  
 li.b2 a{top:135px;}  
 li.b3 a{top:183px;}  
 li.b4 a{top:233px;}  
 li.b1 a:hover{background:url(bg\_studygroup.png) -265px -87px no-repeat;}  
 li.b2 a:hover{background:url(bg\_studygroup.png) -265px -135px no-repeat;}  
 li.b3 a:hover{background:url(bg\_studygroup.png) -265px -183px no-repeat;}  
 li.b4 a:hover{background:url(bg\_studygroup.png) -265px -233px no-repeat;}  
 </style>  
 <ul id="menu">  
 <li class="b1"><a title="年度計畫" href="#"></a></li>  
 <li class="b2"><a title="書單" href="#"></a></li>  
 <li class="b3"><a title="心得分享" href="#"></a></li>  
 <li class="b4"><a title="佳作欣賞" href="#"></a></li>  
 </ul>

###   
 方法二

<style type="text/css">  
 ul#menu {width:200px; height: 212px; padding: 85px 0 0 0; background: url(bg\_studygroup.png) no-repeat left top;}  
 ul#menu li { list-style: none;}  
 ul#menu li a { width: 200px; height: 48px; display: block;}  
 li.b1 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -85px;}  
 li.b2 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -133px;}  
 li.b3 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -181px;}  
 li.b4 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -229px;}  
 </style>  
   
 <ul id="menu">  
 <li class="b1"><a title="年度計畫" href="#"></a></li>  
 <li class="b2"><a title="書單" href="#"></a></li>  
 <li class="b3"><a title="心得分享" href="#"></a></li>  
 <li class="b4"><a title="佳作欣賞" href="#"></a></li>  
 </ul>

:::

搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D459

快速登入

書籍目錄

展開 | 闔起

線上使用者

74人線上 (23人在瀏覽線上書籍)

會員: 0

訪客: 74

更多…