DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
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。
最終的運行效果:
代碼調(diào)試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
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)下,背景圖片變換成為一張動畫圖片。
以下是預備好的兩張圖片:
btn1.gif (靜止的圖片)

btn2.gif (動畫圖片)


btn2.gif (動畫圖片)

XHTML編碼:
示例代碼 [www.ghpqjb.com]
<div id="menu">
<a href="http://www.ghpqjb.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板無憂 - www.ghpqjb.com</a>
</div>
<a href="http://www.ghpqjb.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板無憂 - www.ghpqjb.com</a>
</div>
CSS編碼:
示例代碼 [www.ghpqjb.com]
#menu {
width:150px;
margin:50px auto;
}
#menu a {
display:block;
width:150px;
height:30px;
text-indent:160px;
white-space:nowrap;
background:url(btn1.gif) no-repeat 0 0;
overflow:hidden;
}
#menu a:hover {
background:url(btn2.gif) no-repeat 0 0;
}
width:150px;
margin:50px auto;
}
#menu a {
display:block;
width:150px;
height:30px;
text-indent:160px;
white-space:nowrap;
background:url(btn1.gif) no-repeat 0 0;
overflow:hidden;
}
#menu a:hover {
background:url(btn2.gif) no-repeat 0 0;
}
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。
最終的運行效果:
代碼調(diào)試框 [www.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS布局實例用dldtdd來制作列表
- DivCSS實例:符合web標準的嵌入Flash的方法-JS調(diào)用
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
。