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