亂倫近親相姦中文字幕av,亚洲男女一区二区三区

　div仿框架方法詳解

作者：14px　時間： 2009-05-19　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁 div仿框架方法詳解 [1]
第 2 頁 div仿框架方法詳解 [2]
第 3 頁 div仿框架方法詳解 [3]
第 4 頁 div仿框架方法詳解 [4]

以上方法其實早已由wiseinfo在 Html+CSS 構(gòu)建 B/S結(jié)構(gòu)軟件界面 — 布局篇 — position方式中進(jìn)行過介紹，在該文中，ie6亦是分而治之的，它的方法是在html代碼頂部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6進(jìn)入quirks mode（怪異模式）來完成ie6下的div仿框架，但這樣做將出現(xiàn)一些影響比較顯著的弊端：

quirks mode下的ie6連盒模型都變了，就是說你在頁面中寫任何內(nèi)容就要慎用padding和border，況且quirks mode下的變化還不止這一點(diǎn)。
如果底部使用絕對定位，則會發(fā)生“絕對定位基對象（在此為body）高度為偶數(shù)時，出現(xiàn)1px空隙”的bug。

運(yùn)行代碼框
<?xml version="1.0" encoding="UTF-8"?> <!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=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - 將ie6導(dǎo)入了quirks mode（怪異模式），很有弊端</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .div1 { background:#fc0; line-height:1.6; width:400px; height:100px; border:50px solid #f60; padding:20px;} .div2 { background:#f60; line-height:1.6; width:400px; height:100px; position:absolute; bottom:0; left:0;} </style> </head> <body> <div class="div1">該頁面請在ie6和非ie6下對比，ie6下連盒模型都變了，就是說你在頁面中寫任何內(nèi)容就要慎用padding和border，況且quirks mode下的變化還不止這一點(diǎn)。</div> <div class="div2"> 如果底部使用絕對定位，則會發(fā)生“絕對定位基對象（在此為body）高度為偶數(shù)時，出現(xiàn)1px空隙”的bug。<br /> 您可以試著改變?yōu)g覽器的大小進(jìn)行觀測。 </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

于是我們需要另辟蹊徑。

在很多次失敗之后，我終于發(fā)現(xiàn)有一個標(biāo)簽可以救ie6于水深火熱，那就是最偉大的“<html>”標(biāo)簽，它繼承了ie6 quirks mode（怪異模式）下的盒模型狀態(tài)。

運(yùn)行代碼框
<!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=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - ie6中，偉大的<html>標(biāo)簽繼承了ie6 quirks mode（怪異模式）下的盒模型狀態(tài)</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:50px; height:100%; background:#f60; overflow:hidden; background:#fff;} body { height:100%; background:#fc0; overflow:auto; line-height:1.6;} </style> </head> <body> <br /><br /><br /> 請使用ie6瀏覽本頁面<br /> ie6中，偉大的<html>標(biāo)簽繼承了ie6 quirks mode（怪異模式）下的盒模型狀態(tài)<br /> 這樣，我們便有了可乘之機(jī)<br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

利用這一點(diǎn)，我們可以在不太輕松的調(diào)整之后完成以下效果：

運(yùn)行代碼框
<!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=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - 先分出三行來</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;} body { height:100%; background:#fff; overflow:hidden;} div { background:#f60; line-height:1.6;} .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;} .main { height:100%;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="main">先分出三行來（請在ie6下瀏覽）</div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 div仿框架方法詳解 [1] 下一頁 div仿框架方法詳解 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

XPath詳解,總結(jié)

WebServices返回數(shù)據(jù)的4種方法比較

利用CSS布局到底有多難?

用div+css模擬表格對角線

Flex 3 RIA開發(fā)詳解與精深實踐

作者文章

層疊加的五條疊加法則

超過寬度顯示省略號(無js全兼容)


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx