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>