<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>header、footer</title>
<style type="text/css">
body{height: 600px}
header{width: 100%;height: 10%;background: red}
#div0{width: 30%;height: 80%;background: green;float: left; }
#div1{width: 70%;height: 80%;background: gray;float: left; }
footer{width: 100%;height: 10%;background: blue;clear: left;}
</style>
</head>
<body>
<header>头部</header>
<div id="div0">左</div><div id="div1">右</div>
<footer>底部</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article</title>
</head>
<body>
<article>
<article>
<header><h1>文章一标题</h1></header>
<p>文章正文<br>文章正文<br>文章正文<br></p>
<footer><h3>文章底部文章底部文章底部</h3></footer>
</article>
<article>
<header><h1>文章二标题</h1></header>
<p>文章正文<br>文章正文<br>文章正文<br></p>
<footer><h3>文章底部文章底部文章底部</h3></footer>
</article>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
<style type="text/css">
nav{width: 100%;height: 40px;background: green;text-align: center;padding: 6px}
li{display: inline;}
a{text-decoration: none;}
</style><!--display:inline作用是使无序列表显示于一行。text-decoration: none的作用是去掉超链接的下划线。-->
</head>
<body>
<nav>
<ul>
<li><a href="">链接1</a></li>
<li><a href="">链接1</a></li>
</ul>
</nav>
</body>
</html>