<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新元素新布局模板</title>
<style type="text/css">
body{height: 608px}
header{background: red; 100%;height: 10%}
aside{ 20%;height: 100%;float: left;background: #f0f0f0}
section{ 80%;height: 100%;float: left;background: #f8f8f8}
footer{background: red; 100%;height: 10%;clear: left;}
nav{ 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-新元素新布局模板
天道酬勤，厚积薄发。
君子之行，静以修身，俭以养德。
非淡泊无以明志，非宁静无以致远。
如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。