項(xiàng)目5利用盒子模型布局網(wǎng)頁01040203目錄盒子模型基本屬性的應(yīng)用

border屬性的應(yīng)用border-radius屬性的應(yīng)用padding和margin屬性的應(yīng)用05080607目錄box-sizing屬性的應(yīng)用box-shadow屬性的應(yīng)用float屬性的應(yīng)用盒子模型清除浮動(dòng)的應(yīng)用

0910目錄position屬性的應(yīng)用

背景屬性的應(yīng)用1112opacity屬性的應(yīng)用漸變屬性的應(yīng)用1314目錄重復(fù)漸變屬性的應(yīng)用

使用盒子模型布局網(wǎng)頁項(xiàng)目描述利用前面所學(xué)知識(shí)只能實(shí)現(xiàn)一些簡單的圖文混排效果，無法對(duì)整個(gè)網(wǎng)頁內(nèi)容進(jìn)行整體布局。本項(xiàng)目主要利用盒子模型從布局的角度出發(fā)對(duì)整個(gè)網(wǎng)頁及各模塊元素進(jìn)行布局，并綜合利用前面所學(xué)的HTML5和CSS3相關(guān)知識(shí)，制作一個(gè)“消防安全知識(shí)教育”網(wǎng)頁項(xiàng)目效果圖知識(shí)儲(chǔ)備知識(shí)目標(biāo)理解盒子模型相關(guān)屬性的用法和用途理解元素的浮動(dòng)和定位原理及漸變屬性的原理掌握背景屬性的設(shè)置方法010203盒子模型屬性的基本應(yīng)用01任務(wù)描述使用盒子模型常用的基本屬性定義網(wǎng)頁內(nèi)容，效果如右圖所示。知識(shí)點(diǎn)撥

盒子模型01CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中CSS技術(shù)所使用的一種思維模型。其常用的屬性有content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）、width（寬度）和height（高度），如圖5-2所示。圖5-3中的left（左邊）、right（右邊）、top（頂部）、bottom（底部）常用來設(shè)置盒子模型相關(guān)屬性不同方向的數(shù)值。知識(shí)點(diǎn)撥

border（邊框）屬性02border屬性的語法格式如下。border:border-widthborder-styleborder-colorborder-width用于設(shè)置邊框?qū)挾?；border-style用于設(shè)置邊框樣式；border-color用于設(shè)置邊框顏色。border-style是border屬性不可或缺的屬性值，具體應(yīng)用在任務(wù)2中進(jìn)行詳細(xì)講解。知識(shí)點(diǎn)撥

padding（內(nèi)邊距）和margin（外邊距）屬性03padding（內(nèi)邊距）和margin（外邊距）屬性一般用來調(diào)整父級(jí)與子級(jí)元素之間的位置關(guān)系，具體應(yīng)用在任務(wù)4中進(jìn)行詳細(xì)講解。

盒子模型border屬性的應(yīng)用02任務(wù)描述使用盒子模型的border屬性對(duì)網(wǎng)頁中的文本內(nèi)容進(jìn)行不同邊框樣式的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥border-style屬性01知識(shí)點(diǎn)撥綜合設(shè)置邊框02border（邊框）屬性可以一次性設(shè)置盒子模型4條邊框的寬度、樣式和顏色，也可以單獨(dú)設(shè)置某條邊框的寬度、樣式和顏色，如使用border-top、border-right、border-bottom、border-left屬性。在設(shè)置border屬性時(shí)，寬度、樣式、顏色三個(gè)屬性值不分先后順序。該任務(wù)在設(shè)置邊框時(shí)沒有設(shè)置顏色，所以邊框的顏色就和文本一起應(yīng)用了body{color:red;}這個(gè)樣式。對(duì)圖片也可以設(shè)置邊框，其和對(duì)文本設(shè)置邊框類似，這里不做詳細(xì)介紹。盒子模型border-radius屬性的應(yīng)用03任務(wù)描述使用盒子模型的border-radius屬性對(duì)網(wǎng)頁中的圖片分別進(jìn)行不同樣式的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥border-radius屬性用于為元素設(shè)置圓角邊框，基本語法格式如下。border-radius：參數(shù)1/參數(shù)2在上面的語法格式中，參數(shù)1表示圓角的水平半徑，參數(shù)2表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開（/不是必須的，沒有時(shí)用空格隔開），常用的單位是px，參數(shù)可以是一個(gè)數(shù)值，也可以是一個(gè)百分比。5-3-1.html設(shè)置了水平半徑為100px,垂直半徑為50px的圓角邊框效果。5-3-2.html設(shè)置了橢圓形邊框，之所以是橢圓形邊框，是因?yàn)樵搱D片是長方形的，如果圖片是正方形（圖片寬度和高度一致）的，則border-radius:50%呈現(xiàn)的效果直接是圓形邊框。border-radius屬性可以接收1～4個(gè)值，規(guī)則如下。四個(gè)值：border-radius:15px50px30px5px;（依次分別表示左上角、右上角、右下角、左下角）；三個(gè)值：border-radius:15px50px30px;（第一個(gè)值表示左上角，第二個(gè)值表示右上角和左下角，第三個(gè)值表示右下角）；兩個(gè)值：border-radius:15px50px;（第一個(gè)值表示左上角和右下角，第二個(gè)值表示右上角和左下角）；一個(gè)值：border-radius:15px;（該值表示四個(gè)角，即圓角半徑都是一樣的）。以上參數(shù)值為舉例所用。border-radius屬性01盒子模型padding和margin屬性的應(yīng)用04任務(wù)描述使用盒子模型的padding和margin屬性對(duì)網(wǎng)頁中的內(nèi)容進(jìn)行位置布局，效果如右圖所示。知識(shí)點(diǎn)撥margin（外邊距）屬性用于定義元素周圍的空間。其可以單獨(dú)改變?cè)氐纳?、下、左、右邊距，也可以一次性改變所有邊距。在該任?wù)的margin:40pxauto;中40px代表上下外邊距，auto代表左右（水平）外邊距，當(dāng)水平方向外邊距為auto時(shí)，盒子在瀏覽器（頁面）中呈現(xiàn)水平居中效果，所以一般盒子模型需要設(shè)置水平居中效果時(shí)，就可以將水平外邊距值設(shè)為auto，上下外邊距可以根據(jù)盒子模型內(nèi)容布局的需要進(jìn)行設(shè)置，無具體要求時(shí)也可直接用margin:0auto;設(shè)置盒子模型水平居中效果。margin屬性值及其描述如表5-2所示。margin（外邊距）屬性01知識(shí)點(diǎn)撥padding（內(nèi)邊距）用于定義元素邊框與元素內(nèi)容之間的距離。當(dāng)元素的內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)被元素背景顏色填充。單獨(dú)使用padding屬性可以改變上下左右的填充。內(nèi)外邊距圖解如下圖所示。padding（內(nèi)邊距）02另外，在后續(xù)任務(wù)中會(huì)經(jīng)常看到以下代碼，其主要用于在任務(wù)開始前清除瀏覽器的內(nèi)外邊距。*{margin:0;padding:0;}知識(shí)點(diǎn)撥div是一個(gè)塊元素，它是一個(gè)雙標(biāo)簽。這意味著它的內(nèi)容將自動(dòng)開始一個(gè)新行。開發(fā)者通常把它當(dāng)作盒子模型常用的標(biāo)簽，在里面布局圖片、文本等網(wǎng)頁模塊的內(nèi)容。一個(gè)頁面中可以由多個(gè)<div>標(biāo)簽組合布局成一個(gè)綜合網(wǎng)頁。一個(gè)<div>標(biāo)簽可嵌套多個(gè)<div>標(biāo)簽，分別用class或id進(jìn)行定義。<div>標(biāo)簽03盒子模型box-sizing屬性的應(yīng)用05任務(wù)描述使用盒子模型的box-sizing屬性對(duì)網(wǎng)頁中的不同內(nèi)容進(jìn)行樣式設(shè)置，要求體現(xiàn)出該屬性不同屬性值的對(duì)比效果，效果如右圖所示。知識(shí)點(diǎn)撥box-sizing屬性用于定義元素寬度和高度的計(jì)算方式，即它們是否包含內(nèi)邊距（padding）和邊框（border）。如果不指定box-sizing屬性，在默認(rèn)情況下，元素的寬度和高度是這樣計(jì)算的：

