html - 如何制作从页眉到页脚的菜单？-6ren

html - 如何制作从页眉到页脚的菜单？

转载作者：行者123 更新时间：2023-11-28 02:38:40

所以，我正在学习如何编写 HTML5、CSS3 和所有这些好东西。但我有一个问题这本书没有解决。您可能会看到，导航区域不会从页眉到页脚。我希望有人能帮助我理解如何让它从页眉到页脚。也许这只是一个简单的填充。但我不想弄乱布局。希望我不是在问一个愚蠢的问题。

/*HEADER*/

header {
  border: 3px solid black;
}

/*BODY*/

nav {
  float: left;
  clear: both;
  width: 20%;
  border: 3px solid black;
}


section {
  float: left;
  width: 75%;
  padding-left: 1em;
  border: 3px solid black;
}
article {
  float: left;
  width: 75%;
  padding-left: 1em;
  border: 3px solid black;
}

/*FOOTER*/

footer {
  text-align: center;
  clear: both;
  border: 3px solid black;
}

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          type="text/css"
          href="semanticTags.css"/>
    <title>
      Semantic Tags
    </title>
    <body>
      <header>
        <h1>This is my header</h1>
      </header>
      
      <nav>
        <h2>Navigation</h2>
        <ul>
          <li><a href="google.com">Google</a></li>
          <li><a href="Bing.com">Bing</a></li>
          <li><a href="Yahoo.com">Yahoo</a></li>
          <li><a href="Aol.com">AOL</a></li>
          <li><a href="Facebook.com">Facebook</a></li>
        </ul>
      </nav>
      
      <section id="1">
        <h2>
          Section 1
        </h2>
        <p>
          Section Body
        </p>
      </section>
      
      <section id="2">
        <h2>
          Section 2
        </h2>
        <p>
          Section Body
        </p>
      </section>
      
      <article>
        <h2>
          Article
        </h2>
        <p>
          Article Body
        </p>
      </article>
      
      <footer>
        <h2>footer</h2>
        <address>
          DreamRiskers<br>
          <a href="mailto:email@gmail.com">
            email@gmail.com
          </a>
        </address>
      </footer>
      
    </body>
  </head>
</html>