Question

我正在学习从头开始构建一个网站，以便我可以正确地学习如何构建一个不错的网站，但是我从导航栏入手，但是即使使用flexbox也无法响应，您想指定我正确的方向吗，我我正在使用媒体查询，但是我没弄清楚

* {
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 10vh;
  background-color: aqua;
  margin: 0;
  padding: 0;
}

.logo {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap
}

.first {
  list-style-type: none;
  margin-right: 30rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.second {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.first li {
  padding-left: 2rem;
}

.first li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.first li:hover {}

.second li {
  padding-left: 2rem;
}

nav ul li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
}

@media all and (max-width: 500px) {
  nav {
    flex-direction: column;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/style.css">
  <title>Document</title>
</head>

<body>
  <nav>
    <ul class="logo">
      <li> <a href="">brand</a></li>

    </ul>
    <ul class="first">
      <li> <a href=""> our products</a></li>

      <li> <a href=""> Title2</a></li>
      <li> <a href=""> Title3</a></li>
    </ul>


    <ul class="second">
      <li> <a href=""> En</a></li>
      <li> <a href=""> Login in</a></li>

    </ul>

  </nav>

</body>

</html>

Answer 1

这里的主要内容-您要确保为台式机设置branch c。我还将flex-direction: row的高度设置为auto，将宽度设置为nav，主要是出于代码演示的目的。由于某种原因，该代码演示在预览窗口中看起来不正确，但在全屏中正确显示。

100vw

* {
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  width: 100vw;
  height: auto;
  background-color: aqua;
  margin: 0;
  padding: 0;
}

.logo {
  list-style-type: none;
  display: flex;
}

.first {
  list-style-type: none;
  margin-right: 30rem;
  padding: 0;
  display: flex;
}

.second {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.first li {
  padding-left: 2rem;
}

.first li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.first li:hover {}

.second li {
  padding-left: 2rem;
}

nav ul li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
}

@media all and (max-width: 500px) {
  nav {
    flex-direction: column;
  }
}

Answer 2

让您将样式设置为“移动设备优先”

html, body, nav {
  margin: 0;
  padding: 0;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: aqua;
}

ul, li, a{
  color: #000;
  list-style-type: none;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  color: white;
}

.row {
  display: block;
}


@media all and (min-width: 500px) {
  .row {
    display: flex;
  }

  .col {
    flex: 1;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/style.css">
  <title>Document</title>
</head>

<body>
  <nav class="row">
    <ul class="col logo">
      <li> <a href="">brand</a></li>

    </ul>
    <ul class="col first">
      <li> <a href=""> our products</a></li>

      <li> <a href=""> Title2</a></li>
      <li> <a href=""> Title3</a></li>
    </ul>


    <ul class="col second">
      <li> <a href=""> En</a></li>
      <li> <a href=""> Login in</a></li>

    </ul>

  </nav>

</body>

</html>

Answer 3

对于不需要使用媒体查询的样式，可以使用flexbox构建所有菜单，我可以为CSS提议此代码并使用相同的HTML文件

 

   * {
    margin: 0;
    padding: 0;
}

nav {
    display: flex;
    width: 100%;
    background-color: aqua;
    flex-wrap: wrap;
    justify-content: space-between;
}

li {
    list-style-type: none;
    padding: 20px 25px 
}

ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto
}


.first li a {
    display: block;
    color: #000;
    text-decoration: none;
}

nav ul li a {
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    text-transform: uppercase;
}

Flexbox响应式导航栏

3 个答案: