網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程單元7--CSS布局與網(wǎng)頁美化

1、網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程（微課版）湯智華 主編王愛紅 主審工業(yè)和信息化“十三五”高職高專人才培養(yǎng)規(guī)劃教材 單元7 CSS布局與網(wǎng)頁美化【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會(huì)設(shè)計(jì)頁面的布局結(jié)構(gòu)（2）學(xué)會(huì)創(chuàng)建頁面布局樣式（3）學(xué)會(huì)創(chuàng)建美化頁面元素的樣式（4）學(xué)會(huì)插入DIV標(biāo)簽對(duì)網(wǎng)頁的頁面進(jìn)行布局（5）學(xué)會(huì)創(chuàng)建代碼片斷，且在網(wǎng)頁插入已有的代碼片斷（6）學(xué)會(huì)在使用DIVCSS布局的網(wǎng)頁中輸入文字和插入各種頁面元素本單元重點(diǎn)（1）設(shè)計(jì)頁面的布局結(jié)構(gòu)（2）創(chuàng)建頁面的布局樣式（3）創(chuàng)建美化頁面元素的樣式（4）插入DIV標(biāo)簽對(duì)網(wǎng)頁的頁面進(jìn)行布局本單元難點(diǎn)（1）設(shè)計(jì)頁面的布局結(jié)構(gòu)（2）插入DIV標(biāo)簽對(duì)網(wǎng)頁的頁面進(jìn)行布局教

2、學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法7.1 標(biāo)準(zhǔn)文檔流 宏觀來講，我們的Web頁面和Photoshop等設(shè)計(jì)軟件有本質(zhì)區(qū)別Web頁面的制作是個(gè)“流”，必須從上而下。 所謂標(biāo)準(zhǔn)“流”，就是標(biāo)簽的排列方式。7.1.1 標(biāo)準(zhǔn)“流”的微觀現(xiàn)象 微觀來講，標(biāo)準(zhǔn)“流”會(huì)出現(xiàn)一些特別的現(xiàn)象。圖7-2 標(biāo)準(zhǔn)“流”的微觀現(xiàn)象 從標(biāo)簽的排列方式和瀏覽器效果圖看，標(biāo)準(zhǔn)“流”的微觀現(xiàn)象如下。1空白折疊現(xiàn)象 “欄目一”“欄目二”“欄目三”的標(biāo)簽由于是換行書寫的，出現(xiàn)了空白折疊現(xiàn)象。而“怎么啦怎么啦怎么啦”的標(biāo)簽由于是緊湊型書寫，所以無空白折疊現(xiàn)象。標(biāo)簽也是如此。2高矮不齊，底邊對(duì)齊 如果又有圖片且圖片參差不齊、又有文字。則會(huì)出

3、現(xiàn)高矮不齊，底邊對(duì)齊的情況。3自動(dòng)換行，一行不滿，換行寫 同時(shí)，我們發(fā)現(xiàn)“我的未來不是夢(mèng)”的標(biāo)簽自動(dòng)換行了。怎么會(huì)出現(xiàn)以上的標(biāo)準(zhǔn)“流”的微觀現(xiàn)象呢？這是因?yàn)闉閴K級(jí)元素，一般用于配合CSS完成網(wǎng)頁的基本布局。 而為行內(nèi)元素，一般用于配合CSS修改網(wǎng)頁中的一些局部信息。7.1.2 塊級(jí)元素和行內(nèi)元素 標(biāo)準(zhǔn)文檔流等級(jí)森嚴(yán)。標(biāo)簽分為兩種等級(jí)：塊級(jí)元素和行內(nèi)元素。HTML標(biāo)記語言提供了豐富的標(biāo)記，用于組織頁面結(jié)構(gòu)。 為了使頁面結(jié)構(gòu)的組織更加輕松、合理，HTML標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊級(jí)元素和行內(nèi)元素。 HTML中將標(biāo)簽分為兩類：文本級(jí)、容器級(jí)。 容器級(jí)和文本級(jí)標(biāo)簽的區(qū)別

4、是：容器級(jí)的標(biāo)簽中可以嵌套其他所有的標(biāo)簽，文本級(jí)標(biāo)簽中只能嵌套文字、超鏈接、圖片。 文本級(jí)：p、span、a、b、i、u、em。所有的文本級(jí)標(biāo)簽都是行內(nèi)元素，除了p，p是一個(gè)文本級(jí)，但是是一個(gè)塊級(jí)元素。容器級(jí)：div、h系列、ul、li、ol、dl、dt、dd。所有的容器級(jí)標(biāo)簽都是塊級(jí)元素。一、塊級(jí)元素 塊級(jí)元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是：每個(gè)塊級(jí)元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。圖7-3 塊級(jí)元素 從以上標(biāo)簽的排列方式和瀏覽器效果圖看，塊級(jí)元素具有以下特點(diǎn)。首尾自動(dòng)換行，會(huì)另起一行；在沒有設(shè)置width屬性的時(shí)候

5、，寬度是自動(dòng)伸展的，伸展到不能伸展為止；即使在設(shè)置width的時(shí)候，給后面的塊級(jí)元素騰出了位置，后面的塊級(jí)元素也不會(huì)自動(dòng)上來。塊級(jí)元素有：div、p、ul、li、h系列、ol、dl。二、行內(nèi)元素 行內(nèi)元素即沒有任何樣式的時(shí)候，自動(dòng)排成一行的元素。 行內(nèi)元素也稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是：不必在新的一行開始，同時(shí)，也不強(qiáng)迫其他的元素在新的一行顯示。 一個(gè)行內(nèi)元素通常會(huì)和它前后的其他行內(nèi)元素顯示在同一行中，它們不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。圖7-4 行內(nèi)元素 從以上標(biāo)簽的排列方式和瀏覽器效果圖看，行內(nèi)

6、元素具有以下特點(diǎn)。一個(gè)行內(nèi)元素，在不設(shè)定width的時(shí)候，width自動(dòng)收縮為自己的內(nèi)容的真實(shí)寬度。行內(nèi)元素不接受width和height的值，它就認(rèn)準(zhǔn)了自己真實(shí)內(nèi)容的寬、高。但是能接受padding值！在父容器不夠?qū)挼臅r(shí)候，行內(nèi)元素能夠自動(dòng)折行。行內(nèi)元素有：span、a、img、b、i。7.1.3 塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換 定義：網(wǎng)頁是由多個(gè)塊級(jí)元素和行內(nèi)元素構(gòu)成的盒子排列而成的，如果希望行內(nèi)元素具有塊級(jí)元素的某些特性，例如可以設(shè)置寬高，或者需要塊級(jí)元素具有行內(nèi)元素的某些特性，例如不獨(dú)占一行排列，就可以使用display屬性對(duì)元素的類型進(jìn)行轉(zhuǎn)換。 任何一個(gè)元素（body元素除外）都可以通

