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