1、DIVCSS網(wǎng)頁(yè)布局,div標(biāo)簽簡(jiǎn)單來說就是一個(gè)區(qū)塊容器標(biāo)簽，即與之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片等各種元素。因此，可以把與中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象。 可以使用CSS控制頁(yè)面中塊級(jí)別元素的格式和定位。CSS對(duì)塊級(jí)元素執(zhí)行以下操作：為它們?cè)O(shè)置邊距和邊框、將它們放置在頁(yè)面的特定位置、向它們添加背景顏色、在它們周圍設(shè)置浮動(dòng)文本等。 原來的網(wǎng)頁(yè)很多都采用表格來布局，但表格會(huì)生成大量難以閱讀和維護(hù)的代碼；而現(xiàn)在則采用div標(biāo)記劃分各個(gè)區(qū)域。 Div 用于搭建網(wǎng)頁(yè)結(jié)構(gòu)，CSS用于創(chuàng)建網(wǎng)頁(yè)表現(xiàn)（樣式/美化），實(shí)質(zhì)即使用XHTML對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)，使用CSS將表現(xiàn)與內(nèi)容分離，便于網(wǎng)站維

2、護(hù)，簡(jiǎn)化html頁(yè)面代碼，可以獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu)以便于日后維護(hù)。,Div標(biāo)簽,（1）創(chuàng)建DIV對(duì)象 若要向文檔窗口插入DIV標(biāo)簽，首先將插入點(diǎn)放置在要顯示DIV標(biāo)簽的位置。執(zhí)行“插入記錄”“布局對(duì)象”“DIV標(biāo)簽”命令，或者在“插入”面板“常用”類別中單擊“插入DIV標(biāo)簽”按鈕，選擇插入點(diǎn)后，即可完成插入DIV對(duì)象。 當(dāng)然大家也可以輸入HTML代碼來創(chuàng)建DIV對(duì)象。例如： 此處顯示新DIV標(biāo)簽的內(nèi)容,CSS布局基礎(chǔ),插入：用于選擇Div標(biāo)簽的插入位置。其中：“在插入點(diǎn)”選項(xiàng)是指在當(dāng)前光標(biāo)所在位置插入Div標(biāo)簽，此選項(xiàng)僅在沒有選中任何內(nèi)容時(shí)可用；“在開始標(biāo)簽之后”選項(xiàng)是指在一對(duì)標(biāo)簽的開始標(biāo)

3、簽之后，此標(biāo)簽所引用的內(nèi)容之前插入Div標(biāo)簽，新創(chuàng)建的Div標(biāo)簽嵌套在此標(biāo)簽中；“在標(biāo)簽之后”選項(xiàng)是指在一對(duì)標(biāo)簽的結(jié)束標(biāo)簽之后插入Div標(biāo)簽，新創(chuàng)建的Div標(biāo)簽與前面的標(biāo)簽是并列關(guān)系。該對(duì)話框會(huì)列出當(dāng)前文檔中所有已創(chuàng)建的Div標(biāo)簽供用戶確定新創(chuàng)Div標(biāo)簽的插入位置。 ID：為新插入的Div標(biāo)簽創(chuàng)建唯一的ID號(hào)。 類：為新插入的Div標(biāo)簽附加已有的類樣式。,CSS布局基礎(chǔ),（2）塊元素的大小、邊距、填充屬性,CSS布局基礎(chǔ),CSS布局基礎(chǔ),（3）定位屬性 定位屬性position用于定義一個(gè)元素是否absolute（絕對(duì))、relative（相對(duì)）、static（靜態(tài)）、或者fixed（固定）。

4、定位屬性position的語(yǔ)法如下。 position：static|absolute|fixed|relative static：static值是元素的默認(rèn)值，它會(huì)按照普通順序生成，就如它們?cè)贖TML中的出現(xiàn)順序一般。 relative：relative使元素相對(duì)于文檔流的前一個(gè)對(duì)象偏移一定的距離，偏移的方向及幅度由top、right、bottom和left屬性聯(lián)合指定。 absolute：absolute使元素從HTML普通流中分離出來，并把它送到一個(gè)完全屬于自己的定位中。通過設(shè)置top、right、bottom和left的值，可以使絕對(duì)定位的元素放置到任何地方。 fixed： fixed

5、屬性可以把一個(gè)元素永遠(yuǎn)固定在瀏覽器的一個(gè)位置(如長(zhǎng)表格中的標(biāo)題行)。IE6不支持這個(gè)屬性。,（4）浮動(dòng)屬性 浮動(dòng)屬性是CSS布局中非常重要的一個(gè)屬性，用于控制對(duì)象的浮動(dòng)布局方式。其語(yǔ)法如下。 float：none | left | right 例如： #Divtest1 height: 200px; width: 200px; background-color: #ff0000; float: left; #Divtest2 background-color: #ffff00; width: 300px; height: 180px; float: left; ,CSS布局基礎(chǔ),CSS布局基礎(chǔ)

