CSS制作的背景动态变化的网页导航

2008-12-22 16:44:05 来源:网页教学网

自己写的个导航,感觉还不错...惟一的不足就是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.gaoqian.com/files/081222/1_164815.gif);
}
.home{
    background:url(http://www.gaoqian.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.gaoqian.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制作的简单网页下拉菜单

下一篇：什么是交叉连接?什么是友情连接?

CSS制作的背景动态变化的网页导航

相关文章

阅读排行

专题教程

推荐文章

最新更新