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.VeVb.com/files/081222/1_164815.gif);
}
.home{
    background:url(http://www.VeVb.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.VeVb.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样式表争夺特定选择符的控制权