网站导航代码（关于列和行）答案

【问题标题】：code of website's navigation (about columns and rows)网站导航代码（关于列和行）
【发布时间】：2021-07-08 07:36:14
【问题描述】：

我写信是想在我编码的时候留下一个关于我的代码的问题。

我正在将网站的导航设计转换为代码。如果您查看作为图像附加的网站导航布局设计，则有 10 行和 8 列。于是我就这样写了代码。

enter image description here

我认为的问题是没有任何文字，10％的高度设置值没有体现出来。我想请你帮忙解决这个问题的位置和方法。

另外，我不是编码专家，所以如果你能用具体的代码测试回答我，我将不胜感激。

提前感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  * {
    box-sizing: border-box;
  }

  body {margin-top: 0; margin-left: 0; margin-right: 0;}

  /* Create four equal columns that floats next to each other */
  .column {
    float: left;
    width: 12.5%;
    padding: 0;
    height: 10%/* Should be removed. Only for demonstration */
  }

  .logo {
    float: left;
    width: 12.5%;
    padding: 0;
    height: 20%/* Should be removed. Only for demonstration */
  }

  .column2 {
    float: right;
    width: 87.5%;
    padding: 0;
    margin: 0;
    height: 10%; /* Should be removed. Only for demonstration */
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
    margin-top: 0;
  }
</style>
</head>


<body>

  <div class="row">

    <div class="logo" style="background-color:#aaa;">
      <h2>Column 1</h2>
    </div>

    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
    </div>

    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 4</h2>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 5</h2>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 6</h2>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 7</h2>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 8</h2>
    </div>

    <div class="column2" style="background-color:#ddd;">
      <h2>Column 8</h2>
    </div>

  </div> 

</body>
</html>

【问题讨论】：

标签： html css html-table navigation

【解决方案1】：

在这种情况下，您可以使用 CSS grid。所以我建议按照附件链接获取 CSS 网格的综合指南。

这是一个使用网格的例子。注意：我已经更改了您的 HTML 结构。

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

header {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo nav" "logo notice";
}

.logo {
  background: red;
  grid-area: logo;
  padding: 10px;
  text-align: center;
}

nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: nav;
}

.notice {
  background: blue;
  grid-area: notice;
  padding: 10px;
}

nav a {
  padding: 10px;
  border-right: 1px dashed gray;
  text-align: center;
}

main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

main>div {
  padding: 10px;
  border-right: 1px dashed gray;
  border-bottom: 1px dashed gray;
  text-align: center;
}

  <div class="container">
    <header>
      <div class="logo">Logo</div>
      <nav>
        <a href="#">About</a>
        <a href="#">Exibition</a>
        <a href="#">Shop</a>
        <a href="#">&nbsp;</a>
        <a href="#">&nbsp;</a>
        <a href="#">&nbsp;</a>
        <a href="#">En</a>
      </nav>
      <div class="notice">Space for Notice</div>
    </header>
    <main>
      <!-- First Row -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>

      <!-- Second Row -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>

      <!-- Other Rows Upto 8 -->
    </main </div>

【讨论】：

别忘了采纳答案，对别人也有帮助