網(wǎng)頁設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）機(jī)械工業(yè)出版社同名教材配套電子教案5.1Div布局理念5.2CSS盒模型5.3CSS的定位5.4浮動(dòng)與清除浮動(dòng)5.5CSS常用布局樣式5.6Div+CSS布局綜合案例第5章Div+CSS布局方法5.1.1Div布局頁面的優(yōu)點(diǎn)采用Div+CSS布局方式的優(yōu)點(diǎn)如下：

縮減了頁面代碼，提高了頁面的瀏覽速度。

縮短了網(wǎng)站的改版時(shí)間，設(shè)計(jì)者只要簡單地修改CSS文件就可以輕松地改版網(wǎng)站。

強(qiáng)大的字體控制和排版能力，使設(shè)計(jì)者能夠更好的控制頁面布局。

表現(xiàn)和內(nèi)容相分離，設(shè)計(jì)者將設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中，減少了網(wǎng)頁無效的可能。

方便搜索引擎的搜索，使用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，搜索引擎將更有效地搜索到用戶的內(nèi)容。

用戶可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新。

5.1Div布局理念5.1.2Div標(biāo)簽1．Div標(biāo)簽簡介2．Div的嵌套

Div標(biāo)簽是可以被嵌套的，這種嵌套的Div主要用于實(shí)現(xiàn)更為復(fù)雜的頁面排版。下面以兩個(gè)示例說明嵌套的Div之間的關(guān)系。【演練5-1】未嵌套的Div容器.【演練5-2】嵌套的Div容器。5.1Div布局理念3．Div標(biāo)簽與Span標(biāo)簽的區(qū)別

div與span的區(qū)別在于，div是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行，而span僅僅是個(gè)內(nèi)聯(lián)元素，不會(huì)換行。另外，span本身沒有任何屬性，沒有結(jié)構(gòu)上的意義，當(dāng)其他元素都不合適的時(shí)候可以換上它，同時(shí)div可以包含span，反之則不行。【演練5-3】演示Div標(biāo)簽與Span標(biāo)簽的區(qū)別。5.1Div布局理念5.2.1盒模型的概念盒模型將頁面中的每個(gè)元素看做一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖5-4所示。對(duì)象的尺寸與邊框等樣式表屬性的關(guān)系，如圖5-5所示。5.2CSS盒模型5.2.2盒模型的屬性1．外邊距外邊距也稱為外補(bǔ)丁。外邊距設(shè)置屬性有：margin-top、margin-right、margin-bottom、margin-left，可分別設(shè)置，也可以用margin屬性，一次設(shè)置所有邊距。2．邊框常用的邊框?qū)傩杂?項(xiàng)：border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性設(shè)置所有的邊框?qū)挾?，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫上4種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序（順時(shí)針）。5.2CSS盒模型5.2.2盒模型的屬性3．內(nèi)邊距內(nèi)邊距也稱內(nèi)補(bǔ)丁，位于對(duì)象邊框和對(duì)象之間，包括了4項(xiàng)屬性：padding-top（上內(nèi)邊距）、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距），內(nèi)邊距屬性不允許負(fù)值。與外邊距類似，內(nèi)邊距也可以用padding一次性設(shè)置所有的對(duì)象間隙，格式也和margin相似，這里不再一一列舉。5.2CSS盒模型5.2.3盒模型的寬度與高度盒模型的寬度與高度是元素內(nèi)容、內(nèi)邊距、邊框和外邊距這4部分的屬性值之和。1．盒模型的寬度

盒模型的寬度=左外邊距（margin-left）+左邊框（border-left）+左內(nèi)邊距（padding-left）+內(nèi)容寬度（width）+右內(nèi)邊距（padding-right）+右邊框（border-right）+右外邊距（margin-right）2．盒模型的高度

