查看“盒子的嵌套布局”的源代码
←
盒子的嵌套布局
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
该页面已被保护以防止编辑和其他操作。
您可以查看与复制此页面的源代码。
== 前情回顾 == [[盒子的基本布局]] ==盒子的嵌套布局== *以上两种布局,在进行简单网页设计的时候还可以 *但是在进行比较复杂的布局的时候往往力不从心: *[[文件:W3-37.png]] ===盒子的嵌套技术=== *盒子嵌套:在大盒子中嵌套小盒子 *思想:体现的是模块化设计思想 *具体方法:我们可以先在网页中用大一点的盒子进行框架的布局,然后再将每个盒子划分为更小的盒子,这就是盒子的嵌套。 === 嵌套元素竖直排列 === *子盒子的宽度等于父盒子的宽度、 *子盒子的高度之和等于父盒子 *[[文件:w3-47.png]] *源代码: <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .layer2{width:100%; height:200px;} .layer2-1{width:100%; height:100px; background:red;text-align:center;} .layer2-2{width:100%; height:100px; background:orange;text-align:center;} </style> </head> <body> <div class="layer2"> <div class="layer2-1"><h2>盒子2-1</h2></div> <div class="layer2-2"><h2>盒子2-2</h2></div> </div> </body> </html></nowiki> === 嵌套元素水平排列 === 要点: *子盒子的宽度之和小于父盒子 *子盒子的高度等于父盒子、 *子盒子添加 float:left属性 *子盒子后面增加一个空白盒子,将其属性设置为clear:both,来清除浮动。 *[[文件:w3-46.png]] *源代码: <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .layer2{width:100%;} .layer2-1{width:40%; height:200px; background:red;text-align:center;float:left;} .layer2-2{width:60%; height:200px; background:orange;text-align:center;float:left;} .clear{clear:both;} </style> </head> <body> <div class="layer2"> <div class="layer2-1"><h2>盒子2-1</h2></div> <div class="layer2-2"><h2>盒子2-2</h2></div> <div class="clear"></div> </div> </body> </html></nowiki>
返回至
盒子的嵌套布局
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息