DivCSS實例：CSS菜單FLASH效果 用圖片模擬實現(xiàn)


　　CSS網(wǎng)頁布局，強調(diào)文檔具有良好的結(jié)構(gòu)語義，在以往的Web開發(fā)中，我們在頁面中嵌入Flash，使網(wǎng)站頁面具有良好的動感視覺效果，以Flash的形式創(chuàng)建網(wǎng)頁導航菜單也是非經(jīng)常用的方法。但這樣的形式使文檔的語義結(jié)構(gòu)不明確，更要命的是，對于SEO（搜索引擎優(yōu)化）這種形式更是一點兒作用都沒有，搜索引擎蜘蛛無法獲取菜單的鏈接目標。

　　我們關(guān)注標準，注重用戶體驗，也需要兼顧文檔的語義結(jié)構(gòu)與SEO優(yōu)化，MB5U認為以一種變通的方法可以實現(xiàn)。雖然不如真正的Flash有著炫目的效果，但這樣的形式也是一種切實可行的辦法。

　　具體的思路是，創(chuàng)建一個鏈接，將原本的鏈接文字隱藏掉，置入一個圖片（靜止的圖片）作為鏈接狀態(tài)的背景，在鏈接的懸停狀態(tài)，重新置入一個圖片（動畫圖片）作為鏈接狀態(tài)的背景。

　　獲得的效果是，在正常狀態(tài)下鏈接是一個靜止不動的圖片，當鼠標移到鏈接區(qū)域，即在鏈接的懸停狀態(tài)下，背景圖片變換成為一張動畫圖片。

　　以下是預備好的兩張圖片：

XHTML編碼：

CSS編碼：


CSS編碼釋義：
　　menu部分，設(shè)置div容器的寬度為150px，設(shè)置上下外邊距為50px，左右為自動實現(xiàn)水平居中對齊。
　　menu a部分，將鏈接元素轉(zhuǎn)換為塊元素，設(shè)置其寬度與高度。設(shè)置文本縮進為160px，將鏈接文字“推”到了可視區(qū)域以外，但僅這樣做實現(xiàn)不了隱藏鏈接文本，緊接著設(shè)置強制文本在一行內(nèi)顯示，溢出為隱藏。設(shè)置鏈接的背景圖片為btn1.gif，不重復，位于0 0坐標。
　　menu a:hover部分，設(shè)置鏈接的懸停狀態(tài)，僅將背景圖片改為btn2.gif。

最終的運行效果：