Question

我在哪里可以学习制作这样的导航栏？主要是，我无法弄清楚如何在RESOURCES和被调用之间创建间隔符。我将发布到目前为止的内容。

CSS

.bigBar {
    display: inline-block;
    border: 2px solid black;
    width: 833px;
    a {
        padding: 10px 15px;
        text-align: center;
        color: white;
        text-decoration: none;
        float: left;
        width: 15%;
        background: #933737;
        border-right: 1px solid #ccc;
    }
}

HTML

    <nav class="bigBar">
            <a class="about"  href="#">ABOUT</a>
            <a class="ministries" href="#">MINISTRIES</a>
            <a class="evangelsts" href="#">EVANGELSTS</a>
            <a class="resources" href="#">RESOURCES</a>
    </nav><!--end class bigBar-->

Answer 1

将nav的背景设置为与菜单项不同，然后您就拥有它：

CodePen

<强> HTML

<nav class="bigBar">
  <ul class="main">
    <li> <a class="about"  href="#">ABOUT</a></li>
    <li> <a class="ministries" href="#">MINISTRIES</a></li>
    <li> <a class="evangelsts" href="#">EVANGELSTS</a></li>
    <li> <a class="resources" href="#">RESOURCES</a></li>
  </ul>

  <ul class="right">
    <li> <a class="about"  href="#">Called?</a></li>
    <li> <a class="ministries" href="#">Contact</a></li>
    <li> <a class="evangelsts" href="#">Give</a></li>
  </ul>
</nav>

<强> CSS

nav {
  background: purple;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  float: left;
  display: block;
  background: yellow;
  border-right: 3px double #000;
  height: 100%;
  padding: .5em 1.5em;
}

.main {
  float: left;
}

.right {
  float: right
}

Answer 2

你可以通过使一些菜单项向左浮动而其余部分向右浮动来实现。要更改颜色，您只需在bigBar元素上设置背景颜色，该背景颜色与菜单项的背景颜色不同。

.bigBar {
    background-color:#6E1B1B;
    display: inline-block;
    border: 2px solid black;
    width: 833px;
}

a {
    padding: 10px 15px;
    text-align: center;
    color: white;
    text-decoration: none;
    width: 15%;
    background: #933737;
    display:inline-block;
}

.left {
    float:left;
    border-right: 1px solid #ccc;
}

.right {
    float:right;
    border-left: 1px solid #ccc;
}

这是一个小提琴，以便您可以更好地看到它https://jsfiddle.net/25n1dqfp/1/

建议尽管使id的唯一性和类可重复，所以将菜单项类更改为id可能是个好主意

<nav class="bigBar">
        <a id="about"  href="#">ABOUT</a>
        <a id="ministries" href="#">MINISTRIES</a>
        <a id="evangelsts" href="#">EVANGELSTS</a>
        <a id="resources" href="#">RESOURCES</a>
</nav><!--end class bigBar-->

带导垫的CSS导航栏

2 个答案: