商院官网：首页的布局

来自CloudWiki
Cloud17（讨论 | 贡献）2019年10月30日 (三) 13:10的版本
跳转至： 导航， 搜索

要点

嵌套元素竖直排列

  • 子盒子的宽度等于父盒子的宽度、
  • 子盒子的高度之和等于父盒子

嵌套元素水平排列

  • 子盒子的宽度之和小于父盒子
  • 子盒子的高度等于父盒子、
  • 子盒子添加 float:left属性
  • 子盒子后面增加一个空白盒子，将其属性设置为clear:both，来清除浮动。

源代码

<!doctype html>
<html>
	<head>
         <meta charset="utf-8" />
         <title>我的网页</title>
         <style type="text/css">
		      .head{ width:100%;height:100px;background:#06F; }
			  .main{ width:100%;height:300px;background:#C90; }
			  .m1{ width:32%;height:300px;background:#39F;float:left;}
			  .m2{ width:32%;height:300px;background:#C60;float:left;}
			  .m3{ width:32%;height:300px;background:#F90;float:left;}
			  .clear {clear:both;}
			  .footer{ width:100%;height:100px;background:#06F; }
			  .f1{ width:100%;height:50px;background:#6FC;}
			  .f2{ width:100%;height:50px;background:#66C;}
		 </style>
    </head>
    <body>
         <div class="head"></div>
         <div class="main">
             <div class="m1"></div>
             <div class="m2"></div>
             <div class="m3"></div>
             <div class="clear"></div>
         </div>
         <div class="footer">
              <div class="f1"></div>
              <div class="f2"></div>
         </div>
    </body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=商院官网：首页的布局&oldid=14572”