如何创建双色导航栏？答案

【问题标题】：How to create a two-colored navbar?如何创建双色导航栏？
【发布时间】：2014-11-15 12:30:24
【问题描述】：

我目前正在开发一个网站，我需要一个宽导航栏，那里只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附上实际样机的截图）：因此，我将深黄色应用到主导航栏本身，所以第一个按钮没有问题（因为它应该是黄色的），第二个也很好玩，但第三个自然中断并且导航栏背景颜色在右侧显示约 200 像素。我试图通过创建一个具有适当颜色、高度和宽度的空导航栏来进行某种破解，但由于该站点应该是响应式的，所以这个导航栏右解决方案只会产生额外的麻烦。所以这是我的标记（我使用的是标准的 Bootstrap 3 导航栏）：

 <nav id="mainav" class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li><a href="#">Achievements</a></li>
                  <li><a href="#">Resources</a></li>
                  <li><a href="#">Overall Points</a></li>
              </ul>
          </div>
      </div>
  </nav>

CSS如下：

#mainav {
height: 100px;
border: none;
border-radius: 0;
background-color: #fec708;
}

#mainav li:first-child {
height: 100px;
padding-top: 25px;
margin-left: 120px;
width: 330px;
text-align: center;
background-color: #fec708;
}

#mainav li:nth-child(2) {
height: 100px;
padding-top: 25px;
width: 320px;
text-align: center;
background-color: #ff7e00;
}

#mainav li:nth-child(3) {
height: 100px;
padding-top: 25px;
width: 330px;
text-align: center;
background-color: #db0104;
}

#mainav li a {
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 300;
font-size: 37px;
}

如果您能就这个特定问题分享您的想法和可能的解决方法，我们将不胜感激。谢谢！

【问题讨论】：

使用背景渐变怎么样？只需指定一个从左到右的渐变，颜色停止在 50%，其中左侧为纯黄色，右侧为纯红色。
有趣的想法特里，会试试看！谢谢！

标签： html css twitter-bootstrap-3 background-color navbar

【解决方案1】：

如果您确定这将始终保留三个按钮，而第二个按钮居中，您可以将中心按钮设置为橙色并将导航栏的背景渐变设置为 50% 的黄色和 50% 的红色：

#mainnav {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.5, #FEC908),
        color-stop(0.5, #DB0104)
    );
    background-image: -o-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -moz-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -webkit-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: -ms-linear-gradient(right, #FEC908 50%, #DB0104 50%);
    background-image: linear-gradient(to right, #FEC908 50%, #DB0104 50%);
}

【讨论】：