width+padding+border=元素的實(shí)際寬度；

height+padding+border=元素的實(shí)際高度。這意味著：當(dāng)設(shè)置元素的寬度/高度時(shí)，該元素通?？雌饋肀仍O(shè)置得更大（因?yàn)樵氐倪吙蚝蛢?nèi)邊距已被添加到元素的指定寬度/高度中）。box-sizing屬性解決了這個(gè)問題。其常用的屬性值有以下兩個(gè)。

border-box：寬度和高度包括內(nèi)邊距和邊框；

content-box：寬度和高度不包括內(nèi)邊距和邊框。在5-5.html中，兩個(gè)盒子模型的寬度都是200px，高度都是100px，box1的box-sizing屬性取值為content-box，所以實(shí)際寬度會(huì)在原來200px的基礎(chǔ)上加上padding-right:20px;（右內(nèi)邊距20px)，以及兩側(cè)的邊框?qū)挾龋ǜ?0px），相當(dāng)于box1的寬度=200+20+10+10=240（px），box1的高度=100+10+10=120（px）。而box2的box-sizing屬性取值為border-box,它的寬度已經(jīng)包括了內(nèi)邊距和邊框，所以實(shí)際效果與定義的寬度200px和高度100px是一致的。在實(shí)際應(yīng)用中，border-box是最常用的。box-sizing屬性01盒子模型box-shadow屬性的應(yīng)用06任務(wù)描述使用盒子模型的box-shadow屬性對(duì)網(wǎng)頁中的圖片進(jìn)行陰影樣式設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥box-shadow屬性01box-shadow屬性用于為盒子模型添加一個(gè)或多個(gè)陰影效果，基本語法格式如下。box-shadow:水平陰影

垂直陰影

陰影模糊半徑

擴(kuò)展半徑

陰影顏色

陰影類型在上面的語法格式中，水平陰影和垂直陰影是必選屬性值，其他屬性值都是可選的，陰影類型默認(rèn)是外陰影。在該任務(wù)中應(yīng)用的是內(nèi)陰影，因?yàn)樵O(shè)置了內(nèi)邊距，所以內(nèi)陰影效果比較明顯。如果要設(shè)置多重陰影，則可以在當(dāng)前陰影設(shè)置后加逗號(hào)，繼續(xù)重復(fù)設(shè)置陰影效果，格式和上一個(gè)陰影的是完全一樣的。盒子模型float屬性的應(yīng)用07任務(wù)描述利用前面學(xué)過的盒子模型相關(guān)知識(shí)，并結(jié)合float屬性，將3個(gè)小盒子并排整齊顯示，效果如右圖所示。知識(shí)點(diǎn)撥

float屬性01盒子模型清除浮動(dòng)的應(yīng)用08任務(wù)描述在任務(wù)7的基礎(chǔ)上添加一個(gè)父元素盒子模型，結(jié)合盒子模型的幾種清除浮動(dòng)的方式清除浮動(dòng)，將3個(gè)小盒子容納在父元素的盒子模型中，效果如右圖所示。知識(shí)點(diǎn)撥空標(biāo)簽01空標(biāo)簽是指在HTML中只有標(biāo)簽，沒有任何內(nèi)容的元素。這種標(biāo)簽通常用于指示某種操作或?qū)傩缘拇嬖凇lear屬性02對(duì)元素設(shè)置浮動(dòng)效果之后，會(huì)對(duì)周圍的元素造成一定的影響，為了消除這種影響，可以使用clear屬性清除浮動(dòng)，clear屬性值及其描述如下表所示。屬性值描述left左側(cè)不允許有浮動(dòng)元素right右側(cè)不允許有浮動(dòng)元素both左右兩側(cè)均不允許有浮動(dòng)元素none默認(rèn)值，允許浮動(dòng)元素出現(xiàn)在左右兩側(cè)inherit從父元素繼承clear屬性值知識(shí)點(diǎn)撥clear屬性02在該任務(wù)中，如果不清除浮動(dòng)，則網(wǎng)頁呈現(xiàn)的效果如下圖所示。圖5-13呈現(xiàn)的效果并不是我們想要的。因?yàn)楦?dòng)會(huì)對(duì)周圍元素產(chǎn)生一定的影響，所以在該任務(wù)中分別使用了3種不同的方法來清除浮動(dòng)：5-8-1.html使用了空標(biāo)簽清除浮動(dòng)，5-8-2.html使用了overflow屬性清除浮動(dòng)，5-8-3.html使用了after偽對(duì)象清除浮動(dòng)（相當(dāng)于在父元素后面加入空的內(nèi)容）。這3種方法都能實(shí)現(xiàn)我們想要的效果，讀者可以使用比較熟悉且擅長的方法，編者推薦使用第2種方法，其使用的代碼少，更簡潔、直觀。知識(shí)點(diǎn)撥overflow屬性03overflow屬性用于規(guī)范盒子內(nèi)容溢出的顯示方式，可取的屬性值有4個(gè)：visible、hidden、auto和scroll。

visible為默認(rèn)值，表示顯示超出內(nèi)容；

hidden表示隱藏超出內(nèi)容；

auto表示自動(dòng)，即內(nèi)容超出后會(huì)顯示滾動(dòng)條，不超出就不顯示滾動(dòng)條；

scroll表示內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，以便用戶查看其余內(nèi)容。盒子模型position屬性的應(yīng)用09任務(wù)描述利用前面學(xué)過的盒子模型相關(guān)知識(shí)，并結(jié)合元素的position屬性，分別體現(xiàn)出相對(duì)定位和絕對(duì)定位的不同設(shè)置方式及效果，效果如右圖所示。知識(shí)點(diǎn)撥position屬性01盒子模型background-image和background屬性的應(yīng)用10任務(wù)描述利用盒子模型background-image和background屬性，結(jié)合前面學(xué)過的盒子模型相關(guān)知識(shí)，對(duì)網(wǎng)頁和盒子模型中的內(nèi)容分別進(jìn)行背景顏色和背景圖像的設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥設(shè)置背景圖像01

background-image是設(shè)置背景圖像的屬性，一起配合使用的屬性有background-repeat、background-position，以及CSS3新增的background-size、background-attachment、background-origin、background-clip。

background-image：設(shè)置合適的背景圖像。

