<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新元素新布局模板</title>
<style type="text/css">
body{height: 608px}
header{background: red;width: 100%;height: 10%}
aside{width: 20%;height: 100%;float: left;background: #f0f0f0}
section{width: 80%;height: 100%;float: left;background: #f8f8f8}
footer{background: red;width: 100%;height: 10%;clear: left;}
nav{width: 100%;height:50%;text-align: center;padding: 6px;}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
</ul>
</nav>
</header>
<aside>
<div id="div1">侧边</div>
</aside>
<section>
<div id="div2">主体</div>
</section>
<footer>底部</footer>
</body>
</html>
html5-新元素新布局模板
原文地址：http://www.cnblogs.com/houweidong/p/7517884.html