“弹性盒子布局案例：WordPress博客”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“==网页效果图== 600px 源网页：https://www.suxing.me ==网页布局图== *600px <nowiki><!DOCTYPE html> <h…”）
 
 
第19行： 第19行：
 
.main{width:80%;
 
.main{width:80%;
 
       margin:0 auto;
 
       margin:0 auto;
−
  height:600px;
+
      height:600px;
−
  display:flex;
+
      display:flex;
−
  flex-direction:row;
+
      flex-direction:row;
−
}
+
 
 +
}
 
.m1{width:70%;
 
.m1{width:70%;
 
     height:600px;
 
     height:600px;
−
background:#060;}
+
    background:#060;}
 
.m1-1{width:100%;
 
.m1-1{width:100%;
 
       height:300px;
 
       height:300px;
−
  background:#09C;}
+
      background:#09C;}
 
.m1-2{width:100%;
 
.m1-2{width:100%;
 
       height:150px;
 
       height:150px;
−
  background:#963;}
+
      background:#963;}
 
.m1-3{width:100%;
 
.m1-3{width:100%;
 
       height:150px;
 
       height:150px;
第44行： 第45行：
 
.m2-2{width:100%;
 
.m2-2{width:100%;
 
       height:200px;
 
       height:200px;
−
  background:#369;}
+
      background:#369;}
 
.clear{clear:both;}  
 
.clear{clear:both;}  
 
.footer{height:100px;
 
.footer{height:100px;
 
         width:100%;
 
         width:100%;
−
background:#CCC;}
+
background:#CCC;}
  
 
</style>
 
</style>

2019年12月20日 (五) 04:13的最新版本

网页效果图

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”