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.webjx.com/files/081222/1_164815.gif);
}
.home{
    background:url(http://www.webjx.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.webjx.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制作的背景动态变化的网页导航请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-12-26