查看“盒子的布局”的源代码
←
盒子的布局
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
该页面已被保护以防止编辑和其他操作。
您可以查看与复制此页面的源代码。
==整体布局== *[[文件:W3-35.png]] *任何一个网页的设计,一开始先规划大的整体布局,设计几个大的盒子。 *源代码: <nowiki><!doctype html> <html> <head> <title>我的第一个 HTML 页面</title> <meta charset="gb2312"> <style type="text/css"> *{margin:0;padding:0;} #layer1{width:100%; height:120px; background:blue;} #layer2{width:100%;height:450px;background-color:lightblue;} #layer3{width:100%; height:80px; background:green;} </style> </head> <body> <div id="layer1"></div> <div id="layer2"></div> <div id="layer3"></div> </body> </html></nowiki> ==盒子嵌套== *完成下列布局 *[[文件:7-5.png]] **先在网页中用大一点的盒子进行框架的布局,然后再在每个盒子中嵌套更小的盒子 **当盒子内部的元素需要竖直排列时,不需要增加额外的属性,盒子内的元素按先后顺序上下排列。 **当盒子内部的元素需要水平排列时,要给需要浮动的元素添加float属性;同时,要在盒子内部的最后,增加一个空白盒子,将其属性设置为clear:both。 *源代码: <nowiki><!doctype html> <html> <head> <title>我的第一个 HTML 页面</title> <meta charset="gb2312"> <style type="text/css"> *{margin:0;padding:0;} #layer1{width:100%; height:120px; background:blue;} #layer1-1{width:100%;height:80px;background-color:lightblue;} #layer1-2{width:100%;height:40px;background-color:darkblue;} #layer2{width:100%;height:auto;background-color:lightblue;} #layer2-1{width:45%; height:300px; background:gray;float:left;} #layer2-2{width:55%; height:300px;background:blue;float:left;} .clear{clear:both;} #layer3{width:100%; height:100px; background:green;} </style> </head> <body> <div id="layer1"> <div id="layer1-1"></div> <div id="layer1-2"> </div> </div> <div id="layer2"> <div id="layer2-1"></div> <div id="layer2-2"> </div> <div class="clear"></div> </div> <div id="layer3"></div> </body> </html></nowiki> ==盒子蚀刻== *完成下列布局 *[[文件:7-6.png]] 知识点:[[盒子的基本属性]] *当我们需要设置盒子之间的间距时, *如果是同一级的,可以设置他们的margin值; *如果是父子关系的盒子,可以设置父盒子的padding值。
返回至
盒子的布局
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息