1、 HYPERLINK /e/400477637.htm o DIV CSS布局：CSS浮動(dòng)float屬性詳解 DIV CSS布局：CSS浮動(dòng)float屬性詳解在傳統(tǒng)的表格布局中，我們對(duì)表格應(yīng)該對(duì)齊方式對(duì)實(shí)現(xiàn)了對(duì)布局的應(yīng)用，而應(yīng)用Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)頁(yè)以后，float浮動(dòng)屬性是布局中非常重要的屬性，我們常常通過(guò)對(duì)div元素應(yīng)用float浮動(dòng)來(lái)進(jìn)行布局，不但對(duì)整個(gè)版式進(jìn)行規(guī)劃，也可以對(duì)一些基本元素如導(dǎo)航等進(jìn)行排列。我們來(lái)看看float屬性基本釋義：該屬性的值指出了對(duì)象是否及如何浮動(dòng)。當(dāng)該屬性不等于none引起對(duì)象浮動(dòng)時(shí)，對(duì)象將被視作塊對(duì)象(block-level)，即display屬性等于block。

2、也就是說(shuō)，浮動(dòng)對(duì)象的display特性將被忽略。float屬性的參數(shù)： none：對(duì)象不浮動(dòng)left：對(duì)象浮在左邊right：對(duì)象浮在右邊下面我們通過(guò)一些測(cè)試來(lái)了解可能出現(xiàn)的一些情況，如果float取值為none則不會(huì)發(fā)生任何浮動(dòng)，塊元素獨(dú)占一行，緊隨其后的塊元素將在新行中顯示，如下圖：我們看下面的運(yùn)行效果：Source Code to Run 52CSS #content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:

3、80px;border:1px solid #000; margin:10px; background:#999; 52CSS.com這是第一個(gè)DIV 52CSS.com這是第二個(gè)DIV 可先修改部分代碼 再運(yùn)行查看效果 我們對(duì)content_a應(yīng)用向左的浮動(dòng)。而content_b不應(yīng)用任何浮動(dòng)。Source Code to Run 52CSS #content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;he

4、ight:80px; border:1px solid #000; margin:10px; background:#999; 52CSS.com 這是第一個(gè)DIV 向左浮動(dòng) 52CSS.com 這是第二個(gè)DIV 不應(yīng)用浮動(dòng) 可先修改部分代碼 再運(yùn)行查看效果 我們看在IE6中的效果：我們看在FF中的效果：在IE中，對(duì)content_a應(yīng)用向左的浮動(dòng)后，content_a向左浮動(dòng)，content_b在水平方向僅跟著它的后面。在FF中，對(duì)content_a應(yīng)用向左的浮動(dòng)后，content_b在水平方向容器不可見(jiàn)，只留下了文字。這是由于未清除浮動(dòng)所造成的現(xiàn)象，關(guān)于清除浮動(dòng)，可以參考這里： HYPER

5、LINK /article.asp?id=132 t _blank /article.asp?id=132 （overflow:auto;）這就是IE與FF對(duì)此種情況的不同解決，我們?cè)趯?shí)際布局中，應(yīng)該避免這樣的情況發(fā)生。我們同時(shí)對(duì)這兩個(gè)容器應(yīng)用向左的浮動(dòng)看看發(fā)生的現(xiàn)象。Source Code to Run 52CSS #content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; flo

6、at:left; border:1px solid #000; margin:10px;background:#999; 52CSS.com 這是第一個(gè)DIV 向左浮動(dòng) 52CSS.com 這是第二個(gè)DIV 向左浮動(dòng) 可先修改部分代碼 再運(yùn)行查看效果 在IE中的效果如圖：在FF中的效果如圖：在IE與FF中，他們的效果基本取得了一致。在布局中，我們可應(yīng)用這類IE與FF兼容的方法。我們對(duì)content_b應(yīng)用向左的浮動(dòng)。而content_a不應(yīng)用任何浮動(dòng)。看看是何效果：Source Code to Run 52CSS #content_a width:200px; height:80px; bor

7、der:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:80px;float:left; border:1px solid #000; margin:10px; background:#999; 52CSS.com 這是第一個(gè)DIV 不應(yīng)用浮動(dòng) 52CSS.com 這是第二個(gè)DIV 向左浮動(dòng) 可先修改部分代碼 再運(yùn)行查看效果 在IE中的效果如圖：在FF中的效果如圖：在IE與FF中均未有太大的變化。在IE中，應(yīng)用浮動(dòng)后的content_b卻造成了一個(gè)雙邊距的BUY。汗一個(gè)先。關(guān)于IE的雙邊距B

8、UY請(qǐng)參考這里： HYPERLINK /article.asp?id=144 t _blank /article.asp?id=144向左浮動(dòng)會(huì)出現(xiàn)何種狀態(tài)呢？在向右浮動(dòng)后，最大的變化就是在HTML中，前面的元素在最右邊，后面的元素跑到了最左邊。我們對(duì)上面代碼中的兩個(gè)元素同時(shí)應(yīng)用向右的浮動(dòng)看看效果。Source Code to Run 52CSS #content_a width:200px; height:80px; float:right; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;

9、height:80px; float:right; border:1px solid #000; margin:10px;background:#999; 52CSS.com 這是第一個(gè)DIV 向右浮動(dòng) 52CSS.com 這是第二個(gè)DIV 向右浮動(dòng) 可先修改部分代碼 再運(yùn)行查看效果 在IE中的效果如圖：在FF中的效果如圖：同時(shí)對(duì)兩個(gè)元素應(yīng)用向右的浮動(dòng)基本保持了一致，但請(qǐng)注意方向性，第二個(gè)在左邊，第一個(gè)在右邊。對(duì)于其它頁(yè)面構(gòu)成元素，浮動(dòng)的原理基本是一樣的，大家多動(dòng)手測(cè)試，才能有更進(jìn)一下的認(rèn)識(shí)。學(xué)習(xí)CSS就是多動(dòng)手，多寫代碼，必有收獲！附錄資料：從 XML 生成可與 Ajax 共同使用的 JSO

10、N時(shí)下，非常流行使用 JavaScript 代碼為數(shù)據(jù)驅(qū)動(dòng)的 Web 應(yīng)用程序添加互動(dòng)性。若能將數(shù)據(jù)編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過(guò) JavaScript 語(yǔ)言使用它。通過(guò)本文，發(fā)掘使用 XSLT V2 從 XML 數(shù)據(jù)生成 JSON 的幾種不同方法。幾年前，許多開發(fā)人員很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于標(biāo)記的語(yǔ)言?，F(xiàn)在，Asynchronous JavaScript and XML（AJAX）成了新的熱點(diǎn)，人們又將目光轉(zhuǎn)向了使用 JavaScript 代碼的數(shù)據(jù)驅(qū)動(dòng)的富 I

11、nternet 應(yīng)用程序。但是開發(fā)人員是否已經(jīng)消除了 XML 和這一新技術(shù)之間的鴻溝呢？當(dāng)然，您可以在 Web 客戶機(jī)中使用 XML 解析器來(lái)讀取數(shù)據(jù)，但這種做法會(huì)帶來(lái)兩個(gè)問(wèn)題。第一，出于安全方面的原因，XML 數(shù)據(jù)只能從與此頁(yè)面相同的那個(gè)域中讀取。這雖然不是什么大的限制因素，但它的確會(huì)引起部署方面的問(wèn)題，還會(huì)阻礙 DHTML 小部件的創(chuàng)建。第二，讀取和解析 XML 會(huì)非常慢。另一種做法是讓服務(wù)器執(zhí)行 XML 的解析工作，方法是設(shè)置服務(wù)器，使之向?yàn)g覽器發(fā)送以 JavaScript 代碼或時(shí)下流行的 JavaScript Object Notation（JSON）編碼的數(shù)據(jù)。本文將展示如下三種使

12、用 XSLT V2 語(yǔ)言和 Saxon XSLT V2 處理器從 XML 數(shù)據(jù)生成 JSON 的技巧： 簡(jiǎn)單編碼 通過(guò)函數(shù)調(diào)用加載數(shù)據(jù) 編碼對(duì)象 JSON 簡(jiǎn)介要學(xué)習(xí)如何將數(shù)據(jù)編碼成 JSON（它只是 JavaScript 的一個(gè)子集），最好的方法是從數(shù)據(jù)開始。清單 1 顯示了書籍列表的一個(gè)示例 XML 數(shù)據(jù)集。清單 1. 基本的圖形化圖書館 Code Generation in Action JackHerrington Manning PHP Hacks JackHerrington OReilly Podcasting Hacks JackHerrington OReilly 這個(gè)數(shù)據(jù)集

