“商院官网:首页的布局”的版本间的差异
来自CloudWiki
第11行: | 第11行: | ||
==源代码== | ==源代码== | ||
− | <nowiki><! | + | <nowiki> |
− | <html> | + | |
− | + | <!DOCTYPE html> | |
− | + | <html> | |
− | + | <head> | |
− | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
− | + | <title>无标题文档</title> | |
− | + | <style type="text/css"> | |
− | + | .header{ | |
− | + | width:100%;height:300px;background:red; | |
− | + | } | |
− | + | ||
− | + | .a{width:100%;height:200px;background:#39C;} | |
− | + | .b{width:100%;height:100px;background:#3CF;} | |
− | + | .main{ | |
− | + | width:100%;height:auto;background:blue; | |
− | + | } | |
− | < | + | .c{width:100%;height:300px;background:#CF6;} |
− | + | .c1{width:50%;height:300px;background:#C39;float:left;} | |
− | + | .c2{width:50%;height:300px;background:#C63;float:left;} | |
− | + | .d{width:100%;height:300px;background:#F30;} | |
− | <div class=" | + | .d1{width:33%;height:300px;background:#C90;float:left;} |
− | + | .d2{width:33%;height:300px;background:#33F;float:left;} | |
+ | .d3{width:33%;height:300px;background:#F90;float:left;} | ||
+ | .e{width:100%;height:150px;background:#CF6;} | ||
+ | .clear{clear:both;} | ||
+ | .footer{ | ||
+ | width:100%;height:300px;background:green; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div class="header"> | ||
+ | <div class="a"></div> | ||
+ | <div class="b"></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="main"> | ||
+ | <div class="c"> | ||
+ | <div class="c1"></div> | ||
+ | <div class="c2"></div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
− | + | </div> | |
− | + | <div class="d"> | |
− | + | <div class="d1"></div> | |
− | + | <div class="d2"></div> | |
− | </div> | + | <div class="d3"></div> |
− | </body> | + | <div class="clear"></div> |
+ | </div> | ||
+ | <div class="e"> </div> | ||
+ | </div> | ||
+ | <div class="footer"> | ||
+ | |||
+ | </div> | ||
+ | </body> | ||
</html> | </html> | ||
+ | |||
</nowiki> | </nowiki> |
2019年11月27日 (三) 06:02的版本
要点
嵌套元素竖直排列
- 子盒子的宽度等于父盒子的宽度、
- 子盒子的高度之和等于父盒子
嵌套元素水平排列
- 子盒子的宽度之和小于父盒子
- 子盒子的高度等于父盒子、
- 子盒子添加 float:left属性
- 子盒子后面增加一个空白盒子,将其属性设置为clear:both,来清除浮动。
源代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .header{ width:100%;height:300px;background:red; } .a{width:100%;height:200px;background:#39C;} .b{width:100%;height:100px;background:#3CF;} .main{ width:100%;height:auto;background:blue; } .c{width:100%;height:300px;background:#CF6;} .c1{width:50%;height:300px;background:#C39;float:left;} .c2{width:50%;height:300px;background:#C63;float:left;} .d{width:100%;height:300px;background:#F30;} .d1{width:33%;height:300px;background:#C90;float:left;} .d2{width:33%;height:300px;background:#33F;float:left;} .d3{width:33%;height:300px;background:#F90;float:left;} .e{width:100%;height:150px;background:#CF6;} .clear{clear:both;} .footer{ width:100%;height:300px;background:green; } </style> </head> <body> <div class="header"> <div class="a"></div> <div class="b"></div> </div> <div class="main"> <div class="c"> <div class="c1"></div> <div class="c2"></div> <div class="clear"></div> </div> <div class="d"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="clear"></div> </div> <div class="e"> </div> </div> <div class="footer"> </div> </body> </html>