1、滄州職業(yè)技術(shù)學院 信息工程系DIV1：單行單列結(jié)構(gòu)：單行單列結(jié)構(gòu) （1）寬度固定）寬度固定寬度固定主要是設(shè)置寬度固定主要是設(shè)置DIV對象的對象的width屬性，舉例說明：圖屬性，舉例說明：圖10-7中的中的DIV標簽都屬于寬標簽都屬于寬度固定的標簽，度固定的標簽，DIVwidth：200px”，高度屬性為，高度屬性為“height：200px”（2）寬度自適應）寬度自適應自適應布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度，是一種非常靈活的自適應布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度，是一種非常靈活的布局形式。自適應布局網(wǎng)站對于不同分辨率的顯示器都能提供最好的顯示效果。布局形式

2、。自適應布局網(wǎng)站對于不同分辨率的顯示器都能提供最好的顯示效果。單列寬度自適應布局只需要將寬度由固定值改為百分比值的形式即可。如果將實現(xiàn)的單列寬度自適應布局只需要將寬度由固定值改為百分比值的形式即可。如果將實現(xiàn)的代碼中的代碼中的width:200，修改為，修改為width:75%，大家可以瀏覽測試。，大家可以瀏覽測試。滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計1、單行單列結(jié)構(gòu)、單行單列結(jié)構(gòu) （3）單列居中）單列居中上述例子的特點是上述例子的特點是Div位于左上方，寬度固定或自適應。在網(wǎng)頁設(shè)計中經(jīng)常見到的形式位于左上方，寬度固定或自適應。在網(wǎng)頁設(shè)計中經(jīng)常見到的形式是網(wǎng)頁整體居中，在

3、傳統(tǒng)的表格布局方式中，使用是網(wǎng)頁整體居中，在傳統(tǒng)的表格布局方式中，使用align=”center”可以實現(xiàn)表格的居可以實現(xiàn)表格的居中。使用中。使用CSS的方法也能夠?qū)崿F(xiàn)內(nèi)容的居中，的方法也能夠?qū)崿F(xiàn)內(nèi)容的居中，CSS代碼如下：代碼如下：#Divtest1 height: 80px;width:500px;background-color:#FFCC00;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （1）二列固

4、定寬度）二列固定寬度對于列式布局與單列布局類似，只不過需要兩個對于列式布局與單列布局類似，只不過需要兩個DIV標簽和兩個標簽和兩個CSS樣式。利用樣式。利用float屬性來實現(xiàn)屬性來實現(xiàn)兩列式布局，兩列式布局，CSS代碼如下：代碼如下：#divleft float:left;height: 100px;width: 200px;border: 10px solid #CCFF00;background-color: #F2FAD1;#divright float:left;height: 100px;width: 200px;border: 10px solid #00FFCC;backgro

5、und-color: #FFFF00;滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 在在body中插入兩個中插入兩個DIV標簽，代碼如下：標簽，代碼如下：此處顯示此處顯示 id divleft 的內(nèi)容的內(nèi)容此處顯示此處顯示 id divright 的內(nèi)容的內(nèi)容將上述兩個樣式表分別應用于兩個將上述兩個樣式表分別應用于兩個Div對象，如圖所示。對象，如圖所示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) divleft和和divright兩個樣式都使用了浮動兩個樣式都使用了浮動(float)屬性。該屬性的值指

6、出了對象是否浮動屬性。該屬性的值指出了對象是否浮動以及如何浮動。以及如何浮動。Float表示不浮動，而使用表示不浮動，而使用left時，對象向左浮動，因此對于第時，對象向左浮動，因此對于第2個個DIV來說，將向左浮動，即流到第來說，將向左浮動，即流到第1個個DIV對象的右側(cè)。使用對象的右側(cè)。使用right時，對象將向右浮動。如時，對象將向右浮動。如果將果將#divright的的float值設(shè)置為值設(shè)置為right，將使得，將使得#divright對象浮動到網(wǎng)頁的右側(cè)，而對象浮動到網(wǎng)頁的右側(cè)，而#divleft對象由于設(shè)置了對象由于設(shè)置了“float:left”屬性而浮動到了網(wǎng)頁的左側(cè)，如圖所示

7、。屬性而浮動到了網(wǎng)頁的左側(cè)，如圖所示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 如果結(jié)合如果結(jié)合margin屬性，調(diào)整兩個布局塊之間的距離。在樣式屬性，調(diào)整兩個布局塊之間的距離。在樣式#divleft和和#divright中添中添加加“margin:10px”，則第，則第2個個DIV和第和第1個個DIV之間會保留之間會保留20px的距離，如圖所示。的距離，如圖所示。 如果沒有設(shè)置margin屬性，則由于設(shè)置了“float:left”的屬性，第2個DIV會緊緊貼著第1個DIV對象。滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列