6、,元素Divtest1向左浮動(dòng)，則元素Divtest2也要向左浮動(dòng)即流到第一個(gè)Div對(duì)象Divtest1的右側(cè)，如圖所示。,單行單列結(jié)構(gòu),（1）寬度固定 寬度固定主要是設(shè)置DIV對(duì)象的width屬性，DIV在默認(rèn)狀態(tài)下，寬度將占據(jù)整行的空間。由于設(shè)置了布局對(duì)象的寬度屬性為“width：200px”，高度屬性為“height：200px”，因此這是一種固定寬度的布局。 （2）寬度自適應(yīng)（即相對(duì)寬度） 自適應(yīng)布局能夠根據(jù)瀏覽器窗口的大小，自動(dòng)改變其寬度或高度，是一種非常靈活的布局形式。自適應(yīng)布局網(wǎng)站對(duì)于不同分辨率的顯示器都能提供最好的顯示效果。 單列寬度自適應(yīng)布局只需要將寬度由固定值改為百分比值的

7、形式即可。如果將實(shí)現(xiàn)的代碼中的width:200，修改為width:75%，大家可以瀏覽測(cè)試。,單行單列結(jié)構(gòu),（3）單列居中 上述例子的特點(diǎn)是Div位于左上方，寬度固定或相對(duì)寬度。在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常見到的形式是網(wǎng)頁(yè)整體居中，在傳統(tǒng)的表格布局方式中，使用align=”center”可以實(shí)現(xiàn)表格的居中。使用CSS也能夠?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

8、-left: auto; ,兩列布局結(jié)構(gòu),（1）二列固定寬度 對(duì)于兩列式布局與單列布局類似，只不過需要兩個(gè)DIV標(biāo)簽和兩個(gè)CSS樣式。利用float屬性來實(shí)現(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; background-color: #FFF

9、F00; ,二列布局結(jié)構(gòu),在body中插入兩個(gè)DIV標(biāo)簽，代碼如下： 此處顯示 id divleft 的內(nèi)容 此處顯示 id divright 的內(nèi)容 將上述兩個(gè)樣式表分別應(yīng)用于兩個(gè)Div對(duì)象，如圖所示。,二列布局結(jié)構(gòu),divleft和divright兩個(gè)樣式都使用了浮動(dòng)(float)屬性。該屬性的值指出了對(duì)象是否浮動(dòng)以及如何浮動(dòng)。None表示不浮動(dòng)，而使用left時(shí)，對(duì)象向左浮動(dòng)，因此對(duì)于第2個(gè)DIV來說，將向左浮動(dòng)，即流到第1個(gè)DIV對(duì)象的右側(cè)。使用right時(shí)，對(duì)象將向右浮動(dòng)。如果將#divright的float值設(shè)置為right，將使得#divright對(duì)象浮動(dòng)到網(wǎng)頁(yè)的右側(cè)，而#div

10、left對(duì)象由于設(shè)置了“float:left”屬性而浮動(dòng)到了網(wǎng)頁(yè)的左側(cè)，如圖所示。,二列布局結(jié)構(gòu),如果結(jié)合margin屬性，調(diào)整兩個(gè)布局塊之間的距離。在樣式#divleft和#divright中添加“margin:10px”，則第2個(gè)DIV和第1個(gè)DIV之間會(huì)保留20px的距離，如圖所示。,如果沒有設(shè)置margin屬性，則由于設(shè)置了“float:left”的屬性，第2個(gè)DIV會(huì)緊緊貼著第1個(gè)DIV對(duì)象。,二列布局結(jié)構(gòu),（2）二列相對(duì)寬度 對(duì)于二列式布局方式，除了固定寬度，象表格一樣還可以做到相對(duì)寬度。將寬度值設(shè)定成百分比即可。 重新定義CSS代碼如下： #divleft margin:10px

11、; float:left; height: 150px; width: 30%; border: 10px solid #CCFF00; background-color: #F2FAD1; #divright margin:10px; float:right; height: 150px; width: 50%; border: 10px solid #00FFCC; background-color: #FFFF00; ,二列布局結(jié)構(gòu),左欄設(shè)置寬度為30%，右欄設(shè)置寬度為50%。這種二分法是常見的一種網(wǎng)頁(yè)布局結(jié)構(gòu)，左側(cè)一般都是導(dǎo)航，右側(cè)是內(nèi)容，如圖所示。,二列布局結(jié)構(gòu),上面的結(jié)構(gòu)采用百分比

12、寬度，但是沒有占滿整個(gè)瀏覽器窗口。如果將右欄的寬度設(shè)置為70%，那么右欄將被擠到第2行，從而就失去了左右分欄的效果了，如圖所示。 這個(gè)問題的原因是由CSS盒模型引起的。在CSS布局中，一個(gè)對(duì)象的真實(shí)寬度是由對(duì)象的寬度、左右填充、左右邊框、左右邊界相加組成的。因此，左欄的寬度不僅僅是瀏覽器窗口寬度的30%，還應(yīng)當(dāng)加上左右填充、左右邊框、左右邊界。右欄的寬度也應(yīng)當(dāng)是瀏覽器窗口的70%，加上左右填充、左右邊框、左右邊界。因此最終的寬度超過了瀏覽器窗口的寬度，從而使右欄被擠到了第2行顯示。,二列布局結(jié)構(gòu),在實(shí)際使用中，如果要達(dá)到滿屏效果，簡(jiǎn)單的辦法就是避免使用邊框和邊界屬性，CSS代碼如下： #div

13、left float:left; height: 150px; width: 30%; background-color: #F2FAD1; #divright float:right; height: 150px; width: 70%; background-color: #FFFF00; 使用上述代碼后，即可實(shí)現(xiàn)兩列相對(duì)寬度且左右與瀏覽器填滿的效果，如圖所示。,核心技能點(diǎn)四：二列布局結(jié)構(gòu),（3）左列固定、右列寬度自適應(yīng) 前面學(xué)習(xí)了兩列寬度均為百分比值，從而實(shí)現(xiàn)了兩列寬度自適應(yīng)。在實(shí)際使用時(shí)，有時(shí)需要左欄固定，右欄根據(jù)瀏覽窗口的大小自動(dòng)適應(yīng)。實(shí)現(xiàn)的方法很簡(jiǎn)單，只需要將左側(cè)寬度設(shè)置為固定值，

14、右欄不設(shè)置任何寬度值，并且右欄不浮動(dòng)，CSS代碼: #divleft float:left; height: 400px; width: 150px; border: 10px solid #CCFF00; margin: 10px; background-color: #F2FAD1; #divright height: 400px; margin: 10px; border: 10px solid #CCFF00; background-color: #FFFF00; ,二列布局結(jié)構(gòu),使用上述代碼后，左欄寬度固定在150px，而右欄將根據(jù)瀏覽器窗口的大小自動(dòng)適應(yīng)，如圖所示。,二列布局結(jié)構(gòu),

15、（4）二列固定寬度居中 在上個(gè)核心知識(shí)點(diǎn)中介紹了如何使一個(gè)DIV對(duì)象居中顯示，在CSS代碼中使用邊界屬性“margin:0px auto;”即可實(shí)現(xiàn)。 那么，在兩分欄結(jié)構(gòu)中，需要控制左分欄的左邊界和右邊界和右分欄的右邊界相等。這時(shí)候需要利用DIV的嵌套設(shè)計(jì)來完成。 使用一個(gè)DIV作為容器，將兩列分欄的兩個(gè)DIV放入容器中，從而能夠?qū)崿F(xiàn)兩列居中顯示。將兩分欄的兩個(gè)DIV放入一個(gè)id為layout的DIV布局對(duì)象中，網(wǎng)頁(yè)的代碼如下： divleft左欄 divright右欄 ,（4）二列固定寬度居中 上述的3個(gè)Div的CSS代碼如下： #layout width: 500px; margin:0p

