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

2024-07-11 08:21:45

字體：大中小

來源：轉載

供稿：網友

自己寫的個導航,感覺還不錯...惟一的不足就是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.survivalescaperooms.com/files/081222/1_164815.gif);
}
.home{
    background:url(http://www.survivalescaperooms.com/files/081222/1_164815.gif)!important;
    color:#fff !important;
    font-weight:bold;
}

運行查看效果:

<!doctype%20html%20public%20"-//w3c//dtd%20xhtml%201.0%20transitional//en"%20"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html%20xmlns="http://www.w3.org/1999/xhtml"><head><meta%20http-equiv="content-type"%20content="text/html;%20charset=utf-8"%20/><meta%20name="author"%20content="網頁設計"%20/><meat%20name="author%20blogurl"%20content="http://www.survivalescaperooms.com"%20/><title>li等寬水平導航</title><style%20type="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制作的簡單網頁下拉菜單

下一篇：多個CSS樣式表爭奪特定選擇符的控制權