background-repeat：有方向地重復(fù)填充背景圖像，主要用法如下。background-repeat:repeat;：默認(rèn)值，背景圖像在垂直方向和水平方向重復(fù)。background-repeat:no-repeat;：背景圖像不重復(fù)。background-repeat:repeat-x;：背景圖像橫向重復(fù)。background-repeat:repeat-y;：背景圖像縱向重復(fù)。

background-position：定位背景圖像。定位背景圖像的方法有3種：百分?jǐn)?shù)（“50%50%”代表中心位置）、像素值（“10px20px”代表左上角向右偏移10px、向下偏移20px）和直接指定位置（center、top、bottom、left、right）。

background-size：設(shè)置背景圖像大小。它有1～2個(gè)屬性值，代表背景圖像的width（寬度）和height（高度），單位可以用px、%，如果只設(shè)一個(gè)值，則另一個(gè)值默認(rèn)為auto；屬性值還可以是cover和contain，分別代表將背景圖像覆蓋背景區(qū)域（背景圖像某些部分可能無法顯示在背景區(qū)域中）和背景圖像完全顯示在背景區(qū)域中（按照?qǐng)D像某一邊擴(kuò)展至最大尺寸）。

background-attachment：設(shè)置背景圖像是否滾動(dòng)。常用的屬性值有：scroll（默認(rèn)值，圖像隨頁面一起滾動(dòng)），fixed（圖像固定在屏幕上，不隨頁面滾動(dòng)）。

background-origin：設(shè)置背景圖像的顯示區(qū)域，主要用法如下。background-origin:padding-box;：背景圖像相對(duì)于內(nèi)邊距區(qū)域來定位。background-origin:border-box;：背景圖像相對(duì)于邊框區(qū)域來定位。background-origin:content-box;：背景圖像相對(duì)于內(nèi)容區(qū)域來定位。

background-clip：設(shè)置背景圖像的裁剪區(qū)域，主要用法如下。background-clip:border-box;：默認(rèn)值，從邊框區(qū)域向外裁剪背景圖像。background-clip:padding-box;：從內(nèi)邊距區(qū)域向外裁剪背景圖像。background-clip:content-box;：從內(nèi)容區(qū)域向外裁剪背景圖像。知識(shí)點(diǎn)撥設(shè)置背景顏色02在前面的案例中就使用過背景顏色屬性background,常用于設(shè)置元素背景顏色的屬性是background-color,兩者的區(qū)別如下。background是背景縮寫屬性，可以在一個(gè)聲明中代替所有的背景屬性。例如，可以將該任務(wù)中的背景圖像代碼組合為：

background：url(images/lunyu.jpg)no-repeat;background-color屬性只是用于設(shè)置一個(gè)元素的背景顏色。盒子模型opacity屬性的應(yīng)用11任務(wù)描述使用opacity屬性，分別對(duì)網(wǎng)頁中的4張圖像設(shè)置透明度，效果如右圖所示。知識(shí)點(diǎn)撥opacity屬性01

在CSS3中，opacity屬性用于設(shè)置圖像透明度。它能使任何元素呈現(xiàn)出透明效果，語法格式如下。opacity:opacityValue;在上面的語法格式中，opacityValue表示不透明度的值，它是一個(gè)介于0～1之間的浮點(diǎn)值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。在該任務(wù)中，4張圖像的透明度依次增加，opacityValue的值越小，表示透明度越高。知識(shí)點(diǎn)撥RGBA模式02RGBA是CSS3新增的顏色模式。它是RGB顏色模式的延伸，在紅、綠、藍(lán)3種顏色的基礎(chǔ)上添加了不透明度參數(shù)，語法格式如下。rgba(r,g,b,alpha);在上面的語法格式中，前3個(gè)參數(shù)分別代表紅、綠、藍(lán)的參數(shù)值，alpha參數(shù)是一個(gè)介于0～1之間的數(shù)字，0表示完全透明，1表示完全不透明，數(shù)值越小，透明度越高。例如，使用RGBA模式為p元素指定透明度為0.8、顏色為綠色的背景，代碼如下。p{background-color:rgba(0,255,0,0.8);}漸變屬性的應(yīng)用12任務(wù)描述使用網(wǎng)頁的漸變屬性，并結(jié)合前面學(xué)過的盒子模型相關(guān)知識(shí)，分別對(duì)網(wǎng)頁中的3個(gè)盒子模型設(shè)置漸變效果，如右圖所示。知識(shí)點(diǎn)撥線性漸變01漸變屬性是CSS3新增的屬性。線性漸變是指起始顏色沿著一條直線過渡到結(jié)束顏色，語法格式如下。background-image:linear-gradient(漸變角度,顏色值1,顏色值2,...,顏色值n);在該任務(wù)中，為box1定義了一個(gè)漸變角度為30度，顏色從#06F到#6FF的線性漸變效果。在box2中每個(gè)顏色值后面添加了一個(gè)百分?jǐn)?shù)，用于標(biāo)示顏色漸變的位置，可以看作，顏色#06F在50%的位置開始出現(xiàn)漸變至顏色#6FF位于80%的位置結(jié)束漸變。徑向漸變02徑向漸變是指從起點(diǎn)到終點(diǎn)顏色由內(nèi)到外進(jìn)行圓形漸變（從中間向外拉），語法格式如下。background-image:radial-gradient(漸變形狀

圓心位置,顏色值1,顏色值2,...,顏色值n);重復(fù)漸變屬性的應(yīng)用13任務(wù)描述使用網(wǎng)頁的重復(fù)漸變屬性，并結(jié)合前面學(xué)過的盒子模型相關(guān)知識(shí)，分別對(duì)網(wǎng)頁中的兩個(gè)盒子模型設(shè)置重復(fù)漸變效果，如右圖所示。知識(shí)點(diǎn)撥重復(fù)線性漸變屬性01重復(fù)線性漸變屬性的語法格式如下：background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2,...,顏色值n);在上面的語法格式中，“repeating-linear-gradient（參數(shù)值）”用于定義漸變方式為重復(fù)線性漸變，其余用法和線性漸變相同。在該任務(wù)中，設(shè)置box1為漸變角度為90度、3種顏色的重復(fù)線性漸變效果。同任務(wù)12一樣，百分?jǐn)?shù)代表漸變的位置。重復(fù)徑向漸變屬性02重復(fù)徑向漸變屬性的語法格式如下。

background-image:repeating-radial-gradient(漸變形狀

圓心位置,顏色值1,顏色值2,...,顏色值n);在上面的語法格式中，“repeating-radial-gradient（參數(shù)值）”用于定義漸變方式為重復(fù)徑向漸變，其余用法和徑向漸變相同。