8、布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （2）二列自適應寬度）二列自適應寬度對于二列式布局方式，除了固定寬度，象表格一樣還可以做到自適應寬度。從單列自適應布局中可對于二列式布局方式，除了固定寬度，象表格一樣還可以做到自適應寬度。從單列自適應布局中可以看出，將寬度值設(shè)定成百分比即可實現(xiàn)自適應。以看出，將寬度值設(shè)定成百分比即可實現(xiàn)自適應。重新定義重新定義CSS代碼如下：代碼如下：#divleft margin:10px;float:left;height: 150px;width: 30%;border: 10px solid #CCFF00;background-color: #F2FAD1;#divright

9、 margin:10px;float:right;height: 150px;width: 50%;border: 10px solid #00FFCC;background-color: #FFFF00; 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 左欄設(shè)置寬度為左欄設(shè)置寬度為30%，右欄設(shè)置寬度為，右欄設(shè)置寬度為50%。這種二分法是常見的一種網(wǎng)頁布局結(jié)構(gòu)，。這種二分法是常見的一種網(wǎng)頁布局結(jié)構(gòu)，左側(cè)一般都是導航，右側(cè)是內(nèi)容，如圖所示。左側(cè)一般都是導航，右側(cè)是內(nèi)容，如圖所示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)

10、構(gòu)、二列布局結(jié)構(gòu) 上面的結(jié)構(gòu)采用百分比寬度，但是沒有占滿整個瀏覽器窗口。如果將右欄的寬度設(shè)置上面的結(jié)構(gòu)采用百分比寬度，但是沒有占滿整個瀏覽器窗口。如果將右欄的寬度設(shè)置為為70%，那么右欄將被擠到第，那么右欄將被擠到第2行，從而就失去了左右分欄的效果了，如圖所示。行，從而就失去了左右分欄的效果了，如圖所示。 這個問題的原因是由這個問題的原因是由CSS盒模型引起的。在盒模型引起的。在CSS布局中，一個對象的真實寬度是由對布局中，一個對象的真實寬度是由對象的寬度、左右填充、左右邊框、左右邊界相加組成的。因此，左欄的寬度不僅僅是象的寬度、左右填充、左右邊框、左右邊界相加組成的。因此，左欄的寬度不僅僅是

11、瀏覽器窗口寬度的瀏覽器窗口寬度的30%，還應當加上左右填充、左右邊框、左右邊界。右欄的寬度也，還應當加上左右填充、左右邊框、左右邊界。右欄的寬度也應當是瀏覽器窗口的應當是瀏覽器窗口的70%，加上左右填充、左右邊框、左右邊界。因此最終的寬度超，加上左右填充、左右邊框、左右邊界。因此最終的寬度超過了瀏覽器窗口的寬度，從而使右欄被擠到了第過了瀏覽器窗口的寬度，從而使右欄被擠到了第2行顯示。行顯示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 在實際使用中，如果要達到滿屏效果，簡單的辦法就是避免使用邊框和邊界屬性，在實際使用中，如果要達到滿屏效果，簡單的辦

12、法就是避免使用邊框和邊界屬性，CSS代碼如下：代碼如下：#divleft float:left;height: 150px;width: 30%;background-color: #F2FAD1;#divright float:right;height: 150px;width: 70%;background-color: #FFFF00;使用上述代碼后，即可實現(xiàn)兩列自適應且左右與瀏覽器填滿的效果，如圖所示。使用上述代碼后，即可實現(xiàn)兩列自適應且左右與瀏覽器填滿的效果，如圖所示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 利用利用CSS定位屬性也

13、可以實現(xiàn)兩列的自適應布局，其定位屬性也可以實現(xiàn)兩列的自適應布局，其CSS代碼如下：代碼如下：#divleft float:left;height: 150px;width: 20%;background-color: #F2FAD1;position:relative;#divright height: 150px;margin-left:22%;background-color: #FFFF00; 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) #divleft對象的寬度為對象的寬度為20%，所以只需要把，所以只需要把#divright對象的左邊界寬

14、度設(shè)置成大于或?qū)ο蟮淖筮吔鐚挾仍O(shè)置成大于或等于等于20%就可以了。上述代碼中就可以了。上述代碼中“margin-left:22%”正是設(shè)置正是設(shè)置#divright的左邊界為的左邊界為22%，如圖所示。，如圖所示。 左邊界為22% 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 二列自適應寬度布局的實際預覽效果如圖所示。二列自適應寬度布局的實際預覽效果如圖所示。 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （3）左列固定、右列寬度自適應）左列固定、右列寬度自適應前面學習了兩列寬度均為百分比值，從而實現(xiàn)了兩列

15、寬度自適應。在實際使用時，有時需前面學習了兩列寬度均為百分比值，從而實現(xiàn)了兩列寬度自適應。在實際使用時，有時需要左欄固定，右欄根據(jù)瀏覽窗口的大小自動適應。實現(xiàn)的方法很簡單，只需要將左側(cè)寬度要左欄固定，右欄根據(jù)瀏覽窗口的大小自動適應。實現(xiàn)的方法很簡單，只需要將左側(cè)寬度設(shè)置為固定值，右欄不設(shè)置任何寬度值，并且右欄不浮動，設(shè)置為固定值，右欄不設(shè)置任何寬度值，并且右欄不浮動，CSS代碼代碼:#divleft float:left;height: 150px;width: 150px;border: 10px solid #CCFF00;margin: 10px;background-color: #F

