Html5 语义元素案例：WordPress博客

来自CloudWiki
跳转至： 导航， 搜索

网页效果图

Web8-16.png

源网页：https://www.suxing.me

网页布局图

  • Web8-17.png


<!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>
取自“http://www.openbrains.net/mediawiki/index.php?title=Html5_语义元素案例：WordPress博客&oldid=15539”