使用盒子模型布局網(wǎng)頁14任務(wù)描述利用前面所學(xué)的盒子模型相關(guān)元素和屬性，布局一個(gè)網(wǎng)頁結(jié)構(gòu)，要求設(shè)置為上、中、下結(jié)構(gòu)，中間內(nèi)容部分為左、中、右三欄，左右為側(cè)邊欄，寬度較小，中間主內(nèi)容區(qū)寬度較大，并進(jìn)行適當(dāng)美化，能清晰、直觀地顯示出網(wǎng)頁各模塊的分布，效果如右圖所示。知識(shí)點(diǎn)撥網(wǎng)頁布局01網(wǎng)頁布局是一種定義網(wǎng)頁結(jié)構(gòu)的模式(或框架)。它具有為網(wǎng)站所有者和用戶構(gòu)造網(wǎng)站上存在的信息的作用。它為網(wǎng)頁內(nèi)的導(dǎo)航提供了清晰的路徑，并將網(wǎng)頁中最重要元素置于網(wǎng)頁的正面和中心。網(wǎng)頁布局有很多種方式，一般分為以下幾部分：頭部區(qū)域、導(dǎo)航區(qū)域、內(nèi)容區(qū)域、尾部區(qū)域。在該任務(wù)中，網(wǎng)頁的布局是浮動(dòng)布局，其常用于PC端網(wǎng)頁布局，用戶也可根據(jù)盒子模型，以及浮動(dòng)、定位等屬性自行規(guī)劃網(wǎng)頁布局，這里就不多做介紹了。知識(shí)小結(jié)謝謝項(xiàng)目6利用CSS3美化列表樣式01040203目錄設(shè)置列表項(xiàng)目符號(hào)

制作橫向?qū)Ш街谱髁Ⅲw導(dǎo)航制作下拉式菜單導(dǎo)航050607目錄制作下拉式面板導(dǎo)航制作旅游攻略欄目設(shè)計(jì)圖片列表版式項(xiàng)目描述前面我們已經(jīng)熟悉了HTML5與CSS3大部分重點(diǎn)知識(shí)和技能點(diǎn)，本項(xiàng)目將在網(wǎng)頁項(xiàng)目中經(jīng)常用到的列表和盒子元素等相關(guān)知識(shí)綜合在一起，結(jié)合CSS相關(guān)內(nèi)容，完成由盒子布局、列表制作導(dǎo)航的一個(gè)綜合項(xiàng)目——“青年教育宣傳”頁面。項(xiàng)目效果圖知識(shí)儲(chǔ)備知識(shí)目標(biāo)掌握列表樣式屬性的設(shè)置方法及相關(guān)意義。理解元素類型轉(zhuǎn)換的幾種方式及意義。010203能利用列表樣式屬性設(shè)置符合頁面需要的列表樣式效果。設(shè)置列表項(xiàng)目符號(hào)01任務(wù)描述使用無序列表將“珠海網(wǎng)紅景點(diǎn)”以列表的形式呈現(xiàn)出來，效果如右圖所示。知識(shí)點(diǎn)撥

list-style-type屬性01在項(xiàng)目2中已經(jīng)講過，列表包括無序列表、有序列表和定義列表。在無序列表和有序列表中常使用list-style-type屬性來定義列表的項(xiàng)目符號(hào)。list-style-type常用的屬性值及其描述如下表所示。在該任務(wù)中，將列表的項(xiàng)目符號(hào)設(shè)置為了實(shí)心方塊。屬性值描述none不使用列表項(xiàng)目符號(hào)disc默認(rèn)值，實(shí)心圓circle空心圓square實(shí)心方塊decimal數(shù)字lower-roman小寫羅馬數(shù)字（i、ii、iii、iv、v等）upper-roman大寫羅馬數(shù)字（I、II、III、IV、V等）lower-alpha小寫英文字母（a、b、c、d、e等）upper-alpha大寫英文字母（A、B、C、D、E等）lower-latin小寫拉丁字母（a、b、c、d、e等）upper-latin大寫拉丁字母（A、B、C、D、E等）知識(shí)點(diǎn)撥

list-style-image屬性02在CSS中，除了使用list-style-type屬性設(shè)置項(xiàng)目符號(hào)，還可以將項(xiàng)目符號(hào)設(shè)置為圖片符號(hào)的樣式，用法為list-style-image:url(url)|none,這里就不專門講述了，讀者可以根據(jù)項(xiàng)目需要自行嘗試。

list-style-position屬性03在設(shè)置列表項(xiàng)目符號(hào)時(shí)，有時(shí)需要控制項(xiàng)目符號(hào)的位置。在CSS中，list-style-position屬性用于控制列表項(xiàng)目符號(hào)的位置，常用的屬性值有inside和outside。

inside：項(xiàng)目符號(hào)位于列表文本以內(nèi)，且環(huán)繞文本對(duì)齊。

outside：默認(rèn)值。項(xiàng)目符號(hào)位于文本之外的左側(cè)，且文本不隨標(biāo)記對(duì)齊。

