当前位置：首页 → 问答吧 → 使用div+css 如何使得导航条的背景长度可以自适应浏览器的宽度

使用div+css 如何使得导航条的背景长度可以自适应浏览器的宽度

时间：2010-10-03

来源：互联网

我最近做了一个导航条，完整的代码如下
<style>
   #menu {
font-family:Arial;
font-size:14px;
background:url(under.gif);
margin: 0px auto 0  auto;
}
.menu_content {
      width: 800px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
}
   #menu a{
      float:left;
      display:block;

          line-height:35px;
      color:#ddd;
      text-decoration:none;
      padding:0 0 0 14px;
      white-space: nowrap;
      background:url(under.gif) repeat-x;
      }
   #menu a:hover{
         color:#fff;
            background-image:url(hover.gif);
         }
   #menu a b{
      display:block;
      padding:0 14px 0 0;
         }
     #menu a:hover b{
      color:#fff;
         background: url(hover.gif) no-repeat right top;
         }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>玻璃效果菜单</title></head>

<body >
<div id="menu">
      <div class="menu_content" >
         <a href="#"><b>Home</b></a>
         <a href="#"><b> Contact Us </b></a>
         <a href="#"><b> Web Dev </b></a>
         <a href="#"><b> Map </b></a>
      </div>
</div>
</body>
希望可以实现导航条的背景长度可以随着浏览器窗口的变化而变化，可是结果却出不来，希望大虾们指点一二，到底问题出在哪里？

作者: qingshafeiyang 发布时间: 2010-10-03

你给出的图片路径要换掉！

<!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" /> <title>玻璃效果菜单</title> <style> #menu { font-family:Arial; font-size:14px; background:url(under.gif); margin: 0px auto 0 auto; } .menu_content { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #menu a{ float:left; display:block; line-height:35px; color:#ddd; text-decoration:none; padding:0 0 0 14px; white-space: nowrap; background:url(under.gif) repeat-x; } #menu a:hover{ color:#fff; background-image:url(hover.gif); } #menu a b{ display:block; padding:0 14px 0 0; } #menu a:hover b{ color:#fff; background: url(hover.gif) no-repeat right top; } </style> </head> <body > <div id="menu"> <div class="menu_content" > <a href="#"><b>Home</b></a> <a href="#"><b> Contact Us </b></a> <a href="#"><b> Web Dev </b></a> <a href="#"><b> Map </b></a> </div> </div> </body>
提示：您可以先修改部分代码再运行

[ 本帖最后由 wyysf 于 2010-10-3 16:45 编辑 ]

作者: wyysf 发布时间: 2010-10-03

使用div+css 如何使得导航条的背景长度可以自适应浏览器的宽度

热门阅读

热门下载