Question

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

＆＃13;

/*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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

使用位置：固定; css属性设置导航从上到下。下面的代码将帮助您获得预期的输出。

/*HEADER*/

header {
  border: 3px solid black;
	margin-left:21%;
}

/*BODY*/

nav {
  float: left;
  clear: both;
  width: 20%;
  border: 3px solid black;
	position:fixed;
	top:0;
	bottom:0;
	height:100%;
}


section {
  float: left;
  width: 75%;
  margin-left: 21%;
  border: 3px solid black;
}
article {
  float: left;
  width: 75%;
  margin-left: 21%;
  border: 3px solid black;
}

/*FOOTER*/

footer {
  text-align: center;
  clear: both;
  border: 3px solid black;
	margin-left:21%;
}

      <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>

Answer 2

我可以通过两种方式提出建议：

在您的html file中添加：

＆LT;正文class="nav"＆gt;

并在css file中，制作：

. nav {
  float：left;
               明确：两者;
  width: 100%;
  height: 100%;
边框：3px纯黑色;
背景颜色：黄色; }

background-color 仅用于区分。

html file

，在<nav>标记之后添加<body>标记， </nav>标记
之前的</body>标记
并按以下方式制作css file：

nav {
  float：left;
               明确：两者;
  width: 100%;
  height: 100%;
边框：3px纯黑色;
背景颜色：黄色; }

Answer 3

好的，我明白了。所以我没注意<header>标签的位置。由于某些原因，我的文件标题低于<nav>标记。将<header>标记放在<nav>

之后

感谢您试图帮助我。：）

header {
  text-align: center;
  border-bottom: 3px double black;
}

/*BODY*/

nav {
  float: left;
  clear: left;
  width: 15%;
  min-height: 400px;
  border-right: 1px solid black;
}


section {
  float: left;
  width: 75%;
  padding-left: 1em;
}
article {
  float: left;
  width: 75%;
  padding-left: 1em;
}

/*FOOTER*/

footer {
  text-align: center;
  clear: both;
  border-top: 3px double 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 class="nav">
      <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>

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

3 个答案: