主页 / 问题 / 1176103
Accepted
vladdv861 dvin
Asked:2020-09-09 15:26:45 +0000 UTC2020-09-09 15:26:45 +0000 UTC

创建响应式 WordPress 标头

  • 772
  1. 为 WordPress 网站创建响应式标头更好用 - floator flexor gridor bootstrap？
  2. 是否可以创建一个由两部分组成的菜单，其中一个向左（一个菜单项），另一个向右（所有其他菜单项），使用float: left（对于左侧的部分）和float: right（对于右边的部分）？（请提供初始位置的html代码：一个菜单项，一个中间部分和其余菜单项-指示对齐技术的菜单框架）。
  3. （给出一个示例代码，以便在缩小屏幕尺寸时，将右边的菜单部分转移到下一行，以及原来的位置）。
html

1 个回答

  1. Best Answer
    1. 根据网站的规则，你不应该在这里回答这个问题，因为客观上没有更好的选择。这完全取决于您的目标，即您的网站应该在哪些版本的浏览器上正常工作。尝试尝试所有选项，因为flex, 和grid, 和float都有自己的特点，然后你就会明白它对你来说有多方便。
    2. float使用满足条件的菜单示例

    * {
  margin: 0;
  padding: 0;
}

nav {
  width: 100vw;
  height: 90px;
  background-color: darkblue;
}

ul {
 list-style: none;
 height: 50px;
 margin: 20px 15px;
}

li {
  padding: 10px 0;
  float: left;
  background-color: cornflowerblue;
  width: 40px;
  height: 40px;
  text-align: center;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: white;
}

.left {
  width: 100px;
  max-width: 100px;
  float: left;
}

.right {
  max-width: 50%;
  float: right;
}

.right li {
  margin-left: 10px;
}
    <body>
  <nav>
     <ul class="left">
      <li><a href="#">1</a></li>
     </ul>
     <ul class="right">
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
     </ul>
  </nav>
</body>

    1. 我会给你同样的例子float，只是在 CSS 中对视口宽度小于 768px 的屏幕进行媒体查询，当到达这个 768px 的断点时，我会将菜单的右侧移动到下一行，并且保持其余样式不变。

    * {
  margin: 0;
  padding: 0;
}

nav {
  width: 100vw;
  height: 90px;
  background-color: darkblue;
}

ul {
 list-style: none;
 height: 50px;
 margin: 20px 15px;
}

li {
  padding: 10px 0;
  float: left;
  background-color: cornflowerblue;
  width: 40px;
  height: 40px;
  text-align: center;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: white;
}

.left {
  width: 100px;
  max-width: 100px;
  float: left;
}

.right {
  max-width: 50%;
  float: right;
}

.right li {
  margin-left: 10px;
}
@media only screen and (max-width: 768px) {
  nav {
    padding-top: 10px;
    height: 120px;
  }
  .left, .left li {
    float: none;
    margin: 0 auto;
  }
  
  .right {
    width: 210px;
    max-width: 100%;
    float: none;
    margin: 5px auto;
  }
}
    <body>
  <nav>
     <ul class="left">
      <li><a href="#">1</a></li>
     </ul>
     <ul class="right">
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
     </ul>
  </nav>
</body>

    • 1

相关问题