|
解释 position方式
position方?在根本上是利用了 Html+CSS 的 盒模型，在这里我就不过多的解释 盒模型 了。但要说的是由于不同浏览器或相同浏览器不同版本（且不说哪个浏览器的好坏，但同浏览器不同版本的极大差别只有某公司的某种浏览器的6.0版本和7.0版本才有这样的如黄色粘稠物一样的问题）之间的兼容性问题我们是采用了2种方式利用 盒模型 的。这2种方式分别来自 IE6.0 的 非标准盒模型 及 Firefox 为代表的 标准盒模型 。
说道解释 盒模型 我们不能不提一下 DOCTYPE，因为 DOCTYPE 对浏览器解释 盒模型 有着非常大的影响。尤其体现在 IE6.0 的 非标准盒模型 的解释上。这其中的差异我就不多说了，这样的文章远有比我写的好的。在这里我只说一下我的做法：
代码1-1
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
很多人可能会说我的 DOCTYPE 写的有问题，因为按照标准 DOCTYPE 必须要书写在文件的首行。这可不是我发明的写法，最早看到这种写法是在 Adobe.com（最近改版的版本已经放弃了这样的写法） 。第一行是声明 XML文档 编码为UTF-8，第二行是声明 DOCTYPE 类型 为 xhtml1-Strict 。其实这算是 DOCTYPE 的一种Hack写法，由于 DOCTYPE 没有写在第一行 IE6.0 及以下版本浏览器不解释，而 IE7.0\Firefox\Opera\Safari 却可以解释。我测试了很久发现这确实是一种不错的选择，因为 DOCTYPE 没让IE6.0变得更好反而更糟。所以我之后的 盒模型 都是基于这种 DOCTYPE 写法基础来解释的。
先来说 IE6.0 的 非标准盒模型，让人郁闷的是这个 非标零件 因为他的广泛使用却成为了我们必须考虑的标准。IE6.0在解释 双盒嵌套 （<div><div></div></div>） 中，子Div宽度被设置为100% 时其真实宽度为 父Div 宽度 – 父Div 边线宽度 - 父Div 内补丁宽度。父Div 真实宽度为设置宽度。
代码1-2
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
以上边代码为例（见代码1-2），父Div testDiv1 的真实宽度为设置的宽度600px，子Div testDiv2 的真实宽度为600px - padding-left:100px - padding-right:100px = 400px
这代码对我们有什么意义呢？看一下 代码1-2 的页面（IE6.0浏览器），从左到右分别是 黄-蓝-黄，这有没有点像是”左-中-右”的布局结构呢？让我们修改一下代码再看看。
代码1-3
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]看一下 代码1-3 的页面（IE6.0浏览器），从上倒下分别是 黄-蓝-黄，这有没有点像是”上-中-下”的布局结构呢？可能你会想我是不是疯了！这个谁不知道啊！这是最简单不过的代码了……
让我们来让这些代码变得更有意义吧！在这之前我们需要先要引入一段基础代码。这段代码是我在做 B/S结构 软件界面时所倾向于的做法。它可以帮助我们将页面格式化为无整页滚动条，并根据浏览器窗口尺寸时时自动适应。
出处：蓝色理想
责任编辑：moby
上一页 Position方式构建B/S结构软件界面 [1] 下一页 Position方式构建B/S结构软件界面 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 2 页 Position方式构建B/S结构软件界面 [2]