13、很簡(jiǎn)單，只包含三本書，每本書都具有惟一的 ID、書名、作者姓名及出版商的名字。（沒(méi)錯(cuò)，我只選擇了我自己的書作為數(shù)據(jù)集，但能怨我嗎？這些書實(shí)在是不可多得的節(jié)日和生日禮物。）清單 2 顯示了這些數(shù)據(jù)在 JSON 中的效果。清單 2. JSON 中的示例數(shù)據(jù)集 id: 1, title: Code Generation in Action, first: Jack, last: Herrington, publisher: Manning , . 方括號(hào) () 表明這是一個(gè)數(shù)組。大括號(hào) () 則表明這是一個(gè)散列表，該散列表由一組名稱和值對(duì)組成。在本例中，我創(chuàng)建了一個(gè)散列表的數(shù)組 用來(lái)存儲(chǔ)這類結(jié)構(gòu)式數(shù)

14、據(jù)的一種常見(jiàn)方法。另外一點(diǎn)值得注意的是字符串是通過(guò)單引號(hào)或雙引號(hào)被編碼的。所以，如果我想用單引號(hào)編碼 OReilly，我就必須使用反斜杠對(duì)它進(jìn)行轉(zhuǎn)義：OReilly。 這讓我編寫的這個(gè) XSLT 樣式表更為有趣了一些。我并未在本例中放上任何日期，但您也可以通過(guò)如下兩種方法來(lái)編碼日期。第一種方法是將日期作為字符串，該字符串必須在后面被解析。第二種方法是將日期作為一個(gè)對(duì)象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )這段代碼將 publishdate 的值設(shè)置為6/16/2006 5:45:00 p.m.。簡(jiǎn)單編碼接下來(lái)我將陸續(xù)介紹 JSON

15、 編碼的幾種技巧。第一種也是其中最簡(jiǎn)單的一種，此樣式表如 清單 3 所示。清單 3. simple.xsl 樣式表 var g_books = 1, id: ,name: ,first: ,last: ,publisher: ;要理解此樣式表，不妨先來(lái)看一下 清單 4 所示的輸出。清單 4. simple.xsl 的輸出var g_books = id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last

16、: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly;這里，我將名為 g_books 的變量設(shè)置為一個(gè)包含三個(gè)散列表的數(shù)組，每個(gè)散列表包含關(guān)于該書的信息。再回過(guò)頭來(lái)看看 清單 3，您會(huì)發(fā)現(xiàn)第一個(gè)模板匹配 / 路徑，它也是首先應(yīng)用到輸入數(shù)據(jù)集的模板，該模板使用 for-each 循環(huán)來(lái)遍歷每本書。之后，它使用 標(biāo)記來(lái)將文本從該數(shù)據(jù)輸出到 JavaScript 輸出代碼。對(duì)于字符串，我使用名為 js:escape() 的定制函數(shù)，它在

17、模板之前定義。該函數(shù)使用一個(gè)正則表達(dá)式將一個(gè)單引號(hào)標(biāo)記更改為帶有反斜杠的單引號(hào)標(biāo)記。最后一個(gè)重要的元素是 標(biāo)記，它告知處理器要輸出的是文本而不是 XML。要檢驗(yàn)此過(guò)程是否可以正常工作，我加入了一個(gè) simple .html 文件，該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個(gè) HTML 文件如 清單 5 所示。清單 5. simple.html 文件Simple JS loaderdocument.write( Found +g_books.length+ books );.html 文件使用 標(biāo)記簡(jiǎn)單地加載已編碼了的 JavaScript 代碼。之后，第二個(gè) 標(biāo)記將數(shù)

