DivCSS實例：CSS菜單FLASH效果 用圖片模擬實現


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

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

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

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

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

XHTML編碼：

CSS編碼：


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

最終的運行效果：