7、過CSS來進(jìn)行塊、行轉(zhuǎn)換。 行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素：display:block。 塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素：display:inline。圖7-5 塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換 從以上標(biāo)簽的排列方式和瀏覽器效果圖看，塊級(jí)元素和行內(nèi)元素相互轉(zhuǎn)換后，發(fā)生了如下變化。當(dāng)給#hezi1、#hezi2設(shè)置display:inline;時(shí)，這個(gè)DIV就轉(zhuǎn)換成了行內(nèi)元素。它開始以行內(nèi)元素的標(biāo)準(zhǔn)流的行事規(guī)則來定位，控制自己的樣式，它自己收縮了，width:屬性對(duì)它無效了。能在一行顯示了。當(dāng)給#lianjie設(shè)置display:block;時(shí)，原本行內(nèi)元素之后就變成了塊級(jí)元素，有塊級(jí)元素的特點(diǎn)了，首位換行，能接受

8、width、height了。元素是做超級(jí)鏈接的，變?yōu)閎lock之后，接受鼠標(biāo)單擊的區(qū)域就變成了自己這個(gè)盒子border之內(nèi)的區(qū)域。7.1.4 塊級(jí)元素和行內(nèi)元素的區(qū)別 塊級(jí)元素和行內(nèi)元素有較大的區(qū)別。一、塊級(jí)元素（1）會(huì)另起一行。（2）可以設(shè)置width、height、margin、padding、border屬性。（3）默認(rèn)寬度是容器的100%。二、行內(nèi)元素（1）和其他元素在同一行內(nèi)。（2）高度和寬度就是內(nèi)容的高度和寬度。（3）可以設(shè)置margin-left和margin-right屬性，無法設(shè)置margin-top和margin- bottom屬性。（4）border和padding可以設(shè)

9、置，但是border-top和padding-top到頁面頂部后就不再增加。7.2 盒模型7.2.1 認(rèn)識(shí)盒子模型 什么是“模型”?“模型”就是事物本質(zhì)特征的抽象。 把一幅帶畫框的畫看成是一個(gè)盒子，如圖7-6所示為兩幅帶相框的畫的示意圖。其中，每一幅畫有：圖7-6 兩幅帶畫框的畫示意圖 外邊距（上、右、下、左）； 內(nèi)邊距（上、右、下、左）； 邊框：畫框； 內(nèi)容：畫的本身（寬、高）。 【注意】 畫框與畫框之間的距離為外邊距。 盒子模型的重要性：盒子模型是CSS網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個(gè)元素所呈現(xiàn)的效果。 在HTML文檔中，每個(gè)元素（elemen

10、t）都有盒子模型，每一個(gè)元素都是一個(gè)盒子，a元素、div元素、span元素、img元素也是。另外的元素有語義，不要當(dāng)成盒子用。 所以說在Web世界里（特別是頁面布局），盒子模型無處不在。因?yàn)榫W(wǎng)頁是以長(zhǎng)方形為單位渲染頁面的。 CSS盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距、邊框、填充和實(shí)際內(nèi)容。盒子模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。 我們將上面的一幅帶畫框的畫抽象為一個(gè)盒子。 首先我們分析一下盒子的構(gòu)成。 CSS中，Box Model叫盒子模型（或框模型），盒子模型規(guī)定了元素框處理元素內(nèi)容（element content）、內(nèi)邊距（padding）、邊

11、框（border）和外邊距（margin）的方式。 圖7-7是抽象出來的盒子模型圖示。圖7-7 盒子模型圖示 【說明】 圖7-7中，由內(nèi)而外依次是元素內(nèi)容（content）、內(nèi)邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（margin-top、margin-right、margin-bottom、margin-left）。 內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊。而且，外邊距可以是

12、負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。圖7-8 代碼實(shí)現(xiàn)的盒子模型 【提示】 padding、border、margin都是可選的，默認(rèn)值為0，但是瀏覽器會(huì)自行設(shè)置元素的margin和padding，一些元素是默認(rèn)帶有padding的，通過在CSS樣式表中如下設(shè)置來覆蓋瀏覽器樣式。*margin: 0px; padding: 0px; 【注意】 這里的*表示所有元素，但是這樣性能不好，建議依次列出常用的元素來設(shè)置。即：*的效率不高，一般采用并集選擇器羅列所有的標(biāo)簽。 圖7-8就是盒子模型的組成部分，網(wǎng)頁中所有的元素和對(duì)象都是由圖7-8所示的基本結(jié)構(gòu)組成。 理解了盒子模型的結(jié)構(gòu)后，要想隨心

13、所欲地控制頁面中每個(gè)盒子的樣式，還需要掌握盒子模型的相關(guān)屬性，接下來我們就對(duì)盒子模型的相關(guān)屬性進(jìn)行詳細(xì)講解。7.2.2 盒子模型的組成屬性一、邊框?qū)傩?為了分割頁面中不同的盒子，常常需要給元素設(shè)置邊框效果，在CSS中邊框?qū)傩园ㄟ吙驑邮綄傩裕╞order-style）、邊框?qū)挾葘傩裕╞order-width）、邊框顏色屬性（border-color）。1設(shè)置邊框樣式（border-style） 邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下。 none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）。 solid：邊框?yàn)閱螌?shí)線。 dashed：邊框?yàn)樘摼€。 dotted：邊框?yàn)辄c(diǎn)線。 double：

14、邊框?yàn)殡p實(shí)線。 使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按“上、右、下、左”的順時(shí)針順序，省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四邊，兩個(gè)值為上下/左右，3個(gè)值為上/左右/下。 圖7-9所示的就是給盒子分別指定雙實(shí)線、單實(shí)線、虛線、點(diǎn)線后的邊框效果。圖7-9 設(shè)置邊框樣式2設(shè)置邊框?qū)挾龋╞order-width） 設(shè)置邊框?qū)挾鹊姆椒ㄈ缦隆?borer-top-width：上邊框?qū)挾取?borer-right-width：右邊框?qū)挾取?borer-bottom-width：下邊框?qū)挾取?borer-left-width：左邊框?qū)挾取?borer- width：上邊框?qū)挾?右邊框?qū)挾?

15、下邊框?qū)挾?左邊框?qū)挾取?綜合設(shè)置四邊寬度必須按“上、右、下、左”的順時(shí)針順序采用值復(fù)制，即一個(gè)值為四邊，兩個(gè)值為上下/左右，3個(gè)值為上/左右/下。 圖7-10所示的就是給段落文本同時(shí)設(shè)置邊框?qū)挾群蜆邮降男Ч麍D。圖7-10 設(shè)置邊框?qū)挾?設(shè)置邊框顏色（border-color） 設(shè)置邊框顏色的方法如下。 border-top-color：上邊框顏色。 border-right-color：右邊框顏色。 border-bottom-color：下邊框顏色。 border-left-color：左邊框顏色。 border- color：上邊框顏色右邊框顏色 下邊框顏色 左邊框顏色。 其取值可為預(yù)定

