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


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

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

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

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

　　以下是預(yù)備好的兩張圖片：

XHTML編碼：

CSS編碼：


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

最終的運(yùn)行效果：