|
解釋 position方式
position方?在根本上是利用了 Html+CSS 的 盒模型，在這里我就不過多的解釋 盒模型 了。但要說的是由于不同瀏覽器或相同瀏覽器不同版本（且不說哪個瀏覽器的好壞，但同瀏覽器不同版本的極大差別只有某公司的某種瀏覽器的6.0版本和7.0版本才有這樣的如黃色粘稠物一樣的問題）之間的兼容性問題我們是采用了2種方式利用 盒模型 的。這2種方式分別來自 IE6.0 的 非標準盒模型 及 Firefox 為代表的 標準盒模型 。
說道解釋 盒模型 我們不能不提一下 DOCTYPE，因為 DOCTYPE 對瀏覽器解釋 盒模型 有著非常大的影響。尤其體現(xiàn)在 IE6.0 的 非標準盒模型 的解釋上。這其中的差異我就不多說了，這樣的文章遠有比我寫的好的。在這里我只說一下我的做法：
代碼1-1
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
很多人可能會說我的 DOCTYPE 寫的有問題，因為按照標準 DOCTYPE 必須要書寫在文件的首行。這可不是我發(fā)明的寫法，最早看到這種寫法是在 Adobe.com（最近改版的版本已經(jīng)放棄了這樣的寫法） 。第一行是聲明 XML文檔 編碼為UTF-8，第二行是聲明 DOCTYPE 類型 為 xhtml1-Strict 。其實這算是 DOCTYPE 的一種Hack寫法，由于 DOCTYPE 沒有寫在第一行 IE6.0 及以下版本瀏覽器不解釋，而 IE7.0\Firefox\Opera\Safari 卻可以解釋。我測試了很久發(fā)現(xiàn)這確實是一種不錯的選擇，因為 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結構 軟件界面時所傾向于的做法。它可以幫助我們將頁面格式化為無整頁滾動條，并根據(jù)瀏覽器窗口尺寸時時自動適應。
出處：藍色理想
責任編輯：moby
上一頁 Position方式構建B/S結構軟件界面 [1] 下一頁 Position方式構建B/S結構軟件界面 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 Position方式構建B/S結構軟件界面 [2]