16、2FAD1;#divright height: 150px;margin: 10px;border: 10px solid #CCFF00;background-color: #FFFF00;滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 使用上述代碼后，左欄寬度固定在使用上述代碼后，左欄寬度固定在150px，而右欄將根據(jù)瀏覽器窗口的大小自動適，而右欄將根據(jù)瀏覽器窗口的大小自動適應，如圖所示。應，如圖所示。滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （4）二列固定寬度居中）二列固定寬度居中在上個核心知識點中

17、介紹了如何使一個在上個核心知識點中介紹了如何使一個DIV對象居中顯示，在對象居中顯示，在CSS代碼中使用邊界代碼中使用邊界屬性屬性“margin:0px auto;”即可實現(xiàn)。即可實現(xiàn)。那么，在兩分欄結(jié)構(gòu)中，需要控制左分欄的左邊界和右邊界和右分欄的右邊界相等。那么，在兩分欄結(jié)構(gòu)中，需要控制左分欄的左邊界和右邊界和右分欄的右邊界相等。這時候需要利用這時候需要利用DIV的嵌套設(shè)計來完成。的嵌套設(shè)計來完成。使用一個使用一個DIV作為容器，將兩列分欄的兩個作為容器，將兩列分欄的兩個DIV放入容器中，從而能夠?qū)崿F(xiàn)兩列居中放入容器中，從而能夠?qū)崿F(xiàn)兩列居中顯示。將兩分欄的兩個顯示。將兩分欄的兩個DIV放入一

18、個放入一個id為為layout的的DIV布局對象中，網(wǎng)頁的代碼如下：布局對象中，網(wǎng)頁的代碼如下：divleft左欄左欄divright右欄右欄滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計（4）二列固定寬度居中）二列固定寬度居中上述的上述的3個個Div的的CSS代碼如下：代碼如下：#layout width: 500px;margin:0px auto ;#divleft float:left;height: 150px;width: 100px;border: 10px solid #CCFF00;background-color: #F2FAD1;#divright float

19、:left;height: 150px;width:360px;border: 10px solid #CCFF00;background-color: #FFFF00;滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計這里通過這里通過“margin:0 xp auto”設(shè)置設(shè)置“#layout”的居中屬性，從而使里面的內(nèi)容也居中。的居中屬性，從而使里面的內(nèi)容也居中。根據(jù)盒模型理論，一個對象的實際寬度由對象的寬度、左右邊界、左右邊框、左右填根據(jù)盒模型理論，一個對象的實際寬度由對象的寬度、左右邊界、左右邊框、左右填充相加而成，所以充相加而成，所以“#layout”的寬度設(shè)置為的寬度設(shè)置為

20、500px，即，即“100px+360px+20px+20px=500px”。布局的預覽效果如圖所示：。布局的預覽效果如圖所示： 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計（1）左右固定寬度中間寬度自適應）左右固定寬度中間寬度自適應三列式的布局是網(wǎng)頁中的常見布局形式。采用浮動定位方式，可以很容易地實現(xiàn)多列固定三列式的布局是網(wǎng)頁中的常見布局形式。采用浮動定位方式，可以很容易地實現(xiàn)多列固定寬度。以下是三列固定寬度的寬度。以下是三列固定寬度的CSS代碼：代碼：#divleft float:left;height: 150px;width: 100px;border: 10px sol

21、id #CCFF00;background-color: #F2FAD1;#divcenter float:left;border: 10px solid #22FF00;height:150px;width: 300px;background-color: #F2FAff;3、三列式布局結(jié)構(gòu)、三列式布局結(jié)構(gòu) 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計#divright float:left;height: 150px;width:300px;border: 10px solid #CCFF00;background-color: #FFFF00;上述布局的效果如圖上述布局的效

22、果如圖10-19所示；所示； 滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計使用絕對定位將左欄和右欄的位置確定下來，其使用絕對定位將左欄和右欄的位置確定下來，其CSS代碼如下：代碼如下：#divleft float:left;height:150px;width:100px;border:10px solid #CCFF00;background-color: #F2FAD1;position:absolute;left:0px;top:0px;#divright float:right;height:150px;width:100px;border: 10px solid #CC

23、FF00;background-color: #FFFF00;position:absolute;right:0px;top:0px;滄州職業(yè)技術(shù)學院 信息工程系DIV常見布局設(shè)計常見布局設(shè)計然后，設(shè)置中間欄的左邊界和右邊界，使它的左邊界等于左欄的寬度，它的右邊界等于右然后，設(shè)置中間欄的左邊界和右邊界，使它的左邊界等于左欄的寬度，它的右邊界等于右欄的寬度，從而可以使讓出的寬度正好顯示左欄和右欄。欄的寬度，從而可以使讓出的寬度正好顯示左欄和右欄。#divcenter border: 10px solid #22FF00;height:150px;background-color:#F2FAff;margin-right:120px;margin-left:120px;margintop:0px;為了達到最好的預覽效果，定義為了達到最好的預覽效果，定義body標簽的邊界和填充為標