16、義的顏色值、#十六進(jìn)制、rgb(r,g,b)或rgb(r%,g%,b%)，實(shí)際工作中最常用的是#十六進(jìn)制。 邊框的默認(rèn)顏色為元素本身的文本顏色，對(duì)于沒有文本的元素，例如只包含圖像的表格，其默認(rèn)邊框顏色為父元素的文本顏色。 綜合設(shè)置四邊顏色必須按“上、右、下、左”的順時(shí)針順序采用值復(fù)制，即一個(gè)值為四邊，兩個(gè)值為上下/左右，3個(gè)值為上/左右/下。 總結(jié)：能夠用一個(gè)屬性定義元素的多種樣式，這種屬性在CSS中稱之為復(fù)合屬性。 常用的復(fù)合屬性有font、border、margin、padding和background等。 實(shí)際工作中常使用復(fù)合屬性，它可以簡(jiǎn)化代碼，提高頁面的運(yùn)行速度，但是如果只有一項(xiàng)值，

17、最好不要應(yīng)用復(fù)合屬性，以免樣式不被兼容。圖7-11 設(shè)置邊框?qū)挾榷?、?nèi)邊距、外邊距屬性1內(nèi)邊距屬性 為了調(diào)整內(nèi)容在盒子中的顯示位置，常常需要給元素設(shè)置內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。 在CSS中padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩詁order一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置如下。padding-top：上邊距。padding-right：右邊距。padding-bottom：下邊距。padding-left：左邊距。padding：上邊距 右邊距 下邊距 左邊距。 在上面的設(shè)置中，padding相關(guān)屬性的取值可為auto自動(dòng)（默認(rèn)值）、不

18、同單位的數(shù)值、相對(duì)于父元素（或?yàn)g覽器）寬度的百分比%，實(shí)際工作中最常用的是像素值px，不允許使用負(fù)值。 同邊框相關(guān)屬性一樣，使用復(fù)合屬性padding定義內(nèi)邊距時(shí)，必須按“上、右、下、左”的順時(shí)針順序采用值復(fù)制：一個(gè)值為四邊、兩個(gè)值為上下/左右，3個(gè)值為上/左右/下。 使用padding相關(guān)屬性設(shè)置圖像和段落的內(nèi)邊距，其中段落內(nèi)邊距使用%數(shù)值。 由于段落的內(nèi)邊距設(shè)置為了%數(shù)值，當(dāng)拖動(dòng)瀏覽器窗口改變其寬度時(shí)，段落的內(nèi)邊距會(huì)隨之發(fā)生變化（這時(shí)標(biāo)記的父元素為）。圖7-12 設(shè)置內(nèi)邊距2外邊距屬性值 網(wǎng)頁是由多個(gè)盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設(shè)置外邊距，所謂

19、外邊距指的是元素邊框與相鄰元素之間的距離。 在CSS中margin屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊距padding的用法類似，設(shè)置外邊距的方法如下。 margin-top：上邊距。 margin-right：右邊距。 margin-bottom：下邊距。 margin-left：上邊距。 margin：上邊距 右邊距 下邊距 左邊距。 margin相關(guān)屬性的值，以及復(fù)合屬性margin取1至4個(gè)值的情況與padding相同。 但是外邊距可以使用負(fù)值，使相鄰元素重疊，在后面的課程中將詳細(xì)介紹外邊距取負(fù)值的情況。 在上面的案例中使用浮動(dòng)屬性float使圖像居左，同時(shí)設(shè)置圖像的右外邊距和

20、下外邊距，使圖像和文本之間拉開一定的距離，實(shí)現(xiàn)常見的排版效果。圖7-13 設(shè)置外邊距三、背景屬性 背景屬性的重要性：網(wǎng)頁能通過背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設(shè)計(jì)中，控制背景顏色和背景圖像是一個(gè)很重要的步驟。1背景顏色 網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色、十六進(jìn)制#RRGGBB、RGB代碼rgb(r,g,b)，默認(rèn)為transparent透明，即子元素會(huì)顯示其父元素的背景。圖7-14 設(shè)置元素背景顏色2背景圖像 背景不僅可以設(shè)置為某種顏色，還可以將圖像作為網(wǎng)頁元

21、素的背景，通過background-image屬性實(shí)現(xiàn)。 運(yùn)行例程代碼，得到效果如圖7-15所示。圖7-15 設(shè)置網(wǎng)頁元素的背景圖像3背景圖像平鋪 默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪，如果不希望圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過background-repeat屬性來控制，具體使用方法如下。 repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）。 no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）。 repeat-x：只沿水平方向平鋪。 repeat-y：只沿豎直方向平鋪。 運(yùn)行例程代碼，得到效果如圖7-16所示。圖7-16 設(shè)置網(wǎng)頁元素背景圖像平鋪4背景圖像位

22、置 如果希望背景圖像出現(xiàn)在指定位置，就需要另一個(gè)CSS屬性background-position，設(shè)置背景圖像的位置。 在CSS中，background-position屬性的值通常設(shè)置為兩個(gè)，中間用空格隔開，用于定義背景圖像在元素的水平和垂直方向的坐標(biāo)，例如上面的“right bottom”，默認(rèn)為“0 0”或“top left”，即背景圖像位于元素的左上角。 background-position屬性的取值有多種，具體如下。（1）使用不同單位（最常用的是像素px）的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如background-position:20px 20px。（2）使用預(yù)定義的關(guān)鍵

23、字：指定背景圖像在元素中的對(duì)齊方式。 水平方向值：left、center、right。 垂直方向值：top、center、bottom。（3）使用百分比：按背景圖像和元素的指定點(diǎn)對(duì)齊。 0% 0% 表示圖像左上角與元素的左上角對(duì)齊。 50% 50% 表示圖像50% 50%中心點(diǎn)與元素50% 50%的中心點(diǎn)對(duì)齊。 20% 30% 表示圖像20% 30%的點(diǎn)與元素20% 30%的點(diǎn)對(duì)齊。 100% 100% 表示圖像右下角與元素的右下角對(duì)齊，而不是圖像充滿元素。 運(yùn)行例程代碼，得到效果如圖7-17所示。圖7-17 設(shè)置元素背景圖像位置5背景圖像固定 在網(wǎng)頁上設(shè)置背景圖像時(shí)，隨著頁面滾動(dòng)條的移動(dòng)，背

24、景圖像也會(huì)跟著一起移動(dòng)。 如果希望背景圖像固定在屏幕上，不隨著頁面元素滾動(dòng)，可以使用background-attachment屬性來設(shè)置，其屬性值如下。 scroll：圖像隨頁面元素一起滾動(dòng)（默認(rèn)值）。 fixed：圖像固定在屏幕上，不隨頁面元素滾動(dòng)。 運(yùn)行例程代碼，得到效果如圖7-18所示。圖7-18 設(shè)置元素背景圖像固定7.2.3 盒子的寬度和高度 網(wǎng)頁是由多個(gè)盒子排列而成的，每個(gè)盒子都有固定的大小，在CSS中使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。 CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：盒子的總寬度 = width + 左右內(nèi)邊距之和 + 左右邊