利用列表制作導(dǎo)航02任務(wù)描述利用無序列表，并結(jié)合盒子模型及元素浮動(dòng)的相關(guān)知識(shí)，制作一個(gè)橫向?qū)Ш?，要求呈現(xiàn)出鼠標(biāo)懸停（執(zhí)行動(dòng)作前后背景顏色發(fā)生變化）效果，如右圖所示。知識(shí)點(diǎn)撥元素類型的轉(zhuǎn)換01網(wǎng)頁是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子布局排列而成的，如果希望行內(nèi)元素具有塊元素的某些特性（如可以設(shè)置寬度、不獨(dú)占一行等），則可以使用display屬性對(duì)元素的類型進(jìn)行轉(zhuǎn)換。display常用的屬性值及其描述如下。none：設(shè)置元素隱藏，不占用頁面空間。inline：使元素變成行內(nèi)元素，擁有行內(nèi)元素的特性，即可以與其他行內(nèi)元素共享一行，不會(huì)獨(dú)占一行；不能更改元素的height、width值，元素大小由內(nèi)容撐開；可以使用padding、margin的left和right值產(chǎn)生邊距效果，但不能使用top和bottom。block：使元素變成塊元素，獨(dú)占一行，在不設(shè)置自己寬度的情況下，塊元素會(huì)默認(rèn)填滿父級(jí)元素的寬度；能夠改變?cè)氐膆eight、width值；可以設(shè)置padding、margin的各個(gè)屬性值，即top、left、bottom、right都能產(chǎn)生邊距效果。inline-block：設(shè)置元素為行內(nèi)塊元素，既有行內(nèi)元素的（一行可有多個(gè)）特性，又有塊元素的（可設(shè)置寬高、邊距）特性。在該任務(wù)中，將單個(gè)列表項(xiàng)的顯示方式設(shè)置為塊元素（block），以方便整體設(shè)置鏈接效果。知識(shí)點(diǎn)撥用列表制作導(dǎo)航的樣式設(shè)置02利用無序列表制作導(dǎo)航或布局網(wǎng)站的方式在當(dāng)前已被廣泛應(yīng)用，重點(diǎn)要掌握CSS樣式設(shè)置的方法，以下幾點(diǎn)讀者需重點(diǎn)掌握：一是設(shè)置整個(gè)列表（ul）的樣式，二是設(shè)置列表項(xiàng)（li）的樣式，三是設(shè)置列表項(xiàng)的超鏈接（a）的樣式，四是設(shè)置鼠標(biāo)懸停效果（a:hover）的樣式。掌握這4點(diǎn)就能很輕松地制作出一個(gè)精美的導(dǎo)航。利用列表制作立體導(dǎo)航03任務(wù)描述利用無序列表，并結(jié)合盒子模型及元素浮動(dòng)的相關(guān)知識(shí)，制作立體導(dǎo)航，效果如右圖所示。知識(shí)點(diǎn)撥該任務(wù)中的立體導(dǎo)航效果主要是通過設(shè)置左上或右下的邊框顏色來實(shí)現(xiàn)的，還是綜合利用了盒子模型的相關(guān)屬性達(dá)到自己想要的效果，具體的導(dǎo)航樣式設(shè)置在任務(wù)2中已經(jīng)詳述，這里不再贅述，讀者也可以自行探索更多關(guān)于導(dǎo)航美觀效果設(shè)計(jì)的方法。制作下拉式菜單導(dǎo)航04任務(wù)描述利用無序列表、超鏈接、盒子模型等知識(shí)，制作一個(gè)下拉式菜單導(dǎo)航，效果如右圖所示。知識(shí)點(diǎn)撥在該任務(wù)中，通過利用列表、盒子模型等知識(shí)，以及CSS巧妙地制作了一個(gè)下拉式菜單導(dǎo)航，這里面有兩個(gè)重點(diǎn)：一是一級(jí)導(dǎo)航，相關(guān)設(shè)置與任務(wù)2類似，這里不再詳述；二是二級(jí)菜單，它用到了顯示方式display（元素的類型轉(zhuǎn)換屬性），需要將菜單隱藏時(shí)使用display:none,需要顯示下拉菜單（垂直導(dǎo)航）時(shí)，則使用display:block。這兩條語句是很關(guān)鍵的，讀者需重點(diǎn)掌握。制作下拉式面板導(dǎo)航05任務(wù)描述利用無序列表、定義列表、超鏈接、盒子模型等相關(guān)知識(shí)，制作一個(gè)下拉式面板導(dǎo)航，效果如右圖所示。知識(shí)點(diǎn)撥本任務(wù)綜合利用了無序列表和定義列表來制作下拉式面板導(dǎo)航，一級(jí)導(dǎo)航利用無序列表，下拉式面板利用定義列表，定義列表中采用關(guān)鍵詞在上，詳細(xì)內(nèi)容在下的模式，并結(jié)合絕對(duì)定位，使二者的布局更有層次感，既簡潔，效果又好。樣式設(shè)置和前面的任務(wù)類似，這里不再詳述。制作旅游攻略欄目06任務(wù)描述利用無序列表、超鏈接、盒子模型等相關(guān)知識(shí)，制作一個(gè)旅游攻略欄目，要求鼠標(biāo)懸停在某個(gè)欄目上時(shí)字體顯示為紅色，訪問前的效果如右圖所示。知識(shí)點(diǎn)撥在網(wǎng)站的各個(gè)網(wǎng)頁中，經(jīng)常會(huì)劃分一些欄目，如新聞欄目、信息公告欄、排行榜等。使信息整齊有序排列是列表的優(yōu)勢(shì)，再加上CSS的修飾，列表可以實(shí)現(xiàn)精美的效果。在該任務(wù)中，綜合利用列表和盒子模型相關(guān)知識(shí)，制作出了一個(gè)廣東旅游攻略欄目，讀者也可以根據(jù)需要對(duì)其進(jìn)行設(shè)計(jì)加工。設(shè)計(jì)圖片列表版式07任務(wù)描述利用無序列表、超鏈接、盒子模型等相關(guān)知識(shí)，制作一個(gè)圖片列表版式的網(wǎng)頁，要求鼠標(biāo)懸停在文本上時(shí)顯示為紅色，訪問前的效果如右圖所示。知識(shí)點(diǎn)撥該任務(wù)巧妙地在列表項(xiàng)中引入了圖像，并利用行內(nèi)標(biāo)簽<span>將列表項(xiàng)文本內(nèi)容放在內(nèi)部，以及在列表這個(gè)盒子里面利用overflow屬性來清除列表盒子元素的浮動(dòng)等。這些都是在設(shè)計(jì)圖片列表版式時(shí)需要考慮的因素。在網(wǎng)頁內(nèi)容布局中，經(jīng)常會(huì)有類似該任務(wù)中圖片或者模塊要利用列表版式布局的情況，此時(shí)可以綜合利用CSS和無序列表制作所需的列表版式，讓網(wǎng)頁內(nèi)容更加整齊、美觀。讀者要細(xì)心研究每條語句的作用，可以自行模仿該任務(wù)，設(shè)計(jì)相似的版式。知識(shí)小結(jié)謝謝項(xiàng)目7利用CSS美化表格和表單樣式01040203目錄設(shè)置表格的背景顏色

設(shè)置表格的邊框樣式設(shè)置單元格的邊框樣式設(shè)置表頭的樣式050607目錄制作網(wǎng)頁通訊錄制作用戶登錄表單制作并美化用戶注冊(cè)表單08制作并美化用戶信息注冊(cè)表單項(xiàng)目描述網(wǎng)頁不僅可以利用盒子模型進(jìn)行布局，也可以利用表格進(jìn)行簡單布局，其非常適用于需要進(jìn)行數(shù)據(jù)展示或者排行榜之類的網(wǎng)頁。除表格外，網(wǎng)頁中的注冊(cè)、登錄等內(nèi)容可以用表單的形式呈現(xiàn)。本項(xiàng)目綜合利用前面所學(xué)的HTML和CSS相關(guān)知識(shí)，并結(jié)合表格和表單相關(guān)知識(shí)，制作一個(gè)旅游論壇中的“景點(diǎn)排行榜”網(wǎng)頁。項(xiàng)目效果圖知識(shí)儲(chǔ)備知識(shí)目標(biāo)掌握表格標(biāo)簽及常用屬性的用法和意義。理解表格相關(guān)屬性不同值的用法和意義。010203了解表單的構(gòu)成及其不同的控件類型。04掌握input標(biāo)簽不同屬性的用法和意義。設(shè)置表格的背景顏色01任務(wù)描述把表格常用的標(biāo)簽及其描述用表格的形式在網(wǎng)頁中體現(xiàn)出來，要求能看出常用表格標(biāo)簽的作用，并對(duì)表格設(shè)置合適的背景顏色，效果如右圖所示。知識(shí)點(diǎn)撥在HTML中，使用<table>標(biāo)簽來定義表格。HTML中的表格和Excel中的表格是類似的，都包括行、列、單元格、表頭等元素，通過該任務(wù)也可以基本熟悉常用表格標(biāo)簽的基本用法。

設(shè)置表格邊框樣式02任務(wù)描述參照任務(wù)1，對(duì)表格的外邊框及單元格的邊框進(jìn)行邊框樣式設(shè)置，效果如右圖所示。知識(shí)點(diǎn)撥HTML5表格邊框設(shè)置是網(wǎng)頁設(shè)計(jì)中常用的操作，表格的外觀和邊框是我們需要考慮的一個(gè)問題，邊框?qū)Ρ砀竦恼w外觀和美觀性有著很大的影響。在HTML5中，可以使用CSS樣式來控制表格的邊框。使用CSS中的border屬性可以設(shè)置表格整體的邊框。本任務(wù)也是針對(duì)整張表格來設(shè)置外邊框的。設(shè)置單元格的邊框樣式03任務(wù)描述在任務(wù)2設(shè)置的表格中，單元格出現(xiàn)了雙重邊框，這看上去不太美觀，本任務(wù)先使用表格邊框重疊屬性（border-collapse）將邊框合并，再使用border屬性設(shè)置單元格的邊框樣式，效果如右圖所示。知識(shí)點(diǎn)撥

border-collapse屬性01border-collapse屬性用于設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框。border-collapse屬性值及其描述如下表所示。

