|
代碼1-4
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
看一下 代碼1-4 的頁面，并試著改變你瀏覽器的窗口尺寸。你會發(fā)現(xiàn)你得到了一個我許諾給你的。這段代碼兼容 IE6.0\IE7.0\Firefox\Opera\Safari 。其實這個是我對 body標簽 利用 position方式 的重構(gòu)。你也可以記住這種方法，因為接下來我們很多時候都會用這種方法。
好了，讓我們利用這段基礎(chǔ)代碼使之前再簡單不過的代碼變得有意義吧！'
代碼1-5
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
看一下 代碼1-5 的頁面（IE6.0瀏覽器）， 展現(xiàn)在你面前的是一個標準的”左-中-右”布局結(jié)構(gòu)。mainDiv 是 父Div，middleDiv 是 子Div 也是 主區(qū)域，middleDiv 利用了其 父Div 的 padding屬性 來為兩邊的 leftDiv rightDiv 子Div 也是 輔區(qū)域 Div留出空白。mainDiv 相對 Body 寬度值是100%，middleDiv 相對 mainDiv 寬度值是100%，這就使得 middleDiv 的寬度相對瀏覽器窗口尺寸是自動調(diào)整的，高度亦同。leftDiv rightDiv 分別利用 left:0px; 和 right:0px; 來相對定位居左或居右對齊。試著改變你瀏覽器的窗口尺寸，看看效果吧！
你可能會說：”這算什么？ float方式 也可以啊！CSS的代碼還比這個簡單呢！”
那讓我們來修改一下代碼吧！這樣可以實現(xiàn)的”上-中-下”布局結(jié)構(gòu)，并且相對瀏覽器窗口尺寸是自動調(diào)整。這是 float方式 不能實現(xiàn)的。
代碼1-6
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
這里要說明的是在 代碼1-6 中的 bottom:-1px; 這是因為IE6.0瀏覽器對CSS解釋錯誤而產(chǎn)生的手動修復(fù)，當 子Div 使用 bottom屬性 并且其 父Div 的高度 真實值 為單數(shù)時， 子Div 的 Bottom屬性 在瀏覽器表現(xiàn)出的 真實值 比 設(shè)置值 大1px。
不知道你看明白這些代碼了沒有，這些就是我所謂的 position方式 來實現(xiàn)的結(jié)構(gòu)布局。你可能要說：”拽什么拽啊！你看看你的方式在Firefox中的樣子吧！” 別急��！之前不是說了么由于兼容性問題我們是采用了2種方式利用 盒模型 �，F(xiàn)在讓我們來說另外一種吧！
Firefox 為代表的 標準盒模型 這才是未來的王道�，F(xiàn)在的 IE7.0\Opera\Safari 都可以非常好的遵循 標準盒模型 。標準盒模型 在解釋 雙盒嵌套 （<div><div></div></div>） 中，子Div 寬度被設(shè)置為100% 時其真實寬度為 父Div 的設(shè)置寬度。父Div 真實寬度為設(shè)置寬度 + 父Div 內(nèi)補丁寬度 + 父Div 邊線寬度。也就是說 父Div 的盒被撐大了。并且在 標準盒模型 中通常 height屬性 是無效的。那我們有什么辦法能解決這樣的問題呢？看下邊這段代碼。
出處：藍色理想
責任編輯：moby
上一頁 Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面 [2] 下一頁 Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面 [3]
