1、第四部分第四部分Div+CSSDiv+CSS進行網頁布局進行網頁布局vDIVCSS是網站標準（或稱是網站標準（或稱“WEB標準標準”）中）中常用的術語之一常用的術語之一.目前，利用目前，利用CSS和和Div組合對頁組合對頁面進行布局已經成為一個公認的標準方法面進行布局已經成為一個公認的標準方法.一、網頁布局方法一、網頁布局方法: :vTablev框架框架vDiv+css二、二、div+cssdiv+css常用的標記及優勢常用的標記及優勢1、DIV標記標記是塊狀容器類標記，用來定義網頁內容中的邏輯區是塊狀容器類標記，用來定義網頁內容中的邏輯區域的標記。域的標記。first layersecond

2、 layer2 2、spanspan標記標記內聯元素標記內聯元素標記可實現首字下沉的效果可實現首字下沉的效果SpanFloat:left;Font-size:60px;Font-family:黑體黑體;Margin:0;Padding-right:5px;首首字下沉字下沉字下沉字下沉字下沉字下字下沉字下沉字下沉字下沉字下沉字下沉字下沉字下沉字下沉字下沉字下沉沉字下沉字下沉字下沉字下沉字下沉3 3、DivDiv與與spanspan區別區別v Span標記是行內元素，主要用于文本的容器，相對于標記是行內元素，主要用于文本的容器，相對于div來說，來說，span容器要小些。容器要小些。v Span的

3、寬度依照包圍的對象的寬度而定，不能用寬度屬的寬度依照包圍的對象的寬度而定，不能用寬度屬性性width設置設置span標記內對象的寬度，但可以設置標記內對象的寬度，但可以設置span的的margin值，以及值，以及span對象的位置與父對象或兄弟對象對象的位置與父對象或兄弟對象的距離。的距離。v Div標記是塊級元素，內容不超過一行，所占的是一行文標記是塊級元素，內容不超過一行，所占的是一行文本的內容，因為本的內容，因為div默認寬度是父對象的默認寬度是父對象的100%，而，而span標記的內容寬度是指內容所占的寬度，即不能設置標記的內容寬度是指內容所占的寬度，即不能設置span的寬度，所以在一

4、行文本中，想對其中的文字設置樣式，的寬度，所以在一行文本中，想對其中的文字設置樣式，而又不要該行文本換行的條件下，可以選擇而又不要該行文本換行的條件下，可以選擇span標記，標記，同一行文字需要不同的樣式，而又不需換行，就用若干個同一行文字需要不同的樣式，而又不需換行，就用若干個span來做容器。來做容器。v 可以設置不同高度的可以設置不同高度的span在同一行顯示，而在同一行顯示，而div不可。不可。4 4、DIV+CSSDIV+CSS的優勢：的優勢：1、符合、符合W3C標準。微軟等公司均為標準。微軟等公司均為W3C支持者。這一點支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應

5、用的升是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。級而被淘汰。 2、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰，、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰，勝利的是勝利的是IE7或者是火狐，您的網站都能很好的兼容。或者是火狐，您的網站都能很好的兼容。 3、搜索引擎更加友好。相對與傳統的、搜索引擎更加友好。相對與傳統的table, 采用采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。技術的網頁，對于搜索引擎的收錄更加友好。 4、樣式的調整更加方便。內容和樣式的分離，使頁面和樣、樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便。式的

6、調整變得更加方便。 現在現在YAHOO,MSN等國際門戶網站，等國際門戶網站，網易，新浪等國內門戶網站，和主流的網易，新浪等國內門戶網站，和主流的WEB2.0網站，均采用網站，均采用DIV+CSS的框架模式，更加印證了的框架模式，更加印證了DIV+CSS是大勢所趨。是大勢所趨。 5、CSS的極大優勢表現在簡潔的代碼，對于一個大型網站的極大優勢表現在簡潔的代碼，對于一個大型網站來說，可以節省大量帶寬，而且眾所周知，搜索引擎喜歡清潔來說，可以節省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。的代碼。 6、表現和結構分離，在團隊開發中更容易分工合作而減少、表現和結構分離，在團隊開發中更容易分工合作

7、而減少相互關聯性。相互關聯性。 三、三、DivDiv的的csscss定位與布局屬性定位與布局屬性vFloat:none|left|right 設置層的漂移設置層的漂移left 文本流向對象的左邊文本流向對象的左邊vClear：none|left|right|both清除層的漂移范圍清除層的漂移范圍Overflow：visible|auto|hidden|scroll內容超過層大小時用此屬性內容超過層大小時用此屬性vCursor：auto|all-scroll|col-resize|crosshair|default|hand|move|help|no-drop|not-allowed|poin

