Html5 语义元素案例：WordPress博客
来自CloudWiki
网页效果图
网页布局图
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
header{width:100%;
height:50px;
background:#333;}
.main{width:80%;
margin:0 auto;
height:600px;}
.m1{width:70%;
height:600px;
background:#060;
float:left;}
.m1-1{width:100%;
height:300px;
background:#09C;}
.m1-2{width:100%;
height:150px;
background:#963;}
.m1-3{width:100%;
height:150px;
background:#09C;}
.m2{width:30%;
height:600px;
background:#9F0;
float:left;}
.m2-1{width:100%;
height:200px;
background:#F93;}
.m2-2{width:100%;
height:200px;
background:#369;}
.clear{clear:both;}
footer{height:100px;
width:100%;
background:#CCC;}
</style>
<title>无标题文档</title>
</head>
<body>
<header></header>
<div class="main">
<div class="m1">
<div class="m1-1"></div>
<section class="m1-2"></section>
<section class="m1-3"></section>
</div>
<aside class="m2">
<section class="m2-1"></section>
<section class="m2-2"></section>
</aside>
<div class="clear"></div>
</div>
<footer>written by flyhorse</footer>
</body>
</html>
