【正文】 portant（優(yōu)先級）。powered by IE6 專用*height: 100px。第三節(jié)CSS+DIV與瀏覽器的兼容IEIEFF 與兼容性有關的特性CSS HACK代碼:所有瀏覽器 通用height: 100px。將右欄的position設置為absolute，并將top和right設置為0px。需要實現(xiàn)這樣的布局，就需要使用position屬性來定位。 　　5．三列浮動中間列寬度自適應。這樣右欄的內(nèi)容將流入到左欄的右邊，并根據(jù)左欄的寬度，自動流入并貼至左欄，而貼近的程度則由左欄的右邊距和右欄的左邊距來控制，不需要一欄對象本身的寬度值。使用right時，表示左側(cè)對象將移動到當前對象的右側(cè)。 　　Float屬性有三個值，none表示對象不浮動。在CSS中，包括DIV在內(nèi)的任何元素都可以以浮動的方式進行顯示。 　　Float是CSS布局非常強大的布局功能。兩列固定寬度的實現(xiàn)需要新的屬性float。 　　4．兩列固定寬度。Margin屬性中可以直接使用數(shù)據(jù)，也支持“auto”，即自動判斷邊距。頁面整體居中是網(wǎng)頁設計中常見的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align屬性來實現(xiàn)。如將寬度設置為80%，則DIV的寬度就變?yōu)闉g覽器寬度的80%，當瀏覽器窗口的大小調(diào)整時，其寬度還將維持在瀏覽器當前寬度比例的80%。 　　CSS的大部分數(shù)值作為參數(shù)的樣式屬性都提供百分比值。實際上DIV在默認狀態(tài)下展區(qū)整行的空間，便是寬度100%的自適應布局的表現(xiàn)形式。自適應的布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度值，是一種非常靈活的布局形式。 　　2．一列自適應。一列布局是所有布局的基礎，也是最簡單的布局形式，即一種固定寬度的布局樣式。對于多次引用的樣式可以用Class來定義而不需要每個都用ID；另外也不是說一定要用，也可以使用 來代替，同樣是塊級元素，一樣具有盒模型的7個參數(shù)，僅僅方便浮動。 　?。ǘ┎槐貫槊繅K內(nèi)容都建立ID。這樣制作的頁面才是內(nèi)容和表現(xiàn)分離，也就是說，當去掉CSS文件后，剩下的就只有內(nèi)容。使用CSS布局，內(nèi)容僅僅是一次羅列下來，只有結(jié)構(gòu)，沒有任何的樣式。這種觀點是錯誤的。 　　三、CSS入門的幾個誤區(qū) 　　（一）不要用傳統(tǒng)的表格思維來嵌套DIV。通過使用DIV，可以將網(wǎng)頁中的各個元素劃分到各個DIV中，成為網(wǎng)頁中的結(jié)構(gòu)主體，而樣式表現(xiàn)由CSS完成。DIV是一種比表格簡單的元素，從語法上只有 這樣簡單的定義。CSS布局的重點不在表格元素的設計上，而是采用另外一元素DIV。 　　復雜的表格設計使得設計極為不易，修改更為復雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導致瀏覽器下載及解析速度變慢。大量的樣式設計代碼混雜在表格和單元格中，使得可讀性大大降低，維護成本也相對提高。由于表格元素中可以顯示表格的邊框為0，即不顯示邊框，因此可以在網(wǎng)頁中的各個元素按版式劃分放入表格的各個單元格中，從而實現(xiàn)復雜的排版組合。只有真正實現(xiàn)了結(jié)構(gòu)分離的網(wǎng)頁設計，才能真正意義上的符合WEB標準的網(wǎng)頁設計。 color: blue}　　p {font: 10pt/12pt Arial。 color: maroon}　　h2 {font: 13pt/15pt Arial。 color: black} 　　 　　/style 　　/head 　　body html　　head　　title文檔標題/title　　style type=text/css　　!　　body {font: 10pt Arial}　　h1 {font: 15pt/17pt Arial。 fontweight: bold。 fontweight: bold。 定義方式請參閱樣式表語法。 定義方式請參閱樣式表語法。 鏈入外部樣式表文件 (Linking to a Style Sheet) 你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。 感性體驗CSS什么是Cascading Style Sheets（層疊樣式表） * CSS是Cascading Style Sheets(層疊樣式表)的簡稱. * CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執(zhí)行(屬于瀏覽器解釋型語言). * 在標準網(wǎng)頁設計中CSS負責網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn). * CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴. * 可以通過簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個網(wǎng)頁設計人員的必修課. * CSS是由W3C的CSS工作組產(chǎn)生和維護的. 如何將樣式表加入到網(wǎng)頁可以用以下三種方式將樣式表加入您的網(wǎng)頁。瀏覽器就不用去編譯大量冗長的標簽。這樣的頁面對搜索引擎更加友好。到2007年為止，第三版還未完備。里雷。1996年12月CSS要求的第一版本被出版。雷爾登）是這個項目的主要技術負責人。當時W3C剛剛建立，W3C對CSS的發(fā)展很感興趣，它為此組織了一次討論會。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式, 這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。當時已經(jīng)有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。伯特1994年哈坤但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。到2007年為止，第三版還未完備關鍵詞 css，div，css+div，發(fā)展，應用，css+div發(fā)展 目錄第一章 概述 CSS+DIV 1第一節(jié) DSS發(fā)展歷史 1第二節(jié) DIV+CSS布局的優(yōu)缺點 2第三節(jié) DIV+CSS與瀏覽器的兼容 2第四節(jié) 個人總結(jié)的關于CSS+DIV的八條學習方法 2第二章 詳述CSS+DIV網(wǎng)頁布局 2第一節(jié) HTML基礎知識 2第二節(jié) CSS 基礎知識 2第三章CSS+DIV應用（css布局網(wǎng)站） 2第一節(jié) 準備 2第二節(jié) 操作 2結(jié)束語 3謝辭 4參考文獻 5第一章 概述CSS+DIV第一節(jié) CSS發(fā)展歷史CSS歷史從1990年代初HTML被發(fā)明開始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語言，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式。里雷。1996年12月CSS要求的第一版本被出版。雷爾登）是這個項目的主要技術負責人。當時W3C剛剛建立，W3C對CSS的發(fā)展很感興趣，它為此組織了一次討論會。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式, 這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。當時已經(jīng)有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。伯特1994年哈坤但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。 畢業(yè)論文（設計）　　　　　　　　　　　　　　重慶信息技術職業(yè)學院校園網(wǎng)絡規(guī)劃設計摘要從1990年代初HTML被發(fā)明開始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語言，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網(wǎng)頁應該怎樣被顯示。隨著這些功能的增加外來定義樣式的語言越來越?jīng)]有意義了。利提出了CSS的最初建議。波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。哈坤于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。哈坤、波斯和其他一些人（比如微軟的托馬斯1996年底，CSS已經(jīng)完成。1997年初，W3C內(nèi)組織了專門管CSS的工作組，其負責人是克里斯這個工作組開始討論第一版中沒有涉及到的問題，其結(jié)果是1998年5月出版的第二版要求。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網(wǎng)頁應該怎樣被顯示。隨著這些功能的增加外來定義樣式的語言越來越?jīng)]有意義了。利提出了CSS的最初建議。波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。哈坤于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。哈坤、波斯和其他一些人（比如微軟的托馬斯1996年底，CSS已經(jīng)完成。1997年初，W3C內(nèi)組織了專門管CSS的工作組，其負責人是克里斯這個工作組開始討論第一版中沒有涉及到的問題，其結(jié)果是1998年5月出版的第二版要求。 使用CSS+DIV的優(yōu)點采用CSS+DIV進行網(wǎng)頁重構(gòu)相對與傳統(tǒng)的TABLE網(wǎng)頁布局而具有以下3個顯著優(yōu)勢： 表現(xiàn)和內(nèi)容相分離 將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。 提高頁面瀏覽速度 對于同一個頁面視覺效果，采用CSS+DIV重構(gòu)的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。 易于維護和改版 你只要簡單的修改幾個CSS文件就可以重新設計整個網(wǎng)站的頁面。而最接近目標的樣式定義優(yōu)先權(quán)越高。例外請參閱 !important 聲明。示例如下：view plaincopy to clipboardprint?head title文檔標題/title link rel=stylesheet href= type=text/css /head headtitle文檔標題/titlelink rel=stylesheet href= type=text/css/head而在XML中，你應該如下例所示在聲明區(qū)中加入： 　　? xmlstylesheet type=text/css href= ? 定義內(nèi)部樣式塊對象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標記之間插入一個STYLE.../STYLE塊對象。示例如下：定義內(nèi)部樣式塊對象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標記之間插入一個STYLE.../STYLE塊對象。示例如下： view plaincopy to clipboardprint? html 　　head 　　title文檔標題/title 　　style type=text/css 　　! 　　body {font: 10pt Arial} 　　h1 {font: 15pt/17pt Arial。 color: maroon} 　　h2 {font: 13pt/15pt Arial。 color: blue} 　　p {font: 10pt/12pt Arial。 fontweight: bold。 fontweight: bold。 color: black}　　　　/style　　/head　　body26第二節(jié) CSS+DIV布局的優(yōu)缺點基于WEB標準的網(wǎng)站設計的核心在于如何使用眾多WEB便準中的各項技術來達到表現(xiàn)與內(nèi)容的分離，即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為三者的分離。 　　一、傳統(tǒng)表格布局的缺陷 　　傳統(tǒng)表格布局方式實際上是利用表格元素具有無邊框的特性。 　　表格布局的代碼最常見的是