DivCSS實例:CSS菜單Flash效果用圖片模擬實現_DIV+CSS實例

編輯Tag賺U幣
教程Tag:暫無Tag,歡迎添加,賺取U幣!
  DivCSS實例:CSS菜單FLASH效果 用圖片模擬實現


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

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

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

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

  以下是預備好的兩張圖片:
btn1.gif (靜止的圖片)

btn2.gif (動畫圖片)

XHTML編碼:
示例代碼 [www.brhhwy.live]
<div id="menu">
<a href="http://www.brhhwy.live/" title="Div CSS教程" target="_blank">CSS Web Design 模板無憂 - www.brhhwy.live</a>
</div>

CSS編碼:

示例代碼 [www.brhhwy.live]
#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;
}

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

最終的運行效果:

div css xhtml xml 代碼調試框 代碼調試框 [www.brhhwy.live]

[ 可先修改部分代碼 再運行查看效果 ]


  

來源:無憂整理//所屬分類:DIV+CSS實例/更新時間:2008-02-15
相關DIV+CSS實例
上海天天彩选四中奖规则 股票分析软件破解版 网易模拟炒股大赛 期货配资公司是否合法 股票配资平台哪个好推荐九梦财富 世界著名股票指数 私募基金配资 炒股背景 股票配资论坛 股票行情002152 巨牛盈配资 千层金配资 中国铁建股票分析 配资网 买股票 东营股指期货配资 手机怎么下载股票行情