16、x auto ; #divleft float:left; height: 150px; width: 100px; border: 10px solid #CCFF00; background-color: #F2FAD1; #divright float:left; height: 150px; width:360px; border: 10px solid #CCFF00; background-color: #FFFF00; ,（1）左右固定寬度中間寬度自適應(yīng) 三列式的布局是網(wǎng)頁(yè)中的常見布局形式。采用浮動(dòng)定位方式，可以很容易地實(shí)現(xiàn)多列固定寬度。以下是三列固定寬度的CSS代碼： #div

17、left float:left; height: 150px; width: 100px; border: 10px solid #CCFF00; background-color: #F2FAD1; #divcenter float:left; border: 10px solid #22FF00; height:150px; width: 300px; background-color: #F2FAff; ,三列式布局結(jié)構(gòu),#divright float:left; height: 150px; width:300px; border: 10px solid #CCFF00; backgr

18、ound-color: #FFFF00; 上述布局的效果如圖所示；,使用絕對(duì)定位將左欄和右欄的位置確定下來，其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 #CCFF00; background-color:

19、#FFFF00; position:absolute; right:0px; top:0px;,divleft和divright就是層,然后，設(shè)置中間欄的左邊界和右邊界，使它的左邊界等于左欄的寬度，它的右邊界等于右欄的寬度，從而可以使讓出的寬度正好顯示左欄和右欄。 #divcenter border: 10px solid #22FF00; height:150px; background-color:#F2FAff; margin-right:120px; margin-left:120px; margintop:0px; 為了達(dá)到最好的預(yù)覽效果，定義body標(biāo)簽的邊界和填充為0px，CSS代碼如下： body margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; ,（2）頂行三列式布局 頂行的三列式布局結(jié)構(gòu)是頂行自動(dòng)適應(yīng)寬度，左右欄絕對(duì)定位，中間欄自適應(yīng)寬度。這是常見的一種網(wǎng)頁(yè)布局形式。 這里一共需要4個(gè)DIV標(biāo)簽，分別是頂行、左欄、中間欄和右欄，其DIV部分的代碼如下： divtop頂行 divleft左欄 divcenter中間 divright右欄 首先編寫#divtop的CSS代碼如下： #divtop height:100px; border:10px solid #FFFF00; backgr