設(shè)置表格單元格的邊框樣式02使用CSS中的border屬性可以設(shè)置單元格的邊框樣式。在該任務(wù)中，先使用border-collapse屬性將表格邊框合并為單一的邊框，再使用border屬性設(shè)置單元格的邊框樣式。屬性值描述collapse如果可能，表格邊框會(huì)被合并為一個(gè)單一的邊框。此時(shí)會(huì)忽略border-spacing和empty-cells屬性separate默認(rèn)值。邊框會(huì)被分開。此時(shí)不會(huì)忽略border-spacing和empty-cells屬性inherit規(guī)定從父元素繼承border-collapse屬性的值設(shè)置表格表頭的樣式04任務(wù)描述利用前面所學(xué)的表格相關(guān)知識(shí)，制作一張課程表，要求分別單獨(dú)設(shè)置表格行標(biāo)題和列標(biāo)題的樣式，效果如右圖所示。知識(shí)點(diǎn)撥<th>標(biāo)簽的scope屬性提供了一種在表格中關(guān)聯(lián)表頭單元格與數(shù)據(jù)單元格的方式，用于指明一個(gè)單元格是一列、一行、一個(gè)列組還是一個(gè)行組的表頭。其對(duì)普通Web瀏覽器中的網(wǎng)頁可視效果沒有影響，語法格式如下。<thscope="value">scope屬性值及其描述如下表所示。值描述col指明單元格是列的表頭row指明單元格是行的表頭colgroup指明單元格是列組的表頭rowgroup指明單元格是行組的表頭定義變形原點(diǎn)05任務(wù)描述利用前面所學(xué)的表格及CSS相關(guān)知識(shí)，制作一個(gè)班干部通訊錄，效果如右圖所示。知識(shí)點(diǎn)撥

給表格設(shè)置背景顏色01在HTML中給表格設(shè)置背景顏色，一般使用background-color或background屬性，其可以直接給表格單元格或整張表格設(shè)置背景顏色。該任務(wù)使用background屬性分別對(duì)表頭單元格、數(shù)據(jù)單元格及單元格懸停設(shè)置了背景顏色，使整張表格的外觀更加美觀。

cellpadding和cellspacing屬性02cellpadding屬性用于指定單元格內(nèi)容與單元格邊界之間的距離（內(nèi)邊距）。cellspacing屬性用于指定單元格與單元格之間的距離。制作用戶登錄表單06任務(wù)描述利用表單相關(guān)元素及屬性，制作一個(gè)用戶登錄表單，效果如右圖所示。知識(shí)點(diǎn)撥

表單域form01在網(wǎng)頁中，一個(gè)完整的表單通常由表單域、表單元素（控件）和提示信息3部分構(gòu)成。form就是整個(gè)表單的表單域，它相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息。

input元素02input元素用來收集用戶的輸入數(shù)據(jù)。它是最常見的一種表單元素，常用來定義表單中的單行文本框、單選按鈕、復(fù)選框等。input元素具有多種輸入類型及相關(guān)屬性，具體描述如下表所示。知識(shí)點(diǎn)撥屬性屬性值（或單位）描述typetext單行文本框password密碼框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailE-mail的輸入域urlURL的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)值的輸入域Datepickers

(date,

month,

week,

time,

datetime,

datetime-local)日期和時(shí)間的輸入類型search搜索域color顏色輸入類型tel電話號(hào)碼輸入類型valuevalue規(guī)定input元素的值heightpx、%定義input字段的高度（適用于type="image"）listdatalist-id引用包含輸入字段的預(yù)定義選項(xiàng)的datalistmaxnumberdate規(guī)定輸入字段的最大值。與“min”屬性配合使用，創(chuàng)建合法值的范圍屬性屬性值（或單位）描述typetext單行文本框password密碼框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailE-mail的輸入域urlURL的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)值的輸入域Datepickers

(date,

month,

week,

time,

datetime,

datetime-local)日期和時(shí)間的輸入類型search搜索域color顏色輸入類型tel電話號(hào)碼輸入類型valuevalue規(guī)定input元素的值heightpx、%定義input字段的高度（適用于type="image"）listdatalist-id引用包含輸入字段的預(yù)定義選項(xiàng)的datalistmaxnumberdate規(guī)定輸入字段的最大值。與“min”屬性配合使用，創(chuàng)建合法值的范圍知識(shí)點(diǎn)撥屬性屬性值（或單位）描述maxlengthnumber規(guī)定輸入字段中字符的最大長度minnumber、date規(guī)定輸入字段的最小值。與“max”屬性配合使用，創(chuàng)建合法值的范圍minlengthnumber規(guī)定輸入字段中所需的最小字符數(shù)multiplemultiple如果使用該屬性，則允許使用一個(gè)以上的值，比如在email中輸入多個(gè)郵箱，中間用逗號(hào)隔開namefield_name定義input元素的名稱pattern字符串規(guī)定輸入字段值的模式或格式。例如，pattern="[0-9]"表示輸入字段值必須是0～9的數(shù)字placeholdertext指定幫助用戶填寫輸入字段的提示readonlyreadonly指定輸入字段為只讀的。requiredrequired指示輸入字段值是必需的sizenumber_of_char定義輸入字段的寬度srcURL定義以提交按鈕形式顯示的圖像的URLstepnumber規(guī)定輸入字段值的合法數(shù)字間隔widthpx、%定義input字段的寬度（適用于type="image"）知識(shí)點(diǎn)撥

表單屬性03在HTML5中，表單擁有多個(gè)屬性，通過設(shè)置表單屬性可以實(shí)現(xiàn)自動(dòng)完成、表單驗(yàn)證等不同的表單功能。form標(biāo)簽常用的屬性、屬性值及其描述如下表所示。屬性屬性值描述actionURL規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)methodget、post規(guī)定用于發(fā)送form-data的HTTP方法autocompleteon、off規(guī)定是否啟用表單的自動(dòng)完成功能nameform_name定義表單的名稱novalidatenovalidate如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證在該任務(wù)中，form表單的action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的URL，即/index.asp（目前該網(wǎng)頁為靜態(tài)網(wǎng)頁，該地址暫時(shí)打不開）；form表單的method屬性值為“post”，此時(shí)瀏覽器首先與action屬性中指定的表單處理服務(wù)器建立連接，然后按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器，它的保密性好，并且無數(shù)據(jù)量的限制，可以提交大量數(shù)據(jù)。method屬性一般默認(rèn)取值為“get”，此時(shí)瀏覽器首先與表單處理服務(wù)器建立連接，然后直接在一個(gè)傳輸步驟中發(fā)送所有的表單數(shù)據(jù)，采用這種方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差。知識(shí)點(diǎn)撥

表單屬性03form表單的autocomplete屬性取值為“on”，說明表單的自動(dòng)完成功能已開啟，當(dāng)用戶首次輸入用戶名時(shí)會(huì)被記錄下來，當(dāng)再次輸入時(shí)，表單會(huì)將輸入的歷史記錄顯示在一個(gè)下拉列表中，以實(shí)現(xiàn)自動(dòng)完成輸入，效果如下圖所示。美化用戶登錄表單07任務(wù)描述利用前面學(xué)過的CSS及表單基礎(chǔ)知識(shí)，制作一個(gè)用戶登錄表單并對(duì)其進(jìn)行美化，效果如右圖所示。知識(shí)點(diǎn)撥

placeholder屬性01placeholder屬性可描述輸入字段預(yù)期值的簡短提示信息（比如一個(gè)樣本值或者預(yù)期格式的短描述）。該提示會(huì)在用戶輸入值之前顯示在輸入字段中。注意：placeholder屬性適用于下面的input類型：text、search、url、tel、email和password。