25、框?qū)挾戎?+ 左右外邊距盒子的總高度 = height + 上下內(nèi)邊距之和 + 上下邊框?qū)挾戎?+ 上下外邊距 7.2.4 盒子外邊距合并問題 margin屬性是指的外邊距，控制margin盒子和盒子之間的距離，可理解為搞“外交”的。 padding屬性是指的內(nèi)邊距，可理解為搞“內(nèi)政”的。一、水平margin（外邊距）能夠代數(shù)相加減（行內(nèi)元素） 運(yùn)行例程代碼，得到效果如圖7-19所示。 從以上代碼和瀏覽器效果圖看，margin值在水平方向上能夠相加（代數(shù)相加，計(jì)算代數(shù)和）。 一般不給出行內(nèi)元素margin-top、 margin-bottom（上外邊距、下外邊距）。 margin值為水平方

26、向代數(shù)和：margin-right: 60pxmargin-left: 30px 所以，margin值 = 60px + 30px = 90px。圖7-19 水平margin能夠代數(shù)相加減二、垂直margin（外邊距）有塌陷現(xiàn)象（塊級(jí)元素） 運(yùn)行例程代碼，得到效果如圖7-20所示。 從以上代碼和瀏覽器效果圖看，margin值在垂直方向上不能相加，而是有塌陷現(xiàn)象存在。 以數(shù)的絕對(duì)值大的為準(zhǔn)，數(shù)小的無效。由于50px10px，上下間隙以50px為準(zhǔn)，10px無效。 所以，垂直方向margin值 = 50px。 提示：由于塌陷現(xiàn)象的存在，若要設(shè)置margin-top，那么垂直方向這一“溜”都設(shè)置ma

27、rgin-top，若要設(shè)margin-bottom，那么垂直方向這一“溜”都設(shè)置margin-bottom。圖7-20 垂直margin有塌陷現(xiàn)象三、盒子居中margin:0 auto; 盒子居中在網(wǎng)頁布局中經(jīng)常用到。 運(yùn)行例程代碼，得到效果如圖7-21所示。圖7-21 盒子居中【注意】（1）使用margin:0 auto;的盒子，必須有明確的width。（2）只有標(biāo)準(zhǔn)流的盒子才能使用margin:0 auto;居中。也就是說，當(dāng)一個(gè)盒子浮動(dòng)了、絕對(duì)定位了、固定定位了，都不能使用margin:0 auto;。（3）margin:0 auto;是在居中盒子，不是居中文本。文本的居中要使用text

28、-align:center;。7.3 浮動(dòng) 我們回顧一下標(biāo)準(zhǔn)流的概念。 所謂標(biāo)準(zhǔn)流（也稱標(biāo)準(zhǔn)文檔流），就是指一個(gè)元素在沒有CSS修飾的時(shí)候的位置處理方法。 在標(biāo)準(zhǔn)流中，就必須按照標(biāo)準(zhǔn)流的定位規(guī)則。任何一個(gè)頁面，有且僅有一個(gè)標(biāo)準(zhǔn)流。 標(biāo)準(zhǔn)文檔流里面的限制很多，比如要實(shí)現(xiàn)既要并排，又要設(shè)置寬高，此刻就要脫離標(biāo)準(zhǔn)流。所有設(shè)定了的float（浮動(dòng)）、position（定位）屬性的元素就都不在標(biāo)準(zhǔn)流中了。7.3.1 認(rèn)識(shí)浮動(dòng) 初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會(huì)按照默認(rèn)的排版方式，將頁面中的元素從上到下一一羅列，如圖7-22所示。 通過這樣的布局制作出來的頁面看起來呆板、不美觀，然而大家在瀏覽網(wǎng)頁時(shí)，會(huì)發(fā)現(xiàn)頁

29、面中的元素通常會(huì)按照左、中、右的結(jié)構(gòu)進(jìn)行排版，如圖7-23所示。圖7-22 頁面中的元素默認(rèn)的排版方式 圖7-23 頁面中的元素左、中、右結(jié)構(gòu)的排版方式 通過這樣的布局，頁面會(huì)變得整齊、有節(jié)奏。想要實(shí)現(xiàn)圖7-23所示的效果，就需要為元素設(shè)置浮動(dòng)。 所謂元素的浮動(dòng)是指：設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。【注意】 右浮動(dòng)跟左浮動(dòng)是一樣的原理。7.3.2 元素的浮動(dòng)屬性float一、定義浮動(dòng) 在CSS中，通過float屬性來定義浮動(dòng)，其基本語法格式如下：選擇器float:屬性值; 在上面的語法中，常用的float屬性值有3個(gè)，分別表示不同的含義，具體如下。

30、left：元素向左浮動(dòng)。 right：元素向右浮動(dòng)。 none：元素不浮動(dòng)（默認(rèn)值）。 運(yùn)行例程代碼，得到效果如圖7-24所示。圖7-24 定義浮動(dòng)圖文混排頁面01圖7-25 定義浮動(dòng)圖文混排頁面02 從以上效果圖還可以看出，圖片盒子被設(shè)置了左浮動(dòng)，圖片盒子出現(xiàn)如下幾個(gè)反應(yīng)。 這個(gè)盒子收縮了。這個(gè)盒子沒有width屬性，自動(dòng)收縮為內(nèi)容（img）的寬度了，表現(xiàn)出了行內(nèi)元素的一些特點(diǎn)。 由于div是個(gè)塊級(jí)元素，應(yīng)該會(huì)霸占瀏覽器的一行，但此時(shí)，不再霸占瀏覽器的一行了。它仍然維持著自身的塊級(jí)元素的特點(diǎn)：能接受width、height。 因?yàn)榇撕凶右呀?jīng)脫離了標(biāo)準(zhǔn)流了，而后面p標(biāo)簽仍在標(biāo)準(zhǔn)流中，它們的定位

31、會(huì)無視此盒子，而文字卻環(huán)繞在此盒子的周圍。也就是說，后面的標(biāo)準(zhǔn)流中的元素，會(huì)在定位考量上無視它，但仍然影響著文字考量。 我們將以上反應(yīng)稱之為浮動(dòng)元素的“塊行二像性”。 但是后來，浮動(dòng)被用來定位了。 浮動(dòng)的元素如果被設(shè)置成左浮動(dòng)，那么它自己會(huì)向自己父輩結(jié)點(diǎn)中最近的處于標(biāo)準(zhǔn)流的那個(gè)元素的左邊框靠齊。 #box就是所謂的#tubian父輩的、最近的、處于標(biāo)準(zhǔn)流中的結(jié)點(diǎn)。所以#tupian會(huì)靠齊#box的左邊。 right：浮動(dòng)的元素如果被設(shè)置成右浮動(dòng)，那么它自己會(huì)向自己父輩結(jié)點(diǎn)中最近的處于標(biāo)準(zhǔn)流的那個(gè)元素的右邊框靠齊。 所以，元素被設(shè)置浮動(dòng)之后的效果可以總結(jié)為8個(gè)字：“脫標(biāo)”“字圍”“收縮”“貼邊”

