0

这就是我想要的：http: //img441.imageshack.us/img441/9764/menuhn.gif

灰色区域是背景图像，其属性background-size: cover;显示在 HOME 按钮中。其余的都是白色的。

为了使其具有响应性，以便它可以在移动设备中浏览，我希望链接按钮彼此位于后面，使窗口变窄。顺便说一句，右侧链接按钮的顺序是颠倒的。

这是我到目前为止得到的：

http://jsfiddle.net/Emaster/Wmwu4/

HTML

<body>
    <div id="header_left_margin"></div>

    <div id="header_title"> 
        <h3><a href="index.html">title</a></h3>
    </div>

    <div id="header_right_margin"></div>
    <div id="menu">
     <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="faq.html">FAQ</a></li>
     </ul>
    </div>
</body>

CSS

body{
    background-image: url(http://solfar.pt/wp-content/uploads/2012/01/background-1024x682.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#header_title{
    border:1px solid blue;
    height: 50px;
    background-color: white;
}

#header_title,
#header_title h3,
#header_title h3 a{
    display: inline;
}

#menu ul li{
      float:right;
      width: 50px;
      height: 50px;
      border:1px solid red;
      background-color: white;  
}

#menu ul li.active {
  background-color: transparent;
}

#menu ul{
 display: inline;
}

#menu,
#menu ul,
#menu ul li{
  display: inline;
}

#header_right_margin{
    display: inline;
    float:right;
    width: 10%;
    height: 50px;
    border:1px solid green;
        background-color: white;
}

#header_left_margin{
    display: inline;
    float:left;
    width: 10%;
    height: 50px;
    border:1px solid green;
        background-color: white; 
}
4

1 回答 1

1

我为你做了这个菜单（下次你必须付钱:)。我应该提一下，您不需要将display: inlineandfloat一起使用，因为float无论如何都会占主导地位。这是更新的 jsfiddle。另一个想法 - 使用插件进行响应式设计。他们已经有内置的解决方案。你可以试试引导

于 2013-05-23T08:02:06.677 回答