18、組的長(zhǎng)度寫出到瀏覽器頁(yè)面，如 圖 1 所示。圖 1. simple.html 的輸出好了！數(shù)據(jù)文件包含三本書，相應(yīng)的 JavaScript 文件也包含三本書。它真的可以工作！通過(guò)函數(shù)加載上述第一個(gè)示例很簡(jiǎn)單，而且在大多數(shù)情況下可以發(fā)揮其作用，但它存在一些問(wèn)題。第一個(gè)問(wèn)題是對(duì)于數(shù)據(jù)何時(shí)被加載沒(méi)有任何提示。如果數(shù)據(jù)是像頁(yè)面那樣被靜態(tài)加載的，這不成問(wèn)題。但是如果頁(yè)面動(dòng)態(tài)創(chuàng)建了一個(gè) 標(biāo)記來(lái)按需加載數(shù)據(jù)，那么就很有必要知道 標(biāo)記是何時(shí)完成的。實(shí)現(xiàn)此功能的最好的方法是讓編碼了的數(shù)據(jù)調(diào)用一個(gè) JavaScript 函數(shù)，而不是只設(shè)置數(shù)據(jù)。這個(gè)概念很重要，所以我將花一些時(shí)間來(lái)介紹一下為什么您必須要通過(guò)動(dòng)態(tài)生成

19、的 標(biāo)記來(lái)加載數(shù)據(jù)。頁(yè)面加載后，從服務(wù)器獲得數(shù)據(jù)是 Web 2.0 的核心功能。一種方法是使用 AJAX 機(jī)制通過(guò)到服務(wù)器的調(diào)用來(lái)加載 XML。然而，出于安全性的原因，AJAX 機(jī)制只限于從單一域獲取數(shù)據(jù)。這在大多數(shù)情況下都沒(méi)有問(wèn)題，但有時(shí)，您可能需要 JavaScript 代碼運(yùn)行在他人的頁(yè)面上（例如，Google Maps）。在這種情況下從服務(wù)器獲得數(shù)據(jù)的惟一方法是通過(guò)動(dòng)態(tài)加載 標(biāo)記。獲悉 標(biāo)記何時(shí)加載的最好的方法是讓 標(biāo)記返回的腳本調(diào)用函數(shù)而不是簡(jiǎn)單地加載數(shù)據(jù)。清單 6 顯示了在函數(shù)調(diào)用中編碼的數(shù)據(jù)。清單 6. Function1.jsAddBooks( id: 1,name: Code

20、 Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly );清單 7 給出了相應(yīng)的 .html 文件。清單 7. Function1.htmlFunction 1 JS loadervar g_books = ;fun

21、ction AddBooks( books ) g_books = books; drawbooks( g_books );稍后將詳細(xì)介紹 drawbooks 函數(shù)。這里重要的是了解一下頁(yè)面如何定義 AddBooks 函數(shù)，該函數(shù)隨后會(huì)由 function1.js 文件中的腳本調(diào)用。該 AddBooks 函數(shù)負(fù)責(zé)處理數(shù)據(jù)。而且被調(diào)用的 AddBooks 函數(shù)會(huì)向頁(yè)面指示 標(biāo)記被正確加載，并已加載完成。要?jiǎng)?chuàng)建 function1.js 文件，我只對(duì)樣式表稍微做了一點(diǎn)修改，如 清單 8 所示。清單 8. function1.xsl 樣式表AddBooks( 1, id: ,name: ,first

22、: ,last: ,publisher: );這里，我調(diào)用了一個(gè)函數(shù)，而不是簡(jiǎn)單地設(shè)置一個(gè)變量。這就是我所做的惟一更改?；氐巾?yè)面，我使用了 drawbooks 函數(shù)來(lái)構(gòu)建書的表格，這樣我就能夠確認(rèn)數(shù)據(jù)被正確編碼和正確顯示。此函數(shù)是在 drawbooks.js 內(nèi)定義的，如 清單 9 所示。清單 9. Drawbooks.jsfunction drawbooks( books ) var elTable = document.createElement( table ); for( var b in books ) var elTR = elTable.insertRow( -1 ); var

23、elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChild( document.createTextNode( booksb.first ) ); var elTD4 = elTR.

24、insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( booksb.publisher ) ); document.body.appendChild( elTable );這個(gè)簡(jiǎn)單函數(shù)創(chuàng)建了一個(gè)表格節(jié)點(diǎn)，然后循環(huán)訪問(wèn)書的列表并為每本書創(chuàng)建一行，為每個(gè)數(shù)據(jù)元素分配一個(gè)單元格。此頁(yè)面上的代碼的結(jié)果如 圖 2 所示。圖 2. function

