因此,我正在学习如何编写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纯黑色;
背景颜色:黄色; }