盒模型的高度=上外邊距（margin-top）+上邊框（border-top）+上內(nèi)邊距（padding-top）+內(nèi)容高度（height）+下內(nèi)邊距（padding-bottom）+下邊框（border-bottom）+下外邊距（margin-bottom）5.2CSS盒模型5.2.4外邊距的疊加用戶在進(jìn)行CSS網(wǎng)頁布局時(shí)經(jīng)常會(huì)遇見外邊距的疊加問題，如果不理解其內(nèi)涵就容易造成許多麻煩。當(dāng)兩個(gè)元素的垂直外邊距相遇時(shí)，這兩個(gè)元素的外邊距就會(huì)進(jìn)行疊加，合并為一個(gè)外邊距。1．兩個(gè)元素垂直相遇時(shí)疊加2．兩個(gè)元素包含時(shí)疊加5.2CSS盒模型5.2.4外邊距的疊加用戶在進(jìn)行CSS網(wǎng)頁布局時(shí)經(jīng)常會(huì)遇見外邊距的疊加問題，如果不理解其內(nèi)涵就容易造成許多麻煩。當(dāng)兩個(gè)元素的垂直外邊距相遇時(shí)，這兩個(gè)元素的外邊距就會(huì)進(jìn)行疊加，合并為一個(gè)外邊距。1．兩個(gè)元素垂直相遇時(shí)疊加當(dāng)兩個(gè)元素垂直相遇時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生疊加合并，合并后的外邊距的高度等于這兩個(gè)元素的外邊距值的較大者。2．兩個(gè)元素包含時(shí)疊加假設(shè)兩個(gè)元素沒有內(nèi)邊距和邊框，且一個(gè)元素包含另一個(gè)元素，它們的上外邊距或下外邊距也會(huì)發(fā)生疊加合并。5.2CSS盒模型5.2.5盒模型綜合案例【演練5-4】修飾商城社區(qū)管理員登錄表單的輸入框?yàn)橹伙@示下邊框線的虛細(xì)線框，本例文件5-4.html在瀏覽器中顯示的效果如圖5-10所示。5.2CSS盒模型5.2.5盒模型綜合案例【演練5-5】設(shè)置商城logo圖片的布局，本例文件5-5.html的顯示效果如圖5-11所示。5.2CSS盒模型定位（position）屬性可以選擇4中不同類型的定位模式，語法如下：position:static|relative|absolute|fixed參數(shù)：static靜態(tài)定位為默認(rèn)值，為無特殊定位，對(duì)象遵循HTML定位規(guī)則。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。absolute生成絕對(duì)定位的元素。元素的位置通過left、top、right和bottom屬性進(jìn)行規(guī)定。fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過left、top、right以及bottom屬性進(jìn)行規(guī)定。5.3CSS的定位5.3.1靜態(tài)定位靜態(tài)定位是position屬性的默認(rèn)值，即該元素出現(xiàn)在文檔的常規(guī)位置，不會(huì)重新定位。通常此屬性可以不設(shè)置，除非是要覆蓋以前的定義?！狙菥?-6】靜態(tài)定位。假設(shè)有這樣一個(gè)頁面布局，頁面中分別定義了id="top"、id="box"和id="footer"這3個(gè)Div容器，彼此是并列關(guān)系。id="box"的容器又包含id="box-1"、id="box-2"和id="box-3"這3個(gè)子Div容器，彼此也是并列關(guān)系。編寫相應(yīng)的CSS樣式，生成的文件5-6.html在瀏覽器中顯示的效果如圖5-12所示。5.3CSS的定位5.3.2相對(duì)定位相對(duì)定位（position:relative;）指的是通過設(shè)置水平或垂直位置的值，讓這個(gè)元素“相對(duì)于”它原始的起點(diǎn)進(jìn)行移動(dòng)。【演練5-7】相對(duì)定位。使用上面的示例深入討論，將id="box"的塊級(jí)元素向下移動(dòng)50px，向右移動(dòng)50px。編寫相應(yīng)的CSS樣式，生成的文件5-7.html的顯示效果如圖5-13所示5.3CSS的定位5.3.3絕對(duì)定位用“position:absolute;”表示絕對(duì)定位，使用絕對(duì)定位的對(duì)象可以被放置在文檔中任何位置，位置將依據(jù)瀏覽器左上角的0點(diǎn)開始計(jì)算?！狙菥?-8】絕對(duì)定位。繼續(xù)使用上面的示例深入討論，將id="box-1"的塊級(jí)元素進(jìn)行絕對(duì)定位，向下移動(dòng)50px，向右移動(dòng)200px。編寫相應(yīng)的CSS樣式，生成的文件5-8.html在瀏覽器中顯示的效果如圖5-14所示。5.3CSS的定位5.3.4相對(duì)定位與絕對(duì)定位的混合使用【演練5-9】相對(duì)定位與絕對(duì)定位的混合使用。首先對(duì)id="box"的塊級(jí)元素進(jìn)行相對(duì)定位，則id="box"中的所有元素都將相當(dāng)于id="box"的塊級(jí)元素。然后將id="box-1"的塊級(jí)元素進(jìn)行絕對(duì)定位，便可以實(shí)現(xiàn)子元素相當(dāng)于父元素進(jìn)行定位。編寫相應(yīng)的CSS樣式，生成的文件5-9.html在瀏覽器中顯示的效果如圖5-15所示。5.3CSS的定位5.3.5固定定位固定定位（position:fixed;）其實(shí)是絕對(duì)定位的子類別?！狙菥?-10】固定定位。為了對(duì)固定定位演示得更加清楚，將id="box1"的塊級(jí)元素進(jìn)行固定定位，將id="box2"的塊級(jí)元素的高度設(shè)置得盡量大，以便能看到固定定位的效果。編寫相應(yīng)的CSS樣式，生成的文件5-10.html在瀏覽器中顯示的效果如圖5-16所示。5.3CSS的定位

