基于工作過(guò)程的網(wǎng)頁(yè)設(shè)計(jì)與制作教程

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

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

3、傳統(tǒng)的表格布局方式中，使用是網(wǎng)頁(yè)整體居中，在傳統(tǒng)的表格布局方式中，使用align=”center”可以實(shí)現(xiàn)表格的居可以實(shí)現(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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （1）二列固

4、定寬度）二列固定寬度對(duì)于列式布局與單列布局類似，只不過(guò)需要兩個(gè)對(duì)于列式布局與單列布局類似，只不過(guò)需要兩個(gè)DIV標(biāo)簽和兩個(gè)標(biāo)簽和兩個(gè)CSS樣式。利用樣式。利用float屬性來(lái)實(shí)現(xiàn)屬性來(lái)實(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;backgro

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

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

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

8、布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （2）二列自適應(yīng)寬度）二列自適應(yīng)寬度對(duì)于二列式布局方式，除了固定寬度，象表格一樣還可以做到自適應(yīng)寬度。從單列自適應(yīng)布局中可對(duì)于二列式布局方式，除了固定寬度，象表格一樣還可以做到自適應(yīng)寬度。從單列自適應(yīng)布局中可以看出，將寬度值設(shè)定成百分比即可實(shí)現(xiàn)自適應(yīng)。以看出，將寬度值設(shè)定成百分比即可實(shí)現(xiàn)自適應(yīng)。重新定義重新定義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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 左欄設(shè)置寬度為左欄設(shè)置寬度為30%，右欄設(shè)置寬度為，右欄設(shè)置寬度為50%。這種二分法是常見的一種網(wǎng)頁(yè)布局結(jié)構(gòu)，。這種二分法是常見的一種網(wǎng)頁(yè)布局結(jié)構(gòu)，左側(cè)一般都是導(dǎo)航，右側(cè)是內(nèi)容，如圖所示。左側(cè)一般都是導(dǎo)航，右側(cè)是內(nèi)容，如圖所示。 滄州職業(yè)技術(shù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)2、二列布局結(jié)

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

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

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

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

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

15、寬度自適應(yīng)。在實(shí)際使用時(shí)，有時(shí)需前面學(xué)習(xí)了兩列寬度均為百分比值，從而實(shí)現(xiàn)了兩列寬度自適應(yīng)。在實(shí)際使用時(shí)，有時(shí)需要左欄固定，右欄根據(jù)瀏覽窗口的大小自動(dòng)適應(yīng)。實(shí)現(xiàn)的方法很簡(jiǎn)單，只需要將左側(cè)寬度要左欄固定，右欄根據(jù)瀏覽窗口的大小自動(dòng)適應(yīng)。實(shí)現(xiàn)的方法很簡(jiǎn)單，只需要將左側(cè)寬度設(shè)置為固定值，右欄不設(shè)置任何寬度值，并且右欄不浮動(dòng)，設(shè)置為固定值，右欄不設(shè)置任何寬度值，并且右欄不浮動(dòng)，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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) 使用上述代碼后，左欄寬度固定在使用上述代碼后，左欄寬度固定在150px，而右欄將根據(jù)瀏覽器窗口的大小自動(dòng)適，而右欄將根據(jù)瀏覽器窗口的大小自動(dòng)適應(yīng)，如圖所示。應(yīng)，如圖所示。滄州職業(yè)技術(shù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)2、二列布局結(jié)構(gòu)、二列布局結(jié)構(gòu) （4）二列固定寬度居中）二列固定寬度居中在上個(gè)核心知識(shí)點(diǎn)中

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

18、個(gè)放入一個(gè)id為為layout的的DIV布局對(duì)象中，網(wǎng)頁(yè)的代碼如下：布局對(duì)象中，網(wǎng)頁(yè)的代碼如下：divleft左欄左欄divright右欄右欄滄州職業(yè)技術(shù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)（4）二列固定寬度居中）二列固定寬度居中上述的上述的3個(gè)個(gè)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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)這里通過(guò)這里通過(guò)“margin:0 xp auto”設(shè)置設(shè)置“#layout”的居中屬性，從而使里面的內(nèi)容也居中。的居中屬性，從而使里面的內(nèi)容也居中。根據(jù)盒模型理論，一個(gè)對(duì)象的實(shí)際寬度由對(duì)象的寬度、左右邊界、左右邊框、左右填根據(jù)盒模型理論，一個(gè)對(duì)象的實(shí)際寬度由對(duì)象的寬度、左右邊界、左右邊框、左右填充相加而成，所以充相加而成，所以“#layout”的寬度設(shè)置為的寬度設(shè)置為

20、500px，即，即“100px+360px+20px+20px=500px”。布局的預(yù)覽效果如圖所示：。布局的預(yù)覽效果如圖所示： 滄州職業(yè)技術(shù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)（1）左右固定寬度中間寬度自適應(yīng)）左右固定寬度中間寬度自適應(yīng)三列式的布局是網(wǎng)頁(yè)中的常見布局形式。采用浮動(dòng)定位方式，可以很容易地實(shí)現(xiàn)多列固定三列式的布局是網(wǎng)頁(yè)中的常見布局形式。采用浮動(dòng)定位方式，可以很容易地實(shí)現(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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)#divright float:left;height: 150px;width:300px;border: 10px solid #CCFF00;background-color: #FFFF00;上述布局的效果如圖上述布局的效

22、果如圖10-19所示；所示； 滄州職業(yè)技術(shù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)使用絕對(duì)定位將左欄和右欄的位置確定下來(lái)，其使用絕對(duì)定位將左欄和右欄的位置確定下來(lái)，其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ù)學(xué)院 信息工程系DIV常見布局設(shè)計(jì)常見布局設(shè)計(jì)然后，設(shè)置中間欄的左邊界和右邊界，使它的左邊界等于左欄的寬度，它的右邊界等于右然后，設(shè)置中間欄的左邊界和右邊界，使它的左邊界等于左欄的寬度，它的右邊界等于右欄的寬度，從而可以使讓出的寬度正好顯示左欄和右欄。欄的寬度，從而可以使讓出的寬度正好顯示左欄和右欄。#divcenter border: 10px solid #22FF00;height:150px;background-color:#F2FAff;margin-right:120px;margin-left:120px;margintop:0px;為了達(dá)到最好的預(yù)覽效果，定義為了達(dá)到最好的預(yù)覽效果，定義body標(biāo)簽的邊界和填充為標(biāo)