<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script>
document。createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height: 100px; background: #9F3; display: block;}
article{padding:10px; background: #CF6; overflow: hidden; zoom:1; position: relative; display: block;}
section{margin-left:210px; background:#F90; height:300px; width: 800px; position: absolute; left: 10px;top: 10px; display: block;}
aside{width:200px; height:300px; background: #F90; height:300px; display: block;}
footer{height:100px; background: #C6C; display: block;}
</style>
</head>
<body>
<header>页面头部部分</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>内容部分</footer>
</body>
</html>
兼容ie 6 7 8
原文：http://www.cnblogs.com/hack-ing/p/6239969.html