查看“商院官网:首页的布局”的源代码
←
商院官网:首页的布局
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==盒子的布局== [[文件:web9-14.png|700px]] === 嵌套元素竖直排列 === *子盒子的宽度等于父盒子的宽度、 *子盒子的高度之和等于父盒子 === 嵌套元素水平排列 === *子盒子的宽度之和小于父盒子 *子盒子的高度等于父盒子、 *子盒子添加 float:left属性 *子盒子后面增加一个空白盒子,将其属性设置为clear:both,来清除浮动。 ==源代码== <nowiki> <!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> </nowiki>
返回至
商院官网:首页的布局
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息