久久亚洲嗯啊av,人妻(中文字幕),国产精品秘入口a级熟女

　Position方式構建B/S結構軟件界面

作者：wiseinfo　時間： 2007-12-25　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁 Position方式構建B/S結構軟件界面 [1]
第 2 頁 Position方式構建B/S結構軟件界面 [2]
第 3 頁 Position方式構建B/S結構軟件界面 [3]
第 4 頁 Position方式構建B/S結構軟件界面 [4]
第 5 頁 Position方式構建B/S結構軟件界面 [5]

代碼1-7

看一下代碼1-7 的頁面（Firefox瀏覽器），發(fā)現(xiàn) mainDiv 并沒有被 padding 和 border 撐大了。這正是利用了 body>#mainDiv 這一種CSS的Hack寫法來解決了問題。具體的我就不多說了，想必大家一眼就能看明白（其實就相當于你告訴瀏覽器說：我要做一個盒子，盒子大小你看著辦，但盒子的左邊和右邊都要距離墻0px遠）。但 padding屬性還是在很多時候影響了 position方式，所以我們盡量不在標準盒模型的布局中使用它�？苫叵胍幌略� 非標準盒模型中 padding屬性可是非常重要的一部分。那么為了兼容2種模型，我們使用另一種CSS的Hack寫法，在CSS屬性前邊加”_”來使這一屬性只有IE6.0才能識別并解釋，而標準盒模型的瀏覽器都不能解釋這一CSS屬性。

應用 position方式

綜合我們上邊說過的方法來整理一下代碼讓我們看看 position方式能帶給我們的效果吧！

代碼1-8

運行代碼框
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="middleDiv"></div> <div id="rightDiv"></div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

這段通過 position方式構建出的代碼可以完美的運行在 IE6.0\IE7.0\Firefox\Opera\Safari 瀏覽器中來實現(xiàn)布局結構。如果有天你想要對你的軟件界面進行又改了那你也通過單純修改CSS樣式表的方式來

修改布局結構而不用變動丁點Html代碼。

代碼1-9

運行代碼框
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="middleDiv"></div> <div id="rightDiv"></div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

通過對布局結構的組合你還可以通過 position方式構建出更復雜的結構。

代碼1-10

運行代碼框
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="rightDiv"> <div id="topDiv"></div> <div id="centerDiv"></div> <div id="bottomDiv"></div> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

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

上一頁 Position方式構建B/S結構軟件界面 [3] 下一頁 Position方式構建B/S結構軟件界面 [5]

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

相關文章

(100-1)% 的內容是導航


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

站點最新

站點最新列表

周大�！熬�•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

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

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

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

阿里行云

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

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

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

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

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

如何在illustrator中繪制臺歷

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

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

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

CSS定位機制之一:普通流

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

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

Photoshop制作印刷凹凸字體

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

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