<fieldset>標(biāo)簽02<fieldset>標(biāo)簽可以將表單內(nèi)的相關(guān)元素分組。其會(huì)在相關(guān)表單元素周圍繪制邊框。知識(shí)點(diǎn)撥

<label>標(biāo)簽03<label>標(biāo)簽用于關(guān)聯(lián)表單控件和標(biāo)簽文本，提高可訪問性，并允許自定義樣式和布局。<label>標(biāo)簽應(yīng)與for屬性結(jié)合使用，為每個(gè)表單元素提供唯一的id和相應(yīng)的for屬性。制作用戶信息注冊(cè)表單08任務(wù)描述利用表單中的input、textarea及select等元素，并綜合利用前面學(xué)過的CSS相關(guān)知識(shí)，制作一個(gè)心康用戶信息注冊(cè)表單并對(duì)其進(jìn)行簡要美化和布局，效果如右圖所示。知識(shí)點(diǎn)撥

多行文本框01多行文本框允許用戶輸入多行內(nèi)容，格式為<textarea></textarea>。通過HTML的“col”和“rows”屬性可設(shè)置多行文本框的尺寸。多行文本框的常用屬性及其描述如下表所示。屬性描述rows設(shè)置或返回多行文本框的高度（行數(shù)）cols設(shè)置或返回多行文本框的寬度（列數(shù)）disabled設(shè)置多行文本框是否被禁用maxLength設(shè)置多行文本框可以輸入的最大字符數(shù)name設(shè)置或返回多行文本框的名稱placeholder設(shè)置或返回placeholder屬性值readonly設(shè)置多行文本框是否是只讀的require設(shè)置多行文本框是否必須輸入內(nèi)容value設(shè)置或返回在多行文本框中輸入的文本知識(shí)點(diǎn)撥

單選按鈕與復(fù)選框02input元素中的radio和checkbox類型分別表示單選按鈕和復(fù)選框。它們常用的屬性及其描述如下表所示。屬性描述name單選按鈕（radio）的名稱value復(fù)選框（checkbox）進(jìn)行數(shù)據(jù)傳遞時(shí)的選項(xiàng)值checked默認(rèn)選擇該選項(xiàng)知識(shí)點(diǎn)撥

下拉列表03在瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉列表，這種效果可用select元素實(shí)現(xiàn)，select元素中的option元素定義了下拉列表中的可選項(xiàng)。它的基本語法格式如下。<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select>在HTML5中，可以為<select>和<option>標(biāo)簽定義屬性，以改變下拉列表的外觀效果，具體屬性如下表所示。標(biāo)簽名屬性描述<select>multiple當(dāng)該屬性值為true時(shí)，可選擇多個(gè)選項(xiàng)size規(guī)定下拉列表中可顯示的選項(xiàng)數(shù)目<option>selected當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)value選項(xiàng)被選中后進(jìn)行數(shù)據(jù)傳遞時(shí)的值知識(shí)點(diǎn)撥

知識(shí)延伸：datalist元素04HTML5表單中的datalist元素可以在用戶輸入文本時(shí)彈出預(yù)留的可選數(shù)據(jù)。datalist元素需要配合input元素的list屬性使用，通過讓list屬性值等于datalist元素的id屬性值來綁定下拉列表與文本框。例如：<formaction="#"method="post">請(qǐng)輸入用戶名：<inputtype="text"list="namelist"/><datalistid="namelist"><option>admin</option><option>lucy</option><option>lily</option></datalist><inputtype="submit"value="提交"/> </form>代碼運(yùn)行結(jié)果如下圖所示。知識(shí)小結(jié)謝謝項(xiàng)目8利用CSS3制作網(wǎng)頁特效01040203目錄定義平移效果

定義縮放效果定義傾斜效果定義2D旋轉(zhuǎn)效果050607目錄定義變形原點(diǎn)定義3D旋轉(zhuǎn)效果定義過渡效果08設(shè)置過渡效果持續(xù)時(shí)間0910目錄制作過渡效果速度曲線制作CSS3動(dòng)畫效果項(xiàng)目描述前面的項(xiàng)目制作的網(wǎng)頁基本是靜態(tài)效果，在傳統(tǒng)網(wǎng)頁設(shè)計(jì)中，一般使用JavaScript腳本或者Flash來制作網(wǎng)頁動(dòng)態(tài)特效，而CSS3提供了對(duì)動(dòng)畫的強(qiáng)大支持，可以實(shí)現(xiàn)變形、過渡、動(dòng)畫等效果，大大降低了制作網(wǎng)頁特效的難度。本項(xiàng)目利用CSS3的這些功能制作一個(gè)“旋轉(zhuǎn)的3D相冊(cè)”頁面。項(xiàng)目效果圖知識(shí)儲(chǔ)備知識(shí)目標(biāo)理解并掌握transform（變形）屬性的用法和意義。掌握transition（過渡）屬性的用法和意義。010203掌握動(dòng)畫屬性及屬性對(duì)應(yīng)的不同屬性值的用法和意義。定義平移效果01任務(wù)描述利用CSS3中transform屬性的translate()方法定義盒子模型移動(dòng)后的坐標(biāo)，實(shí)現(xiàn)元素平移效果。平移后的效果如右圖所示。知識(shí)點(diǎn)撥

transform01transform是CSS3新增的屬性，可以實(shí)現(xiàn)元素的變形效果，如平移、傾斜、縮放及翻轉(zhuǎn)等。

translate()方法02translate()方法能夠重新定義元素的坐標(biāo)，實(shí)現(xiàn)平移效果，該方法包含兩個(gè)參數(shù)，分別用于定義X軸和Y軸坐標(biāo)，基本語法格式如下。transform:translate(x-value,y-value);在上面的語法格式中，x-value指元素在水平方向上移動(dòng)的距離，y-value指元素在垂直方向上移動(dòng)的距離，第二個(gè)參數(shù)可省略，省略后取默認(rèn)值0，當(dāng)值為負(fù)數(shù)時(shí)，表示元素向反方向移動(dòng)。

定義縮放效果02任務(wù)描述利用CSS3中transform屬性的scale()方法實(shí)現(xiàn)盒子模型放大1.5倍的效果。原效果和放大1.5倍后的效果如右圖所示。

原效果放大1.5倍后的效果知識(shí)點(diǎn)撥在CSS3中，可以利用transform屬性的scale()方法實(shí)現(xiàn)元素的縮放效果，縮放是指“縮小”和“放大”的意思。scale()方法與translate()方法類似，用法如下。（1）scaleX(x)：元素僅在水平方向上縮放（X軸縮放）。（2）scaleY(y)：元素僅在垂直方向上縮放（Y軸縮放）。（3）scale(x,y)：元素在水平方向和垂直方向上同時(shí)縮放（X軸和Y軸同時(shí)縮放）。其中，參數(shù)x表示元素在X軸方向上的縮放倍數(shù)，參數(shù)y表示元素在Y軸方向上的縮放倍數(shù)。定義傾斜效果03任務(wù)描述利用CSS3中transform屬性的skew()方法實(shí)現(xiàn)盒子模型傾斜的效果，如右圖所示。任務(wù)3效果知識(shí)點(diǎn)撥

