CSS制作的背景動態變化的網頁導航

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS制作的背景動態變化的網頁導航

CSS制作的背景動態變化的網頁導航

編輯：CSS進階教程

自己寫的個導航,感覺還不錯...惟一的不足就是hack比較多,如果有簡潔的方式實現,請留言告訴我...呵呵...

樣式部分:

#headerMenu {
    width:560px;
    margin:30px auto;
}
.menu {
    font-size:14px;
    line-height:18px;
    *line-height:32px;
}
.menu li {
    display:inline;
}
.menu a:link,
.menu a:visited{
    display:-moz-inline-stack;/*FF下有效*/
    *display:inline;/*此行及下行為IE定義*/
    zoom:1;
    width:80px;
    padding:8px 0px 6px 0px;
    *padding:0;
    float:left;
    color:#014A99;
    text-align:center;
    text-decoration:none;
    background:url(/files/081222/1_164717.gif);
}
.menu a:hover{
    color:#FFF;
    font-weight:bold;
    background:url(http://www.poluoluo.com/files/081222/1_164815.gif);
}
.home{
    background:url(http://www.poluoluo.com/files/081222/1_164815.gif)!important;
    color:#FFF !important;
    font-weight:bold;
}

運行查看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="網頁教學網" /> <meat name="Author BlogURL" content="http://www.poluoluo.com" /> <title>li等寬水平導航</title> <style type="text/css">  </style> </head> <body> <div id="headerMenu"> <ul class="menu"> <li><a href="/" class="home">首頁</a></li> <li><a href="show.htm">產品展示</a></li> <li><a href="case.htm">成功案例</a></li> <li><a href="service.htm">客戶服務</a></li> <li><a href="download.htm">下載中心</a></li> <li><a href="contact.htm">聯系我們</a></li> <li><a href="about.htm">關於我們</a></li> </ul></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:CSS+XHTML制作的簡單網頁下拉菜單
下一頁:真正的利用DIV+CSS優化站點

CSS進階教程

CSS網頁布局學習的參考訣竅: 網頁制作poluoluo文章簡介：CSS網頁布局學習的參考訣竅. 如果在用CS
CSS讓圖片垂直居中和底端對齊的代碼: 本CSS教程提供了兩種對齊方式即垂直居中對齊和底端對齊！更多內容請參考本站的CSS視頻教程。CSS使
隱藏滾動條: 具體步驟：方法一：設置CSS屬性overflow為hidden。 <body style=o

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS網頁制作技巧:強制中英文換行和不換行簡單學習css組合與CSS嵌套的寫法最近整理的一份CSS文字隱藏的demo CSS隱藏網頁的滾動條教程 css制作表單效果 Web標准不僅僅是不用表格的站點 CSS3網頁制作教程:Action:hovert 如何用css控制input中的text和radio W3C盒子模型和IE6盒子模型 css對於顏色和文本屬性的控制

DIV CSS 佈局教程網

相關文章