5.4.1浮動(dòng)

利用CSS樣式布局頁面結(jié)構(gòu)時(shí)，浮動(dòng)（float）是使用率較高的一種定位方式。當(dāng)某個(gè)元素被賦予浮動(dòng)屬性后，該元素便脫離文檔流向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。語法：float:none|left|right【演練5-11】向右浮動(dòng)的元素。本例頁面布局的初始狀態(tài)如圖5-17（a）所示，元素box-1向右浮動(dòng)后的結(jié)果如圖5-17（b）所示。

5.4浮動(dòng)與清除浮動(dòng)

5.4.1浮動(dòng)

【演練5-12】向左浮動(dòng)的元素。使用上面的示例繼續(xù)討論，只將id="box-1"的元素向左浮動(dòng)的頁面布局如圖5-18（a）所示，所有元素向左浮動(dòng)后的結(jié)果如圖5-18（b）所示。5.4浮動(dòng)與清除浮動(dòng)

5.4.1浮動(dòng)

【演練5-13】空間不夠時(shí)的元素浮動(dòng)。使用上面的示例繼續(xù)討論，如果id="box"的塊級(jí)元素寬度不夠，無法容納3個(gè)浮動(dòng)元素box-1、box-2和box-3并排放置，那么部分浮動(dòng)元素將會(huì)向下移動(dòng)，直到有足夠的空間放置它們，如圖5-19（a）所示。如果浮動(dòng)元素的高度彼此不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“擋住”，如圖5-19（b）所示。

5.4浮動(dòng)與清除浮動(dòng)

（a）塊級(jí)元素寬度不夠時(shí)的狀態(tài)

（b）塊級(jí)元素寬度不夠且不同高度的浮動(dòng)元素5.4.2清除浮動(dòng)在CSS樣式中，浮動(dòng)與清除浮動(dòng)（clear）是相互對(duì)立的，使用清除浮動(dòng)不僅能夠解決頁面錯(cuò)位的現(xiàn)象，。語法：clear:none|left|right|both【演練5-14】清除浮動(dòng)。使用上面的示例5-12繼續(xù)討論，頁面所有元素均已向左浮動(dòng)，在box-3后面再增加一個(gè)沒有設(shè)置浮動(dòng)的塊級(jí)元素box-4，未清除浮動(dòng)時(shí)的狀態(tài)如圖5-20（a）所示，清除浮動(dòng)后的狀態(tài)如圖5-20（b）所示。5.4浮動(dòng)與清除浮動(dòng)

5.5.1兩列布局樣式許多網(wǎng)站都有一些共同的特點(diǎn)，即頂部放置一個(gè)大的導(dǎo)航或廣告條，右側(cè)是鏈接或圖片，左側(cè)放置主要內(nèi)容，頁面底部放置版權(quán)信息等，如圖5-23所示的布局就是經(jīng)典的兩列布局。5.5CSS常用布局樣式

5.5.2三列布局樣式三列布局在網(wǎng)頁設(shè)計(jì)時(shí)更為常用，如圖5-28所示。對(duì)于這種類型的布局，瀏覽者的注意力最容易集中在中欄的信息區(qū)域，其次才是左右兩側(cè)的信息。5.5CSS常用布局樣式

5.6.1頁面布局規(guī)劃頁面布局的首要任務(wù)是弄清網(wǎng)頁的布局方式，分析版式結(jié)構(gòu)，待整體頁面搭建有明確規(guī)劃后，再根據(jù)成熟的規(guī)劃切圖。通過成熟的構(gòu)思與設(shè)計(jì)，電腦學(xué)堂欄目的主頁效果如圖5-34所示，頁面布局示意圖如圖5-35所示。5.6Div+CSS布局綜合