32、。 原本CSS創(chuàng)建者設(shè)置了兩個(gè)屬性float（浮動(dòng)）、position（定位），float專門用于制作圖文混排，而position專門用于制作頁面的布局。但是，現(xiàn)在float也應(yīng)用于布局了，塊級(jí)元素在標(biāo)準(zhǔn)流中是怎么都不能排在一行的！所以，在頁面上我們只要看見兩個(gè)div并排了，并且還都是塊級(jí)，那么可以斷定：它們都浮動(dòng)了。 至此，我們可以說： “廣義定位”：用float、postition來定位； “狹義定位”：用postition來定位。二、三小盒實(shí)驗(yàn) 為了更好地理解浮動(dòng)，我們來進(jìn)行幾個(gè)實(shí)驗(yàn)，也就是經(jīng)典的“三小盒實(shí)驗(yàn)”。接下來分別進(jìn)行詳細(xì)的說明。1均不浮動(dòng)的情況 運(yùn)行例程代碼，得到效果如圖7-2

33、6所示。圖7-26 三小盒實(shí)驗(yàn)均不浮動(dòng)的情況 當(dāng)對(duì)頁面中的所有元素均不應(yīng)用float屬性，也就是說元素的float屬性值都為其默認(rèn)值none。頁面效果如圖7-26所示。 可見如果不對(duì)元素設(shè)置浮動(dòng)，則該元素及其內(nèi)部的子元素將按照標(biāo)準(zhǔn)文檔流的樣式顯示，即塊元素占頁面整行。2兒子1單獨(dú)設(shè)置左浮動(dòng)的情況 運(yùn)行例程代碼，得到效果如圖7-27所示。圖7-27 三小盒實(shí)驗(yàn)兒子1單獨(dú)左浮動(dòng)的情況 通過上圖容易看出，設(shè)置左浮動(dòng)的son1漂浮到了son2的左側(cè)，也就是說son1不再受文檔流控制，出現(xiàn)在一個(gè)新的層次上。脫標(biāo)：兒子1不在標(biāo)準(zhǔn)流中了，仍在標(biāo)準(zhǔn)流中的元素們需要按照標(biāo)準(zhǔn)流的定位方法來重新定位。兒子1脫標(biāo)了，

34、所以騰出位置了，兒子2的盒子取代了原來兒子1的位置。兒子1壓住了兒子2的一部分。在布局考量上，兒子2無視兒子1；而在文字考量上如下所示。字圍：文字會(huì)環(huán)繞了。收縮：width屬性沒有設(shè)置，所以收縮為文字的寬度。height也收縮了。貼邊：由于是左浮動(dòng)，兒子2貼在離其最近的父輩f(xié)ather盒子的左邊。3兒子1單獨(dú)設(shè)置右浮動(dòng)的情況 運(yùn)行例程代碼，得到效果如圖7-28所示。 float的另一個(gè)屬性值“right”在網(wǎng)頁布局時(shí)也會(huì)經(jīng)常用到，它與“l(fā)eft”屬性值的用法相同但方向相反。圖7-28 三小盒實(shí)驗(yàn)兒子1單獨(dú)右浮動(dòng)的情況4兒子1、兒子2一起設(shè)置左浮動(dòng)的情況 運(yùn)行例程代碼，得到效果如圖7-29所示。

35、圖7-29 三小盒實(shí)驗(yàn)兒子1、兒子2一起左浮動(dòng)的情況 在上圖中，son1、son2、son3 3個(gè)盒子整齊地排列在同一行，可見通過應(yīng)用“float:left;”樣式可以使son1和son2同時(shí)脫離標(biāo)準(zhǔn)文檔流的控制向左漂浮。 兒子3“發(fā)現(xiàn)”，在自己之前沒有標(biāo)準(zhǔn)流中的元素了！所以自己就是標(biāo)準(zhǔn)流中的左上角了。5兒子1、兒子2、兒子3一起設(shè)置左浮動(dòng)的情況 運(yùn)行例程代碼，得到效果如圖7-30所示。 在圖7-30中，son1、son2、son3 3個(gè)盒子排列在同一行，同時(shí)，周圍的段落文本將環(huán)繞盒子，出現(xiàn)了圖文混排的網(wǎng)頁效果。圖7-30 三小盒實(shí)驗(yàn)兒子1、兒子2、兒子3一起左浮動(dòng)的情況 現(xiàn)在要制作如圖7-3

36、3所示的頁面，則只需要對(duì)3個(gè)兒子盒子設(shè)置左浮動(dòng)，然后設(shè)置父元素的寬度，即可完成布局示意圖。 【注意】 浮動(dòng)的元素盡量是，別讓和（浮動(dòng)也有字圍現(xiàn)象）浮動(dòng)。圖7-33 三小盒實(shí)驗(yàn)布局頁面示意圖7.3.3 清除浮動(dòng)帶來的影響 由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)頁面中其他元素的排版產(chǎn)生影響。 在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：選擇器clear:屬性值; 在上面的語法中，clear屬性的常用值有3個(gè)，分別表示不同的含義，具體如下。 left：不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）。 right：不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）。 both：同時(shí)清除左右

37、兩側(cè)浮動(dòng)的影響。 接下來用幾個(gè)案例說明對(duì)標(biāo)記應(yīng)用clear屬性，來清除周圍浮動(dòng)元素對(duì)段落文本的影響。 運(yùn)行例程代碼，得到效果如圖7-34所示。圖7-34 清除浮動(dòng)兒子1、2左浮動(dòng)，兒子3右浮動(dòng)1只清除左側(cè)浮動(dòng)的影響 運(yùn)行例程代碼，得到效果如圖7-35所示。 可見文字還在圍繞著兒子3的左邊，即只清除了左浮動(dòng)。 【注意】 是對(duì)清除浮動(dòng)。需要記住的是：清除浮動(dòng)永遠(yuǎn)是針對(duì)浮動(dòng)元素后面的那個(gè)元素來說的。很多初學(xué)者覺得要為最后一個(gè)浮動(dòng)的元素清除，這是不對(duì)的！圖7-35 清除浮動(dòng)只清除左側(cè)浮動(dòng)的影響2只清除右側(cè)浮動(dòng)的影響 運(yùn)行例程代碼，得到效果如圖7-36所示。 可見文字還在圍繞著兒子1的左邊，即只清除了右

38、浮動(dòng)。圖7-36 清除浮動(dòng)只清除右側(cè)浮動(dòng)的影響3同時(shí)清除左右兩側(cè)浮動(dòng)的影響 運(yùn)行例程代碼，得到效果如圖7-37所示。 可見，這個(gè)就仿佛它前面沒有浮動(dòng)的元素一樣。圖7-37 清除浮動(dòng)同時(shí)清除左右兩側(cè)浮動(dòng)的影響4將盒子中文字清除的情況 運(yùn)行例程代碼，得到效果如圖7-38所示。 可見，將元素刪除，發(fā)現(xiàn)father變成這樣了。從邏輯上看，父盒子（大盒子）都沒有包含3個(gè)子盒子（小盒子）。 原因是：父盒子由于沒有寫height，所以它的height是由它里面的標(biāo)準(zhǔn)流中的元素的高計(jì)算出來的，而現(xiàn)在子元素都浮動(dòng)了，所以它沒有高了。剩下的粉顏色的部分，是padding:10px;造成的結(jié)果。圖7-38 清除浮動(dòng)