skew()方法01利用transform屬性的skew()方法可以實(shí)現(xiàn)元素的傾斜效果，其用法和translate()、scale()方法類似，基本語法格式如下。transform:skew(x,y);在上面的語法格式中，x和y分別代表相對(duì)于X軸和Y軸傾斜的角度，如果省略了第二個(gè)參數(shù)，則其取默認(rèn)值0。定義2D旋轉(zhuǎn)效果04任務(wù)描述利用CSS3中transform屬性的rotate()方法實(shí)現(xiàn)素材圖片在2D空間中旋轉(zhuǎn)的效果。旋轉(zhuǎn)后的效果如右圖所示。任務(wù)4效果知識(shí)點(diǎn)撥利用transform屬性的rotate()方法能夠?qū)崿F(xiàn)元素的旋轉(zhuǎn)效果，主要在2D空間中進(jìn)行操作，該方法中的參數(shù)允許出現(xiàn)負(fù)值，這時(shí)元素將進(jìn)行逆時(shí)針旋轉(zhuǎn)，基本語法格式如下。transform:rotate(角度值);

在上面的語法格式中，如果角度值為正值，則元素按照順時(shí)針旋轉(zhuǎn)，否則，按照逆時(shí)針旋轉(zhuǎn)。定義變形原點(diǎn)05任務(wù)描述利用transform-origin屬性更改元素變形原點(diǎn)實(shí)現(xiàn)元素變形效果。變形后的效果如右圖所示。任務(wù)5效果圖知識(shí)點(diǎn)撥

transform-origin屬性01通過transform屬性可以實(shí)現(xiàn)元素的平移、縮放、傾斜及旋轉(zhuǎn)效果，這些變形操作是以元素的原點(diǎn)作為參照的。在默認(rèn)情況下，元素的原點(diǎn)在X軸和Y軸的50%位置，如果需要更改這個(gè)原點(diǎn)，就可以使用transform-origin屬性，其基本語法格式如下。transform-origin:x-axisy-axisz-axis;在上面的語法格式中，每個(gè)屬性值都代表一個(gè)偏移量，具體描述如下表所示。定義3D旋轉(zhuǎn)效果06任務(wù)描述利用rotateX()、rotateY()、rotateZ()、translateZ()及perspective屬性，制作一個(gè)可以實(shí)現(xiàn)3D旋轉(zhuǎn)的“禁毒宣傳標(biāo)語”。旋轉(zhuǎn)前后的效果分別如右圖所示。旋轉(zhuǎn)前的效果

旋轉(zhuǎn)后的效果知識(shí)點(diǎn)撥

rotateX()01rotateX()函數(shù)用于在3D空間中使元素沿X軸旋轉(zhuǎn)?。它接受一個(gè)角度值作為參數(shù)，用于指定旋轉(zhuǎn)的角度。當(dāng)參數(shù)為正值時(shí)，元素順時(shí)針旋轉(zhuǎn)；當(dāng)參數(shù)為負(fù)值時(shí)，元素逆時(shí)針旋轉(zhuǎn)。基本語法：transform:rotateX(<angle>)，其中<angle>表示旋轉(zhuǎn)的角度，可以是正值或負(fù)值。正值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。

rotateY()、rotateZ()02rotateY()函數(shù)用于在3D空間中使元素沿Y軸旋轉(zhuǎn)?。用法同rotateX()函數(shù)類似。?rotateZ()函數(shù)用于在3D空間中使元素沿Z軸旋轉(zhuǎn)?。用法同rotateX()、rotateY()函數(shù)類似。?知識(shí)點(diǎn)撥

?translateZ()03?translateZ()?用于在3D空間中沿著Z軸重新定位元素，即從觀察者的角度來看，元素會(huì)更近或更遠(yuǎn)。這個(gè)變換由一個(gè)長度值定義，指定元素向內(nèi)或向外移動(dòng)的距離。正值將元素移向觀察者，負(fù)值則遠(yuǎn)離觀察者。基本語法：transform:translateZ(z);其中z代表在Z軸上的移動(dòng)距離。

perspective屬性04?CSS3中的perspective屬性用于設(shè)置從何處觀察一個(gè)元素的角度，可以理解為視距，主要用于呈現(xiàn)良好的3D透視效果。其基本語法格式如下。perspective:

number|none;在上面的語法格式中，number指元素距視圖的距離，單位為px，none表示不設(shè)置透視效果，透視效果由參數(shù)值number決定，參數(shù)值越小，透視效果越突出。知識(shí)點(diǎn)撥

知識(shí)補(bǔ)充：rotate3d()方法05rotate3d()方法用于在3D空間中圍繞一個(gè)固定軸線旋轉(zhuǎn)元素，而不使其變形，基本語法格式如下。rotate3d(x,y,z,angle);上述語法格式中各參數(shù)的描述如下表所示。

定義過渡效果07任務(wù)描述利用transition-property屬性，定義盒子模型由紅色到綠色過渡的效果。過渡前后的效果分別如右圖所示。過渡前的效果

過渡后的效果知識(shí)點(diǎn)撥

transition-property屬性01transition-property屬性用于設(shè)置過渡效果，基本語法格式如下。transition-property:none|all|property;上述語法格式中各屬性值的具體描述如下表所示。設(shè)置過渡效果持續(xù)時(shí)間08任務(wù)描述在任務(wù)7的基礎(chǔ)上，利用transition-duration屬性，為過渡效果加上過渡持續(xù)的時(shí)間，這樣鼠標(biāo)懸停在元素上實(shí)現(xiàn)由紅色到綠色的過渡時(shí)會(huì)有一個(gè)過渡過程，效果如右圖所示。鼠標(biāo)懸停時(shí)顏色的過渡過程（1）（3）（2）知識(shí)點(diǎn)撥

transition-duration屬性01transition-duration屬性用于定義過渡效果持續(xù)的時(shí)間，常用的單位是秒（s）或毫秒（ms），默認(rèn)值為0。其基本語法格式如下。transition-duration:time;

知識(shí)補(bǔ)充：transition-delay屬性02transition-delay屬性用于定義過渡動(dòng)作從何時(shí)開始觸發(fā)，屬性值也可以為負(fù)值。當(dāng)為負(fù)值時(shí)，過渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開始觸發(fā)，之前的動(dòng)作將被截?cái)?；?dāng)為正值時(shí)，過渡動(dòng)作會(huì)延遲觸發(fā)。其基本語法格式如下。transition-delay:time;讀者可以在該任務(wù)的的案例中嘗試使用，這里就不再做案例補(bǔ)充了。定義過渡效果速度曲線09任務(wù)描述結(jié)合前面學(xué)過的過渡效果相關(guān)屬性，并利用transition-timing-function屬性，定義鼠標(biāo)懸停在元素上時(shí)實(shí)現(xiàn)過渡動(dòng)畫效果，過渡動(dòng)畫過程如右圖所示。鼠標(biāo)懸停時(shí)元素的過渡動(dòng)畫過程（1）（3）（2）知識(shí)點(diǎn)撥

transition-timing-function屬性01transition-timing-function屬性用于定義過渡效果的速度曲線，基本語法格式如下。transition-timing-function:liner|ease|ease-in|ease-out|ease-in-outease-incubic-bezier(n,n,n,n);從上面的語法格式中可以看出，transition-timing-function屬性的取值有很多個(gè)，其中，默認(rèn)值為“ease”，常見屬性值及其描述如下表所示。制作CSS3動(dòng)畫效果10