25、1.html 的結(jié)果現(xiàn)在我就可以查看一下此頁(yè)面的輸出并確認(rèn)來(lái)自原始 .xml 文件的一切均已被正確轉(zhuǎn)換成 JavaScript 代碼，且數(shù)據(jù)被發(fā)送到 AddData 函數(shù)并被正確添加到頁(yè)面。細(xì)化函數(shù)調(diào)用技術(shù)我很喜歡函數(shù)調(diào)用這一技術(shù)，但我并不贊同將所有圖書數(shù)據(jù)都放入一個(gè)塊中。另一種方式是為每條記錄采用一個(gè)調(diào)用，如 清單 10 所示。清單 10. Function2.jsAddBook( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning );AddBook( id: 2,nam

26、e: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly );.對(duì) .html 頁(yè)面只需做少許修改，如 清單 11 所示。清單 11. Function2.html.var g_books = ;function AddBook( book ) g_books.push( book ); .這里更改了 XSLT，以使函數(shù)調(diào)用駐留在 for-each 循環(huán)體內(nèi)。清單 12 顯示了更新后的樣式表。清單 12. function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );

27、.對(duì)這個(gè)給定示例來(lái)說(shuō)，這種更改看起來(lái)有些隨意。但如果原始的 XML 數(shù)據(jù)集有多種數(shù)據(jù)類型，要為每種類型分配一個(gè)單獨(dú)的函數(shù)調(diào)用會(huì)使 XSL 和頁(yè)面上的 JavaScript 代碼更為簡(jiǎn)單、更易于維護(hù)。編碼對(duì)象對(duì)小的頁(yè)面來(lái)講，使用 JavaScript 函數(shù)沒(méi)有問(wèn)題。但對(duì)于大型項(xiàng)目，就需要使用 JavaScript 語(yǔ)言的一些面向?qū)ο筇匦浴Ｊ堑模琂avaScript 語(yǔ)言可以處理對(duì)象而且可以處理得很好。清單 13 顯示了如何創(chuàng)建帶有數(shù)據(jù)的對(duì)象。清單 13. Object1.jsg_books.push( new Book( id: 1,name: Code Generation in Action

28、,first: Jack,last: Herrington,publisher: Manning ) );g_books.push( new Book( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly ) );在本例中，我只簡(jiǎn)單地向名為 g_books 的數(shù)組添加了 Book 對(duì)象。JavaScript 的對(duì)象創(chuàng)建與 Java、C# 或 C+ 編程語(yǔ)言的對(duì)象創(chuàng)建十分相似。都是一個(gè) new 操作符后跟一個(gè)類名。參數(shù)放到隨后的括號(hào)內(nèi)。在本例中，我傳入了一個(gè)帶值的單一散列表，并將其分割成單獨(dú)的一些參數(shù)。創(chuàng)建此

29、對(duì)象的代碼如 清單 14 所示。清單 14. Object1.xslg_books.push( new Book( id: ,name: ,first: ,last: ,publisher: ) );此頁(yè)面內(nèi)最值得注意的是定義 Book 類的那部分代碼。清單 15 顯示了該頁(yè)面。清單 15. object1.html.var g_books = ;function Book( data ) for( var d in data ) thisd = datad; .Book 類的構(gòu)造函數(shù)循環(huán)訪問(wèn)散列表的所有數(shù)據(jù)。對(duì)于每個(gè)鍵，會(huì)在對(duì)象上創(chuàng)建一個(gè)具有對(duì)象名稱和數(shù)據(jù)的實(shí)例變量。不需要對(duì) drawbooks 函數(shù)做任何修改，因?yàn)閷?duì)象都有與原始的散列表相同的鍵和值。JavaScript 語(yǔ)言并不區(qū)分訪問(wèn)的是散列表內(nèi)的命名值還是對(duì)象上的命名值。當(dāng)然，Book 類應(yīng)該有像 set 和 get 這樣的訪問(wèn)程序。 清單 16 顯示了我是如何對(duì) JavaScript 數(shù)據(jù)進(jìn)行編碼的。清單 16. Object2.jsvar b1 = new Book();b1.setId ( 1 );b1.setTitle ( Code Generation in Action );b1.setFirst ( Jack );b1.