39、將盒子中文字清除的情況7.3.4 overflow屬性 根據(jù)CSS的盒模型概念，頁面中的每個(gè)元素，都是一個(gè)矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來控制。 對(duì)于行為，我們的意思是當(dāng)盒子內(nèi)外的內(nèi)容改變的時(shí)候，它如何處理。比如，如果你沒有設(shè)置一個(gè)盒子的高度，該盒子的高度將會(huì)根據(jù)它容納內(nèi)容的需要而增長(zhǎng)。但是當(dāng)你給一個(gè)盒子指定了一個(gè)高度或?qū)挾榷锩娴膬?nèi)容超出的時(shí)候會(huì)發(fā)生什么？這就是該添加CSS的overflow屬性的時(shí)候了，它允許你設(shè)定該種情況下如何處理。 其基本語法格式如下：選擇器overflow:屬性值; 在上面的語法中，overflow屬性的常用值有visible（默認(rèn)）、hidde

40、n、auto和scroll 4個(gè)。同樣有兩個(gè)overflow的姐妹屬性overflow-y 和overflow-x，但它們很少被采用。 運(yùn)行例程代碼，得到效果如圖7-40所示。 由圖7-40可見，里面的內(nèi)容超出了盒子指定的高度，這時(shí)就該添加CSS的overflow屬性了。1.“overflow:visible;”樣式 設(shè)置“overflow:visible;”樣式后，盒子溢出的內(nèi)容不會(huì)被修剪，而呈現(xiàn)在元素框之外。如圖7-41所示。 圖7-40 overflow屬性內(nèi)容超出盒子指定的高度 圖7-41 overflow屬性visible樣式（默認(rèn)）2.“overflow:hidden;”樣式 設(shè)置

41、“overflow:hidden;”樣式后，盒子溢出的內(nèi)容將會(huì)被修剪且不可見。如圖7-42所示。圖7-42 overflow屬性hidden樣式 從以上代碼和瀏覽器效果圖看，可以清楚地知道“overflow:hidden;”這個(gè)屬性的本意就是將所有溢出來的內(nèi)容隱藏起來。 但是，我們發(fā)現(xiàn)這個(gè)屬性能夠用于浮動(dòng)的清除。 我們知道，一個(gè)父親，不能被自己浮動(dòng)的兒子撐出高度，但是如果這個(gè)父親加上了overflow:hidden，那么這個(gè)父親就能夠被浮動(dòng)的兒子撐出高度了。3.“overflow:auto;”樣式 設(shè)置“overflow:auto;”樣式后，元素框能夠自適應(yīng)其內(nèi)容的多少，在內(nèi)容溢出時(shí)，產(chǎn)生滾動(dòng)

42、條，否則，則不產(chǎn)生滾動(dòng)條。當(dāng)內(nèi)容溢出時(shí)，如圖7-43所示。圖7-43 overflow屬性auto樣式4.“overflow:scroll;”樣式 當(dāng)定義overflow的屬性值為scroll時(shí)，元素框中也會(huì)產(chǎn)生滾動(dòng)條，如圖7-44所示。 【注意】 與“overflow:auto;”不同，當(dāng)定義“overflow:scroll;”時(shí)，不論元素是否溢出，元素框中的水平和豎直方向的滾動(dòng)條都始終存在。圖7-44 overflow屬性scroll樣式7.4 定位 事實(shí)證明，在不學(xué)習(xí)position（定位）屬性的時(shí)候，頁面是可以完美搭建出來的。那么，定位是干什么的？ 答：定位是實(shí)現(xiàn)“小心思”的。 圖7-

43、45為拉手網(wǎng)首頁截圖，在很多地方，使用了定位。圖7-45 拉手網(wǎng)首頁截圖 如圖7-46所示，左上角的“多套餐”“免預(yù)約”的定位效果，就是我們通常所說的實(shí)現(xiàn)的“小心思”。圖7-46 拉手網(wǎng)首頁定位應(yīng)用部分截圖7.4.1 元素的定位屬性 元素的定位屬性主要包括定位模式和邊偏移兩部分。一、定位模式 在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：選擇器position:屬性值; 在上面的語法中，position屬性的常用值有4個(gè)，分別表示不同的定位模式，具體如下。（1）static：自動(dòng)定位（默認(rèn)定位方式）。（2）relative：相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位

44、。（3）absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位。（4）fixed：固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。二、邊偏移 通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，對(duì)他們的具體解釋如下。（1）top：頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離。（2）bottom：底部偏移量，定義元素相對(duì)于其父元素下邊線的距離。（3）left：左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離。（4）right：右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離。 所有有position:absolute、relative

45、、fixed的元素，都能夠用top、right、bottom、left 4個(gè)屬性來進(jìn)行定位，但是參考點(diǎn)不一樣。 兩兩一組，如：top、left / bottom、right。7.4.2 常見的幾種定位模式一、靜態(tài)定位 靜態(tài)定位是元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。 任何元素在默認(rèn)狀態(tài)下都會(huì)以靜態(tài)定位來確定自己的位置，所以當(dāng)沒有定義position屬性時(shí)，并不說明該元素沒有自己的位置，他會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。 在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或r

46、ight）來改變?cè)氐奈恢?。二、相?duì)定位 相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置。 對(duì)元素設(shè)置相對(duì)定位后，可以通過邊偏移屬性改變?cè)氐奈恢?，但是他在文檔流中的位置仍然保留。position:relative; 相對(duì)定位的元素沒有脫離標(biāo)準(zhǔn)流，但是“形影分離”，對(duì)后面的元素產(chǎn)生影響時(shí)一律只考慮自己的原來位置。 運(yùn)行例程代碼，得到效果如圖7-47所示。圖7-47 定位屬性自動(dòng)定位（默認(rèn)） 如圖7-48所示，對(duì)#son1設(shè)置相對(duì)定位后，它會(huì)相對(duì)于其自身的默認(rèn)位置進(jìn)行偏移，但是它在文檔流中的位置仍然保留。即：相對(duì)定

47、位的盒子，沒有脫離標(biāo)準(zhǔn)流。 因?yàn)閮鹤?沒有上來，出現(xiàn)的是“形影分離”的效果。它自己的真實(shí)位置仍然在標(biāo)準(zhǔn)流中的原來位置，而“形”被定位了。 被相對(duì)定位的元素的margin、padding、width、height、border都會(huì)對(duì)原來的位置產(chǎn)生影響。圖7-48 定位屬性兒子1相對(duì)定位 運(yùn)行例程代碼，得到效果如圖7-49所示。 由圖7-49所示的結(jié)果可以看出，在父、子元素都有定位的時(shí)候，先完成父親的定位，再進(jìn)行兒子的定位。 所有relative定位的參考點(diǎn)是父代、最近的、完成定位了的元素的左上角。 relative定位主要是做部件細(xì)微位置調(diào)整用的。 由于relative會(huì)留一個(gè)“老窩”，所以應(yīng)用

