国产人碰人摸人爱视频日日,亚洲中文有码字幕日本第一页

　div仿框架方法詳解

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

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

再用下我們的二列布局知識來完成最終形態(tài)，在此我們將艷遇著名的3px bug（不喜歡它可以找點別的辦法）：

運行代碼框
<!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;} .side { height:100%; float:left; width:200px; overflow:auto; position:relative;} .main { height:100%; margin-left:207px; overflow:auto; position:relative;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 再分出兩列（還是請在ie6下瀏覽） </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

現(xiàn)在我們擁有了ie6的仿框架和非ie6的div仿框架的最終形態(tài)，只需要利用hack做個簡單的加法則行了：
（當然，同一屬性寫兩遍，后面的屬性所對應(yīng)的值將覆蓋前者，這個基礎(chǔ)的優(yōu)先級基礎(chǔ)大家還需要溫故一下。）
（再“當然”一下——當然，有人對hack深惡痛絕，那么請在使用之前，閱讀此文看看是否能消消心頭之恨。）

運行代碼框
<!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 { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 讓我們蕩起雙槳 一個兼容性很好的div仿框架的基礎(chǔ)概型便完成了 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

它很強大而實用，真的：

運行代碼框
<!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,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:100px; bottom:100px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .mainTop { position:absolute; height:30px; top:60px; left:220px; right:10px;} .mainBottom { position:absolute; height:30px; bottom:60px; left:220px; right:10px;} /*--- ie6 ---*/ html { _padding:100px 10px;} .top { _margin-top:-90px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _padding:30px 0; _margin-top:-30px; _float:left; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainTop { _margin-bottom:10px; _margin-left:210px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainBottom { _margin-top:10px; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="mainTop"></div> <div class="side"> </div> <div class="main"> 如果您有豐富的想象力，還可以玩些更刺激的。 </div> <div class="mainBottom"></div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

出處：藍色理想
責任編輯：bluehearts

上一頁 div仿框架方法詳解 [2] 下一頁 div仿框架方法詳解 [4]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(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標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設(shè)計大賽開啟

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

中國國防科技信息中心標志征集

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

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

阿里行云

云手機年終巨獻，送禮標配299起

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

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

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

欄目最新

欄目最新列表

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

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

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

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

CSS定位機制之一:普通流

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

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

Photoshop制作印刷凹凸字體

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

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