8、ter|progress|row-resize|text|vertical|waitvDisplay:block|none|inline|inline-block list-item設置對象是否隱藏設置對象是否隱藏vVisibility：inherit|visible|hiddenPosition:Position:v所有元素的默認定位都是：所有元素的默認定位都是：position:static，這，這意味著元素沒有被定位，而且在文檔中出現在它意味著元素沒有被定位，而且在文檔中出現在它應該在的位置。應該在的位置。vposition:absolute 時，元素就脫離了文檔【即時，元素就脫離了文檔

9、【即在文檔中已經不占據位置了】，可以準確的按照在文檔中已經不占據位置了】，可以準確的按照設置的設置的 top,bottom,left 和和 right 來定位來定位vposition:relative，就可以使用，就可以使用 top,bottom,left 和和 right 來相對于元素在文檔中應該出現的位置來相對于元素在文檔中應該出現的位置來移動這個元素。【意思是元素實際上依然占據來移動這個元素。【意思是元素實際上依然占據文檔中的原有位置，只是視覺上相對于它在文檔文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動了中的原有位置移動了】四、利用四、利用Div+CSSDiv+CSS進行網

10、頁布局進行網頁布局vDiv+CSS的方法最大的優點就是講內容和布局的方法最大的優點就是講內容和布局分開處理，去掉了表格那么多的繁瑣標簽，縮分開處理，去掉了表格那么多的繁瑣標簽，縮減了網頁文件大小。根據網頁的流行結構，利減了網頁文件大小。根據網頁的流行結構，利用用Div+CSS能夠完成如下多種布局：能夠完成如下多種布局：v創建一列式網頁布局。創建一列式網頁布局。v創建兩列式網頁布局。創建兩列式網頁布局。v創建多列式網頁布局。創建多列式網頁布局。v創建不規則網頁布局。創建不規則網頁布局。1 1、創建一列式布局、創建一列式布局v最有名的一列式布局莫過于谷歌、百度等搜索引最有名的一列式布局莫過于谷歌、

11、百度等搜索引擎了。圖是百度的首頁面，可以看到，內容是從擎了。圖是百度的首頁面，可以看到，內容是從上到下，沒有左右分欄的。上到下，沒有左右分欄的。2 2、創建基本的兩列式布局、創建基本的兩列式布局v顯示了新浪網財經頻道首頁的兩列式布局。顯示了新浪網財經頻道首頁的兩列式布局。兩列式布局兩列式布局v 分為三種情況：總寬度固定，兩列都固定；總寬度變，兩分為三種情況：總寬度固定，兩列都固定；總寬度變，兩列等比例變或單列自適應列等比例變或單列自適應v 設置固定寬度的兩列式布局很簡單，只需要在左列和右列設置固定寬度的兩列式布局很簡單，只需要在左列和右列中指定具體的像素值，而不是百分比就可以了。這樣，當中指定

12、具體的像素值，而不是百分比就可以了。這樣，當瀏覽器窗口改變大小的時候，左右列的寬度并不隨之改變，瀏覽器窗口改變大小的時候，左右列的寬度并不隨之改變，從而保證了內容不會因此改變顯示外觀。從而保證了內容不會因此改變顯示外觀。v 如果需要設置左列寬度不變，右列可以隨瀏覽器改變大小如果需要設置左列寬度不變，右列可以隨瀏覽器改變大小而變化的布局，可以將而變化的布局，可以將Body標簽的總寬度設置為百分比，標簽的總寬度設置為百分比，同時將左列寬度設置為具體像素值，這樣右列的寬度隨瀏同時將左列寬度設置為具體像素值，這樣右列的寬度隨瀏覽器窗口的變化也可以變化了。覽器窗口的變化也可以變化了。固定各列常用的方法固

13、定各列常用的方法v使用相對定位和絕對定位做兩欄布局使用相對定位和絕對定位做兩欄布局#container position:relative;#side position:absolute; top:0; right:0; width:200px;#content position:absolute; top:0; left:0; width:200px;v或使用浮動法或使用浮動法#side float:right; width:150px;#content float:left; width:150px;v 可以清除浮動來使其他元素正確定位。可以清除浮動來使其他元素正確定位。3 3、用、用Di