48、幾乎沒有。 relative最常見的應(yīng)用，就是給position:absolute（絕對(duì)定位）的元素提供參考點(diǎn)。圖7-49 定位屬性父、子相對(duì)定位三、絕對(duì)定位 絕對(duì)定位是將元素依據(jù)最近的、已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。 當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。如下所示：position:absolute; 運(yùn)行例程代碼，得到效果如圖7-50所示。 在圖7-50中，設(shè)置為絕對(duì)定位的元素#son1依據(jù)瀏覽器窗口進(jìn)行定位。并且，這時(shí)#son2占據(jù)了#son1的位置，即

49、#son1脫離了標(biāo)準(zhǔn)文檔流的控制，不再占據(jù)標(biāo)準(zhǔn)文檔流中的空間。 另外，右下角也是一樣的道理（使用bottom和right定位）。圖7-50 定位屬性兒子1絕對(duì)定位（top、left） 運(yùn)行例程代碼，得到效果如圖7-51所示。 即使窗口被拉伸、縮小，也會(huì)保持#son1元素與窗口右下角的相對(duì)位置。 最后，看一個(gè)使用最廣的定位方法：以“父盒子”為基準(zhǔn)點(diǎn)。圖7-51 定位屬性兒子1絕對(duì)定位（bottom、right） 運(yùn)行例程代碼，得到效果如圖7-52所示。 【注意】 在以后使用定位的時(shí)候，只要記住一句話：“子”絕“父”相，即對(duì)兒子進(jìn)行絕對(duì)定位，對(duì)父親進(jìn)行相對(duì)定位。圖7-52 定位屬性實(shí)際應(yīng)用（“子”

50、絕“父”相）四、固定定位 固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。 當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。 不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。但是，由于IE 6不支持固定定位，因此其在實(shí)際工作中較少使用。 格式如下：position:fixed; 其特性和absolute定位一樣，參考定位點(diǎn)一定是瀏覽器窗口。不會(huì)隨滾屏移動(dòng)。不寫left和top的時(shí)候，以窗口左上角進(jìn)

51、行定位，這一點(diǎn)和absolute不一樣。 運(yùn)行例程代碼，得到效果如圖7-53所示。 在上例中，父盒子和子盒子（兒子1）都進(jìn)行了固定定位，可見參考定位點(diǎn)是瀏覽器窗口。即便是縮放瀏覽器窗口大小，也不會(huì)隨滾屏移動(dòng)。 想必大家對(duì)百度官網(wǎng)首頁的logo在瀏覽器窗口居中的效果有所了解，它也是使用了固定定位的形式。圖7-53 定位屬性固定定位（父、子固定）圖7-54 定位屬性固定定位（自適應(yīng)高、寬居中）五、z-index層疊等級(jí)屬性 z-index層疊等級(jí)屬性是給已經(jīng)定位了的元素設(shè)置疊放次序的。 當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。 在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定

52、位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。 z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。 不應(yīng)用z-index值的元素可以視為該值為0，標(biāo)準(zhǔn)流的z-index值數(shù)值也可視為0。 無論給某元素多大的z-index值，其疊放次序取決于其父代元素的z-index值的大小，即比較各元素父代元素的z-index值的大小。 運(yùn)行例程代碼，得到效果如圖7-55所示。 以上是已經(jīng)定位了的元素默認(rèn)的疊放次序。對(duì)3個(gè)元素同時(shí)設(shè)置了定位，定位元素之間發(fā)生了重疊。圖7-55 定位屬性z-index層疊等級(jí)屬性01 運(yùn)行例程代碼，得到效果如圖7-56所示。 以上是給已

53、經(jīng)定位了的兩個(gè)元素設(shè)置了疊放次序。根據(jù)z-index:值的不同，疊放次序發(fā)生了變化。圖7-56 定位屬性z-index層疊等級(jí)屬性02【操作準(zhǔn)備】 創(chuàng)建所需的文件夾，復(fù)制所需的資源到桌面上。即：在本地硬盤（例如D盤）中創(chuàng)建一個(gè)文件夾“網(wǎng)頁設(shè)計(jì)與制作練習(xí)Unit07”，然后將光盤中的“start”文件夾中“Unit07”文件夾中的“Unit07課程資源”文件夾所有內(nèi)容復(fù)制到桌面上?！灸７掠?xùn)練】任務(wù)7.1 北京大學(xué)網(wǎng)站CSS布局與網(wǎng)頁美化 本單元“模仿訓(xùn)練”的任務(wù)卡如表7.1所示。任務(wù)編號(hào)7.1任務(wù)名稱北京大學(xué)網(wǎng)站CSS布局與網(wǎng)頁美化網(wǎng)頁主題北京大學(xué)計(jì)劃工時(shí) 網(wǎng)頁制作任務(wù)描述（1）設(shè)計(jì)網(wǎng)頁的頁面布

54、局結(jié)構(gòu)（2）創(chuàng)建網(wǎng)頁的頁面布局樣式（3）創(chuàng)建美化頁面元素的樣式 （4）插入DIV標(biāo)簽，對(duì)網(wǎng)頁的頁面進(jìn)行布局（5）新建導(dǎo)航欄代碼片斷、表單代碼片斷和表格代碼片斷（6）在頁面各個(gè)區(qū)塊中輸入文字或插入頁面元素網(wǎng)頁布局結(jié)構(gòu)分析使用DIVCSS布局網(wǎng)頁網(wǎng)頁色彩搭配分析網(wǎng)頁中文字的顏色：#2b2b2b、black網(wǎng)頁組成元素分析主要包括文字、圖像、SWF動(dòng)畫、表單、表格、項(xiàng)目列表、導(dǎo)航欄等網(wǎng)頁元素任務(wù)實(shí)現(xiàn)流程分析分析、設(shè)計(jì)網(wǎng)頁的頁面布局結(jié)構(gòu)創(chuàng)建網(wǎng)頁的頁面布局樣式創(chuàng)建美化頁面元素的樣式插入DIV標(biāo)簽，對(duì)網(wǎng)頁的頁面進(jìn)行布局新建代碼片斷在頁面各個(gè)區(qū)塊中輸入文字或插入頁面元素表7.1 單元7“模仿訓(xùn)練”任務(wù)卡 本

