因此,我正在学习如何编写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>

最佳答案

我可以建议两种方法:


在您的html file中,添加:



  class="nav">


然后在您的css file中,进行:


  . nav {
  向左飘浮;
               清楚的

  width: 100%;
  height: 100%;

  
  边框:3px纯黑色;
  背景颜色:黄色; }


background-color仅用于区分。


在您的html file中,将<nav>标记放在<body>标记之后,然后
                         </nav>标记紧挨</body>标记

并使您的css file如下所示:



  导航{
  向左飘浮;
               清楚的

  width: 100%;
  height: 100%;

  
  边框:3px纯黑色;
  背景颜色:黄色; }

10-05 21:03
查看更多