14、v+CSSDiv+CSS創建多列式網頁布局創建多列式網頁布局v 創建多列式布局類似于兩列布局，理想狀態下，只需要把創建多列式布局類似于兩列布局，理想狀態下，只需要把內容部分的內容部分的Div標簽由兩個增加到多個就好了。除此之外，標簽由兩個增加到多個就好了。除此之外，還可以通過設置每一個還可以通過設置每一個Div標簽的絕對定位來精確控制頁標簽的絕對定位來精確控制頁面結構。面結構。v 利用定位技術實現了一個簡單的三列式網頁布局，顯示效利用定位技術實現了一個簡單的三列式網頁布局，顯示效果如圖所示。果如圖所示。v 還可用浮動的方式還可用浮動的方式4 4、用、用Div+CSSDiv+CSS創建不規則網頁

15、布局創建不規則網頁布局v所謂不規則網頁布局，多見于藝術設計類網站或所謂不規則網頁布局，多見于藝術設計類網站或者公司網站的入口頁，由于打破了一半網頁一行者公司網站的入口頁，由于打破了一半網頁一行一行排列的模式，因此顯得生動、整體感好、視一行排列的模式，因此顯得生動、整體感好、視覺沖擊力強。這種形式一般只適用于網頁在一屏覺沖擊力強。這種形式一般只適用于網頁在一屏就可以顯示完全的情況下。就可以顯示完全的情況下。v至于具體的實現方法，則并不新鮮：利用絕對定至于具體的實現方法，則并不新鮮：利用絕對定位，將不同內容區塊散布在網頁上。位，將不同內容區塊散布在網頁上。v圖顯示了一個不規則網頁的布局，引自國外某

16、設圖顯示了一個不規則網頁的布局，引自國外某設計工作室的首頁。在類似這樣的網頁上，用絕對計工作室的首頁。在類似這樣的網頁上，用絕對定位的定位的Div會非常方便，我們察看一下這個頁面會非常方便，我們察看一下這個頁面的源代碼就可以學習到這種方法：的源代碼就可以學習到這種方法：v用用Div+CSS設置一列式、兩列式、三列式和不規設置一列式、兩列式、三列式和不規則布局的方法以及常見的問題，在實際使用中一則布局的方法以及常見的問題，在實際使用中一定要注意以下幾點：定要注意以下幾點：v如果要設置某個標簽的寬度隨瀏覽器大小變化而如果要設置某個標簽的寬度隨瀏覽器大小變化而變化，則應該用百分比作為寬度值。如果要保

17、持變化，則應該用百分比作為寬度值。如果要保持固定的寬度，則用具體的像素值。固定的寬度，則用具體的像素值。v如果對如果對Div利用了利用了Float屬性，一定要設置寬度屬性，一定要設置寬度width屬性。屬性。v利用了利用了Float屬性和屬性和position:absolute屬性，當屬性，當前標簽就脫離了普通文檔流，將顯示在頁面的上前標簽就脫離了普通文檔流，將顯示在頁面的上方，有可能遮擋住其他的元素。另外，通過方，有可能遮擋住其他的元素。另外，通過clear:both設置可以使其他元素回到文檔流當中。設置可以使其他元素回到文檔流當中。v利用利用Div+CSS進行網頁布局，有時候會出現一些進行

18、網頁布局，有時候會出現一些問題，要多在不同的瀏覽器上測試，以保證效果問題，要多在不同的瀏覽器上測試，以保證效果的統一，這個過程可能需要一些技巧和耐心。的統一，這個過程可能需要一些技巧和耐心。五、技巧五、技巧1、單行文本的垂直居中、單行文本的垂直居中Here is one line of text.middleHeight:100px;Line-height:100px;Border:1px solid #666;2 2、設置、設置BodyBody居中的技巧居中的技巧v 標簽可以說是頁面所有和內容有關的標簽的父標標簽可以說是頁面所有和內容有關的標簽的父標簽，如果簽，如果在瀏覽器內容窗體里居中，那

19、么其內部在瀏覽器內容窗體里居中，那么其內部的所有標簽也都會居中。的所有標簽也都會居中。v 最簡單的方法就是利用已經學習過的最簡單的方法就是利用已經學習過的標簽，它標簽，它可以放置在網頁內容的任意標簽之外（包括可以放置在網頁內容的任意標簽之外（包括標標簽），使得其之間的元素居中。但是，這樣就產生了一個簽），使得其之間的元素居中。但是，這樣就產生了一個問題：如果在問題：如果在和和之間有標簽額外設置之間有標簽額外設置了樣式規則，但其中并沒有設置居中，由于瀏覽器確定標了樣式規則，但其中并沒有設置居中，由于瀏覽器確定標簽顯示以樣式規則為準，從而可能無法達到預期的居中效簽顯示以樣式規則為準，從而可能無法達到預期的居中效果。果。v 常用的方法：在常用的方法：在body中加入一個大的中加入一個大的div標記，并設置屬標記，并設置屬性：性：Margin:0 auto;/*必須有必須有*/六、使用六