<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header/footer</title>
<style type="text/css">
body{height: 708px}
header{background: red; 100%;height: 10%}
footer{background: red; 100%;height: 10%}
#div0{ 100%;height: 80%}
#div1{ 20%;height: 100%;float: left;background: #f0f0f0}
#div2{ 80%;height: 100%;float: left;background: #f8f8f8}
</style>
</head>
<body>
<!-- <pre>
1类,控制页面内容;
2类,辅助内容;
布局新标签,注重内容不是注重形式,语义化,可控性,代码更加简洁,浏览器容易解析
</pre> -->
<header>头部</header>
<div id="div0">
<div id="div1">侧边</div>
<div id="div2">主体</div>
</div>
<footer>底部</footer>
</body>
</html>
html5-新布局元素header,footer
天道酬勤,厚积薄发。
君子之行,静以修身,俭以养德。
非淡泊无以明志,非宁静无以致远。
如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。