弹性盒子布局案例：WordPress博客

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

网页效果图

Web8-16.png

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

网页布局图

  • Web8-17.png


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.header{width:100%;
        height:50px;
		background:#333;	
}
.main{width:80%;
      margin:0 auto;
      height:600px;
      display:flex;
      flex-direction:row;

}
.m1{width:70%;
    height:600px;
    background:#060;}
.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;
}
.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>
        <div class="header"></div>
        <div class="main">
            <div class="m1">
                <div class="m1-1"></div>
                <div class="m1-2"></div>
                <div class="m1-3"></div>
              </div>
            <div class="m2">
                <div class="m2-1"></div>
                <div class="m2-2"></div>
             </div>
            
          </div>
        <div class="footer"></div>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=弹性盒子布局案例：WordPress博客&oldid=15537”