CSS如何制作一張圖片多種狀態的圖象翻轉菜單？_Div+CSS教程

　　
　　根據頁面設計的需要，有時候我們使用圖象翻轉菜單，所謂圖象翻轉菜單是指在鏈接狀態、鼠標激活狀態實現不同的圖片效果。
　　在通常的圖象翻轉菜單制作中，會出現閃爍的情況，這是因為圖片載入延時所造成的，也就是圖象還未完全加載沒能完全顯示，加載時間的間隔就會出現閃爍的現象。
　　我們今天所要討論的是將圖象翻轉菜單的多種狀態制作成一張圖片，我們應用css對背景圖片的位置進行控制，進而實現一張圖片多種狀態的圖象翻轉菜單效果。

　　這張圖片從上至下結合了三個不同的狀態，鏈接樣式，激活樣式，當前頁樣式。
　　來看下面的css代碼：


　　我們來看下面的xhtml代碼：


　　#nav li聲明了圖象按鈕區域的寬高，去掉了列表標記，并且設置右邊距兩個象素，溢出部分直接隱藏。

　　#nav li a同樣聲明了寬與高，溢出部分直接隱藏。設置了內邊距，距離頂部50px，這一設置有什么作用呢？我們需要考慮一種情況的發生，假如用戶在瀏覽網頁的時間，由于網速等原因沒有能加載css文件，那用戶根本沒有辦法點擊鏈接，因為鏈接的定義全部寫在css文件中，我們除了應用圖片區域塊的無序列表的鏈接，還應該加上文字鏈接，這樣就不必擔心沒有CSS文件無法訪問。同時也有利于SEO，讓搜索引擎更輕易的抓取網站上的內容。文字鏈接是不能與圖片區域重合的，這樣就會發生重疊影響美觀，我們設置距離頂部50px，文字已經位于圖象區域以外，并且設置了溢出部分直接隱藏。在正常情況下是看不到文字鏈接的。在下面的運行效果中，你可以去掉CSS樣式定義看看實際效果。

　　#nav li a.an　聲明了名稱為an的類的背景圖片，不重復，位置是距頂距左均為0.
　　#nav li a:hover　聲明了激活時背景圖片的位置，距頂部-43px；也就實現了圖片中間位置那一按鈕的效果。
　　#nav li a.dang 聲明了當前頁圖片的位置，距頂部-86px；也就實現了圖片最下面位置那一按鈕的效果。這三個CSS代碼中，最重要的就是background-position屬性，關于background-position的說明，請點擊這里。

　　細心的你一定注重到在無序列表的第一個鏈接中，我們使用了class="an dang"，這是一種非凡的聲明方式，大家在實際使用中可以靈活的應用，這一聲明表示，這一鏈接，使用an與dang雙重效果。
　　請您非凡注重：class="an dang"的結合運用效果，就實現了當前頁指引，我們不需要修改任何樣式與圖片，只需要在當前欄目的 class="an"更改為class="an dang"即可。

　　羅嗦了這么多，我們來看下面的運行效果：