|
代码1-4
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
看一下 代码1-4 的页面，并试着改变你浏览器的窗口尺寸。你会发现你得到了一个我许诺给你的。这段代码兼容 IE6.0\IE7.0\Firefox\Opera\Safari 。其实这个是我对 body标签 利用 position方式 的重构。你也可以记住这种方法，因为接下来我们很多时候都会用这种方法。
好了，让我们利用这段基础代码使之前再简单不过的代码变得有意义吧！'
代码1-5
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
看一下 代码1-5 的页面（IE6.0浏览器）， 展现在你面前的是一个标准的”左-中-右”布局结构。mainDiv 是 父Div，middleDiv 是 子Div 也是 主区域，middleDiv 利用了其 父Div 的 padding属性 来为两边的 leftDiv rightDiv 子Div 也是 辅区域 Div留出空白。mainDiv 相对 Body 宽度值是100%，middleDiv 相对 mainDiv 宽度值是100%，这就使得 middleDiv 的宽度相对浏览器窗口尺寸是自动调整的，高度亦同。leftDiv rightDiv 分别利用 left:0px; 和 right:0px; 来相对定位居左或居右对齐。试着改变你浏览器的窗口尺寸，看看效果吧！
你可能会说：”这算什么？ float方式 也可以啊！CSS的代码还比这个简单呢！”
那让我们来修改一下代码吧！这样可以实现的”上-中-下”布局结构，并且相对浏览器窗口尺寸是自动调整。这是 float方式 不能实现的。
代码1-6
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里要说明的是在 代码1-6 中的 bottom:-1px; 这是因为IE6.0浏览器对CSS解释错误而产生的手动修复，当 子Div 使用 bottom属性 并且其 父Div 的高度 真实值 为单数时， 子Div 的 Bottom属性 在浏览器表现出的 真实值 比 设置值 大1px。
不知道你看明白这些代码了没有，这些就是我所谓的 position方式 来实现的结构布局。你可能要说：”拽什么拽啊！你看看你的方式在Firefox中的样子吧！” 别急啊！之前不是说了么由于兼容性问题我们是采用了2种方式利用 盒模型 。现在让我们来说另外一种吧！
Firefox 为代表的 标准盒模型 这才是未来的王道。现在的 IE7.0\Opera\Safari 都可以非常好的遵循 标准盒模型 。标准盒模型 在解释 双盒嵌套 （<div><div></div></div>） 中，子Div 宽度被设置为100% 时其真实宽度为 父Div 的设置宽度。父Div 真实宽度为设置宽度 + 父Div 内补丁宽度 + 父Div 边线宽度。也就是说 父Div 的盒被撑大了。并且在 标准盒模型 中通常 height属性 是无效的。那我们有什么办法能解决这样的问题呢？看下边这段代码。
出处：蓝色理想
责任编辑：moby
上一页 Position方式构建B/S结构软件界面 [2] 下一页 Position方式构建B/S结构软件界面 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 3 页 Position方式构建B/S结构软件界面 [3]
