0

我在那个 psd 文件中做一个导航：

https://imgur.com/a/OEbJDAX

但在我的 html/css 代码中，这个导航看起来像这样：

https://imgur.com/a/1OlW3eW

您可以看到徽标高于导航，如果我减小尺寸，此导航不会做出响应

我试图改变容器，在 css 中做了一个 flex。但这并没有帮助。

HTML：

   <header>
        <div class="container">
        <nav id="main-nav">
            <ul class="menu">
                <li><a href="#">Tour</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
            <h2 class="logo">NEWPROVIDENCE</h2>
            <ul class="menu">
                <li><a href="#">Help</a></li>
                <li><a href="#">Contact</a></li>
                <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
            </ul>
        </nav>
        </div>
        </header>

CSS：

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    overflow: hidden;
}

header {
    background: url('../img/bg-header.png') no-repeat center center / cover;
    height: 100vh;
}

#main-nav {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

#main-nav ul {
    display: flex;
    list-style: none;
    align-items: center;
}

#main-nav ul li a {
    padding: 0.75rem;
    font-size: 16px;
    margin: 0 0.25rem;
    color: #26272d;
}

#main-nav ul li a:hover {
    color: #bebebf;
}


.apple {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 20px;
    color: #fff;
    background: #267df4;

}

.apple i {
    margin-right: 10px;
}
4

2 回答 2

2

尝试在 1 个列表中添加您的徽标和所有导航链接，ul而不是使用 2 个列表。像这样的东西：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}
<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

对于响应式部分，请尝试使用一些媒体查询。我建议您将您的徽标添加到列表顶部，并在移动设备上仅显示顶部徽标，在宽屏幕上仅显示中间徽标。例如：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}

/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  ul.menu li {
    display: block;
  }
}
<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

最后，为了在桌面设备屏幕的左侧和右侧很好地获取菜单链接，同时保持徽标居中，您可以在菜单中使用 CSS 网格。结果看这个例子：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}


/* Changed to grid */

#main-nav ul {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
  width: 100%;
  list-style: none;
  align-items: center;
  text-align: center;
}


/**/

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}


/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  #main-nav ul {
    grid-template-columns: 100%;
  }
  ul.menu li {
    display: block;
  }
}
<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

于 2019-03-30T19:36:38.407 回答
0

在标签处只给出 style="height:something in percent example :20 percent ; width :in some percent

于 2019-03-30T20:16:14.743 回答