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>
原文：http://www.cnblogs.com/xiongjiawei/p/6724373.html