Html5 语义元素案例：WordPress博客
来自CloudWiki
网页效果图
网页布局图
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<style type="text/css">
header{width:100%;
height:50px;
background:#333;}
nav{width:100%;height:50px;background:#999;}
.main{width:80%;
margin:0 auto;
height:auto;}
.m1{width:70%;
height:auto;
background:#060;
float:left;}
.m1-1{width:100%;
height:300px;
background:#09C;}
.m1-2{width:100%;
height:150px;
background:#963;
border:1px solid black;
margin:10px 0;}
.m1-3{width:100%;
height:150px;
background:#09C;}
.m2{width:30%;
height:auto;
background:#9F0;
float:left;}
.m2-1{width:100%;
height:100px;
background:#F93;
border:1px solid black;
margin:10px 0;}
.m2-2{width:100%;
height:200px;
background:#369;}
.clear{clear:both;}
footer{height:100px;
width:100%;
background:#CCC;}
/*当页面的宽度在600px ~ 900px之间的时候，手机屏*/
@media screen and (max-width: 900px){
.m1 {
width:100%;
}
.m2 {
display:none;
}
}
</style>
<title>无标题文档</title>
</head>
<body>
<header></header>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<div class="main">
<article class="m1">
<div class="m1-1"></div>
<section class="m1-2"></section>
<section class="m1-2"></section>
<section class="m1-2"></section>
</article>
<aside class="m2">
<section class="m2-1"></section>
<section class="m2-1"></section>
<section class="m2-1"></section>
<section class="m2-1"></section>
<section class="m2-1"></section>
</aside>
<div class="clear"></div>
</div>
<footer></footer>
</body>
</html>