55、單元“模仿訓(xùn)練”的任務(wù)跟蹤卡如表7.2所示。任務(wù)編號(hào)開始時(shí)間完成時(shí)間計(jì)劃工時(shí)實(shí)際工時(shí)當(dāng)前狀態(tài) 表7.2 單元7“模仿訓(xùn)練”任務(wù)跟蹤卡任務(wù)7.1.1 北京大學(xué)新聞網(wǎng)單個(gè)盒子的制作任務(wù)描述 本單元“模仿訓(xùn)練”北京大學(xué)新聞網(wǎng)單個(gè)盒子的瀏覽效果如圖7-57所示。圖7-57 北京大學(xué)新聞網(wǎng)單個(gè)盒子瀏覽效果圖任務(wù)實(shí)施一、北京大學(xué)新聞網(wǎng)單個(gè)盒子結(jié)構(gòu)分析與結(jié)構(gòu)搭建（1）將北京大學(xué)新聞網(wǎng)單個(gè)盒子截圖拖曳到在FW（Fireworks）中。（2）利用切片工具丈量該盒子的各種長(zhǎng)度，利用吸管工具吸取文字、邊框的顏色值。單個(gè)盒子尺寸度量截圖如圖7-58所示。圖7-58 單個(gè)盒子尺寸度量截圖（3）結(jié)構(gòu)搭建。 該盒子只有段落

56、文字，無其他元素。使用標(biāo)簽，取名為“box”。 該部分結(jié)構(gòu)代碼如下： 按照中央部署要求和學(xué)校黨委統(tǒng)一安排，北京大學(xué)于5月29日下午在辦公樓禮堂舉行“三嚴(yán)三實(shí)”專題教育黨課。北京大學(xué)黨委書記朱善璐擔(dān)任主講，詳細(xì)闡釋了“三嚴(yán)三實(shí)”的科學(xué)內(nèi)涵、重大意義和開展好“三嚴(yán)三實(shí)”專題教育的必要性和緊迫性，梳理了學(xué)校“不嚴(yán)不實(shí)”問題的表現(xiàn)、危害與成因，對(duì)全校開展“三嚴(yán)三實(shí)”專題教育進(jìn)行動(dòng)員部署。 二、北京大學(xué)新聞網(wǎng)單個(gè)盒子樣式的書寫（1）width為盒子真實(shí)內(nèi)容的寬度。（2）color為文字的顏色值。 最后，也可以利用谷歌瀏覽器“審查元素”的功能進(jìn)行微調(diào)。任務(wù)7.1.2 北京大學(xué)新聞網(wǎng)頭條推薦盒子的制作任務(wù)描

57、述 本單元“模仿訓(xùn)練”北京大學(xué)新聞網(wǎng)頭條推薦盒子的瀏覽效果如圖7-59所示。任務(wù)實(shí)施一、北京大學(xué)新聞網(wǎng)頭條推薦盒子結(jié)構(gòu)分析與結(jié)構(gòu)搭建（1）將北京大學(xué)新聞網(wǎng)頭條推薦盒子截圖拖曳到在Fireworks中。（2）大盒子包含2個(gè)小盒子，大盒子取名為“box”。 2個(gè)小盒子分別取名為標(biāo)簽和。整體結(jié)構(gòu)分析如圖7-60所示。圖7-59 北京大學(xué)新聞網(wǎng)頭條推薦盒子瀏覽效果圖 圖7-60 北京大學(xué)新聞網(wǎng)頭條推薦盒子整體結(jié)構(gòu)分析（3）利用切片工具丈量該盒子的各種長(zhǎng)度，利用吸管工具吸取文字、邊框的顏色值。（4）結(jié)構(gòu)的搭建。 瀏覽器效果如圖7-61所示。圖7-61 北京大學(xué)新聞網(wǎng)頭條推薦盒子結(jié)構(gòu)搭建效果圖二、北京大學(xué)

58、新聞網(wǎng)頭條推薦盒子樣式的書寫 瀏覽效果如圖7-59所示。 最后，也可以利用谷歌瀏覽器“審查元素”的功能進(jìn)行微調(diào)。任務(wù)7.1.3 北京大學(xué)新聞網(wǎng)選項(xiàng)卡的制作任務(wù)描述 本單元“模仿訓(xùn)練”北京大學(xué)新聞網(wǎng)選項(xiàng)卡的瀏覽效果如圖7-62所示。圖7-62 北京大學(xué)新聞網(wǎng)選項(xiàng)卡瀏覽效果圖 這個(gè)選項(xiàng)卡的形式非常流行，圖7-63是網(wǎng)易首頁中選項(xiàng)卡的使用截圖。圖7-63 網(wǎng)易首頁中選項(xiàng)卡的使用截圖任務(wù)實(shí)施一、北京大學(xué)新聞網(wǎng)選項(xiàng)卡整體結(jié)構(gòu)分析與結(jié)構(gòu)的搭建（1）北京大學(xué)新聞網(wǎng)選項(xiàng)卡整體上為一個(gè)大盒子，取名“xuanxiangka”。整個(gè)大盒子寬、高的質(zhì)量，從最大范圍進(jìn)行（即外框）。大盒子“xuanxiangka”包含2

59、個(gè)小盒子，其順序分別為hd和bd。將北京大學(xué)新聞網(wǎng)選項(xiàng)卡截圖拖曳到在Fireworks中，利用切片工具丈量該盒子的各種長(zhǎng)度，利用吸管工具吸取文字、邊框的顏色值。 北京大學(xué)新聞網(wǎng)選項(xiàng)卡整體結(jié)構(gòu)分析如圖7-64所示。（2）#xuanxiangka結(jié)構(gòu)的搭建。圖7-64 北京大學(xué)新聞網(wǎng)選項(xiàng)卡整體結(jié)構(gòu)分析 瀏覽器效果如圖7-65所示。圖7-65 北京大學(xué)新聞網(wǎng)選項(xiàng)卡整體結(jié)構(gòu)搭建二、北京大學(xué)新聞網(wǎng)選項(xiàng)卡#hd結(jié)構(gòu)的搭建與樣式的書寫1#hd結(jié)構(gòu)的分析與結(jié)構(gòu)搭建 #hd盒子分為3個(gè)部分：新聞（class=span1）、圖片（class=span2）和教育（class=span3）。 瀏覽器效果，如圖7-66

60、所示。圖7-66 北京大學(xué)新聞網(wǎng)選項(xiàng)卡#hd結(jié)構(gòu)搭建2#hd樣式的書寫 #hd樣式的結(jié)構(gòu)如圖7-67所示。 #hd樣式的書寫最關(guān)鍵的地方，就是需要將3個(gè)小盒子的邊框做一個(gè)合理的安排與分配，以避免重復(fù)和漏畫。同時(shí)，需要注意：為統(tǒng)一起見，尺寸都是102px29px，#span1有左邊線、右邊線和白色的下邊線，#span2有右邊線和下邊線，#span3有右邊線和下邊線。邊線的分配如圖7-68所示。圖7-67 北京大學(xué)新聞網(wǎng)選項(xiàng)卡#hd結(jié)構(gòu)分析圖 圖7-68 北京大學(xué)新聞網(wǎng)選項(xiàng)卡#hd結(jié)構(gòu)邊線分配圖 瀏覽器效果如圖7-69所示。圖7-69 北京大學(xué)新聞網(wǎng)選項(xiàng)卡#hd瀏覽器效果圖三、北京大學(xué)新聞網(wǎng)選項(xiàng)卡