HTML5 CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目3 圖文混排頁面制作；項(xiàng)目4 列表頁面制作

《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目3圖文混排頁面制作任務(wù)3.3制作“中華文化網(wǎng)”導(dǎo)航菜單03目錄Contents任務(wù)3.2設(shè)置“中華文化網(wǎng)”頁面背景02任務(wù)3.1制作“中華文化網(wǎng)”琴棋書畫模塊01教學(xué)目標(biāo)熟悉盒子模型的概念及相關(guān)屬性

掌握背景屬性的設(shè)置方法

理解漸變背景屬性

掌握元素類型特點(diǎn)及轉(zhuǎn)換方法1.知識(shí)目標(biāo)能夠熟練應(yīng)用盒子模型的相關(guān)屬性

能夠使用背景屬性設(shè)置元素背景能夠區(qū)分元素類型并進(jìn)行元素類型轉(zhuǎn)換2.技能目標(biāo)?傳承中華優(yōu)秀傳統(tǒng)文化，培養(yǎng)審美意識(shí)

培養(yǎng)不斷探索、敢于實(shí)踐的精神培養(yǎng)代碼規(guī)范意識(shí)，養(yǎng)成良好的代碼編寫習(xí)慣3.素養(yǎng)目標(biāo)1任務(wù)3.1制作“中華文化網(wǎng)”琴棋書畫模塊效果展示知識(shí)儲(chǔ)備盒子模型相關(guān)屬性2盒子模型的概念1目錄Contents知識(shí)儲(chǔ)備1.盒子模型的概念生活中的盒子知識(shí)儲(chǔ)備1.盒子模型的概念展覽館墻上整齊的排列著四幅畫，那么畫面本身就是內(nèi)容，

每幅畫都有一個(gè)邊框，英文稱為“border”，畫與畫框之間都會(huì)有一定的留白，稱為內(nèi)邊距，英文稱為“padding”；每幅畫之間通常也會(huì)一定的距離，這個(gè)距離稱為“外邊距”，英文稱為“margin”。知識(shí)儲(chǔ)備1.盒子模型的概念什么是盒子模型？所謂盒子模型，網(wǎng)頁其實(shí)也是由一個(gè)個(gè)矩形區(qū)域通過排版組合而成，這些矩形區(qū)域可以看成是承裝HTML內(nèi)容的容器，稱為盒子。網(wǎng)頁盒子可以通過調(diào)整每個(gè)盒子的寬度、高度、距離等參數(shù)，來調(diào)節(jié)盒子的大小和位置。知識(shí)儲(chǔ)備1.盒子模型的概念內(nèi)容（content）內(nèi)容是盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容邊框（border）邊框（border）是盒子的邊界外邊距（margin）盒子的最外圍，是添加在邊框外周圍的空間每個(gè)盒子模型都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。內(nèi)邊距（padding）內(nèi)容區(qū)和邊框之間的距離知識(shí)儲(chǔ)備1.盒子模型的概念頁面中的任何元素都可以看成盒子，常見的有div、h1到h6標(biāo)題、列表ul、li，甚至行內(nèi)元素a、span、img等等。正是因?yàn)檫@些盒子的排版，因此網(wǎng)頁的內(nèi)容雖然零散，但在版式排列上依然清晰有條理。知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性為了分割頁面中不同的盒子，常常需要給元素設(shè)置邊框效果。在CSS中，我們可以設(shè)置單側(cè)邊框（上邊框、下邊框、左邊框、右邊框）的樣式屬性、寬度屬性、顏色屬性，也可以綜合設(shè)置邊框的這些屬性。邊框設(shè)置border020304border-top：上邊框;border-right：右邊框;border-bottom：下邊框;01border-left：左邊框知識(shí)儲(chǔ)備內(nèi)邊距屬性2外邊距屬性3邊框?qū)傩?box-sizing屬性5陰影屬性42.盒子模型相關(guān)屬性透明6知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性邊框?qū)傩赃吙驑邮絙order-style:上邊[右邊下邊左邊];邊框?qū)挾萣order-width:上邊[右邊下邊左邊];綜合設(shè)置邊框邊框顏色border-color:上邊[右邊下邊左邊];border:四邊寬度四邊樣式四邊顏色;none（無）、dotted（點(diǎn)線）、dashed（虛線）、solid（實(shí)線）等以像素為單位用于定義頁面中邊框的風(fēng)格red、#ff0000、rgb(0,255,0注意：邊框三個(gè)屬性，必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則寬度、顏色都無效。1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性border:border-width

border-style

border-color;border-top:上邊框?qū)挾葮邮筋伾?border-right:右邊框?qū)挾葮邮筋伾?border-bottom:下邊框?qū)挾葮邮筋伾?border-left:左邊框?qū)挾葮邮筋伾?border:四邊寬度樣式顏色;例如：border:1pxdashedred;/*設(shè)置邊框樣式，各個(gè)值不分順序*/border綜合設(shè)置邊框，語法格式如下：注意：

border-width、border-style

border-color順序任意，不分先后，可以只需設(shè)置指定的屬性，省略的部分將取默認(rèn)值（border-style不能省略）1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性border-top:上邊框?qū)挾葮邮筋伾?border-right:右邊框?qū)挾葮邮筋伾?border-bottom:下邊框?qū)挾葮邮筋伾?border-left:左邊框?qū)挾葮邮筋伾?border:四邊寬度樣式顏色;像border、border-top等，能夠用一個(gè)屬性定義元素的多種樣式，這種屬性在CSS中稱之為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實(shí)際工作中常使用復(fù)合屬性，它可以簡(jiǎn)化代碼，提高頁面的運(yùn)行速度，但是如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性。注意：使用border屬性一次性設(shè)置邊框的樣式，僅適用于4個(gè)方向的邊框效果都一樣的情況，若每條邊框不相同，可通過單側(cè)邊框綜合屬性分別進(jìn)行設(shè)置。例如，單獨(dú)定義上邊框樣式：border-top:1pxdashedred;/*設(shè)置上邊框樣式*/1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性圓角邊框?qū)傩允荂SS3新增屬性，其基本語法格式如下。圓角邊框border-radius:參數(shù)1/參數(shù)2border-radius屬性同樣遵循值復(fù)制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設(shè)置1-4個(gè)參數(shù)值，用來表示四角圓角半徑的大小。僅設(shè)置1個(gè)參數(shù)，表示水平半徑與垂直半徑相等?！皡?shù)1”表示圓角的水平半徑“參數(shù)2”表示圓角的垂直半徑，參數(shù)1和參數(shù)2以“/”分隔，取值可以為像素或百分比。知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性如果設(shè)置1個(gè)值，表示4個(gè)圓角都使用這個(gè)值。如果設(shè)置2個(gè)值，表示左上角和右下角使用第1個(gè)值，右上角和左下角使用第2個(gè)值。如果設(shè)置3個(gè)值，表示左上角使用第1個(gè)值，右上角和左下角使用第2個(gè)值，右下角使用第3個(gè)值。如果設(shè)置4個(gè)值，則依次對(duì)應(yīng)左上角、右上角、右下角、左下角（順時(shí)針順序）。div{border-radius:030px;}div{border-radius:5px}div{border-radius:020px50px;}div{border-radius:5px10px20px30px;}border-radius還可以用斜杠設(shè)置第2組值。第1組值表示水平半徑，第2組值表示垂直半徑。div{border-radius:20px/50px;}border-radius:水平半徑參數(shù)/垂直半徑參數(shù);知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性除了同時(shí)設(shè)置四個(gè)圓角以外，還可以單獨(dú)對(duì)每個(gè)角進(jìn)行設(shè)置。對(duì)應(yīng)四個(gè)角，CSS3提供四個(gè)單獨(dú)的屬性：border-top-left-radius：左上角border-top-right-radius：右上角border-bottom-right-radius；右下角border-bottom-left-radius：左下角這四個(gè)屬性都可以同時(shí)設(shè)置1到2個(gè)值。如果設(shè)置1個(gè)值，表示水平半徑與垂直半徑相等。如果設(shè)置2個(gè)值，第一個(gè)值表示水平半徑，第二個(gè)值表示垂直半徑。例如：div{border-top-left-radius:10px50px;}表示設(shè)置div對(duì)象盒子左上角水平半徑10px、垂直半徑50px圓角。1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性如果水平半徑/垂直半徑分別大于等于盒子寬度/高度的一半，寬度高度一致時(shí)則顯示為圓形，不一致時(shí)顯示為橢圓形。border-radius:50%；1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性中國新聞網(wǎng)——習(xí)近平與青年書｜“在逐夢(mèng)太空的征途上發(fā)出青春的奪目光彩”：1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性020304padding-top：上內(nèi)邊距;padding-right：右內(nèi)邊距;padding-bottom：下內(nèi)邊距;01padding-left：左內(nèi)邊距內(nèi)邊距例如：分別設(shè)定上、右、下、左內(nèi)邊距：padding-top:5px; /*上內(nèi)邊距*/padding-right:10px; /*右內(nèi)邊距*/padding-bottom:5px; /*下內(nèi)邊距*/padding-left:10px; /*左內(nèi)邊距*/內(nèi)邊距padding注意：使用復(fù)合屬性padding定義內(nèi)邊距時(shí)，必須按照順時(shí)針順序采用值復(fù)制，一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下，四個(gè)值為上、右、下、左。用padding復(fù)合屬性一次設(shè)定：padding:5px10px;

順時(shí)針2.內(nèi)邊距屬性知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性020304margin-top：上外邊距margin-right：右外邊距margin-bottom：下外邊距外邊距margin01margin-left：左外邊距外邊距（margin）具體的設(shè)置方法同內(nèi)邊距（padding）3.外邊距屬性知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性010203外邊距應(yīng)用清除元素默認(rèn)內(nèi)、外邊距*{padding:0; /*清除內(nèi)邊距*/margin:0; /*清除外邊距*/}盒子水平居中margin:0auto;/*利用margin實(shí)現(xiàn)塊元素水平居中*/margin:5pxauto;/*實(shí)現(xiàn)元素水平居中，并且上下拉開5像素邊距*/margin控制元素之間的距離緊鄰的兩個(gè)元素之間的距離為第1個(gè)元素的margin-right加上第2個(gè)元素的margin-left。但在垂直方向上緊鄰的兩個(gè)元素之間的距離是兩者中的較大者。3.外邊距屬性知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性CSS3中的box-shadow屬性可以輕松實(shí)現(xiàn)陰影的添加，其基本語法格式如下：4.box-shadow屬性box-shadow:offset-xoffset-yblurspreadcolorinset;offset-x：水平陰影的位置，必選，可以為負(fù)值。offset-y：垂直陰影的位置，必選，可以為負(fù)值。blur：陰影模糊半徑，可選，只能取正值。0即無模糊效果，值越大陰影邊緣越模糊。spread：陰影擴(kuò)展半徑，可選，正值陰影擴(kuò)大，負(fù)值陰影縮小。color：陰影的顏色，可選。如果不設(shè)置，瀏覽器會(huì)取默認(rèn)顏色，通常是黑色，但各瀏覽器默認(rèn)顏色有差異，建議不要省略。Inset：關(guān)鍵字，內(nèi)部陰影inset/外部投影outset（默認(rèn)），可選。知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性示例知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框，其基本語法格式如下:5.box-sizing屬性box-sizing:content-box|border-box;content-box

定義寬度和高度時(shí)，它的參數(shù)值不包括padding和border。border-box

定義寬度和高度時(shí)，它的參數(shù)值包括了padding和border。知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性box1沒有設(shè)置box-sizing屬性，默認(rèn)情況下，其實(shí)際寬度=寬度200+左右邊框2+左右內(nèi)邊100px=302px；box2、box3都設(shè)置了box-sizing為border-box，所以box2、box3的邊框、內(nèi)邊距都包括在其設(shè)置寬度中，即200px。示例知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性1能夠使任何元素呈現(xiàn)出透明效果。opacity屬性作用范圍要比rgba模式大得多opacity屬性opacity：參數(shù);2它是rgb模式的延伸。rgba模式是在紅、綠、藍(lán)三原色的基礎(chǔ)上添加了透明度參數(shù)rgba模式rgba(r,g,b,alpha);介于0和1之間的數(shù)字語法格式：語法格式：可以使用opacity和rgba設(shè)置透明。opacity是一個(gè)屬性，給父級(jí)設(shè)置opacity屬性，那么所有子元素都會(huì)繼承這個(gè)屬性。rgba是一個(gè)屬性值，只對(duì)該元素起作用。6.透明度opacity:0.5;opacity:1;知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性示例知識(shí)儲(chǔ)備總結(jié)邊框內(nèi)邊距外邊距陰影-box-shadowbox-sizing屬性盒子模型相關(guān)屬性盒子模型就是一個(gè)承裝HTML內(nèi)容的容器盒子模型的概念知識(shí)導(dǎo)圖任務(wù)分析a>img<header><nav>div.banner<section><h2>具體樣式：頁面內(nèi)的文字字體、大小、水平居中；<section>的寬高、水平居中、邊框?qū)傩缘龋?lt;h2>標(biāo)題的寬度、邊框、邊距屬性等；<img>的寬度、邊框、邊距、圓角屬性等；綜合應(yīng)用盒子模型屬性設(shè)置元素樣式任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)3.2設(shè)置“中華文化網(wǎng)”頁面背景效果展示知識(shí)儲(chǔ)備CSS3新增背景屬性2漸變背景屬性3CSS背景屬性1目錄Contents2.盒子模型相關(guān)屬性知識(shí)儲(chǔ)備1.CSS背景屬性1、網(wǎng)頁中插入圖像<imgsrc=“”/>瀏覽網(wǎng)頁時(shí)我們常常會(huì)被網(wǎng)頁中的圖像所吸引，巧妙的在網(wǎng)頁中穿插圖像可以讓網(wǎng)頁內(nèi)容變得更加豐富多彩。網(wǎng)頁中怎么使用圖像？2、圖像作為背景知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置。1.背景顏色background-color:背景顏色屬性實(shí)際工作中最常用CSS3新增顏色值，例：red、yellow#十六進(jìn)制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)#十六進(jìn)制色值，例：#cccrgb(r,g,b)，例：rgba(255,0,0,0.5)通過引入RGBA模式可以設(shè)置背景的不透明度。知識(shí)儲(chǔ)備1.CSS背景屬性box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框，其基本語法格式如下:1.背景顏色background-image:url();知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實(shí)現(xiàn)。其中，url指的是圖像的路徑。2.背景圖像例如：body{background-image:url(../img/pic.png);}background-image:url();知識(shí)儲(chǔ)備1.CSS背景屬性默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過background-repeat屬性來控制。3.背景圖像平鋪background-repeat:圖像平鋪屬性;平鋪屬性值含義repeat沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪知識(shí)儲(chǔ)備1.CSS背景屬性背景圖像位置默認(rèn)為左上頂點(diǎn)，可以用background-position屬性來改變背景圖像的位置。background-position屬性通常有兩個(gè)屬性值，語法格式如下4.背景圖像位置background-position：XY；background-position屬性通常有兩個(gè)屬性值，第1個(gè)值X用于設(shè)定水平方向的位置；第2個(gè)值Y用于設(shè)定垂直方向的位置；background-repeat設(shè)置為不重復(fù)（no-repeat）位置屬性取值含義預(yù)定義的關(guān)鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。單位數(shù)值設(shè)置圖像左上角在元素中的坐標(biāo)，可以取正值、也可以取負(fù)值。例如background-position:20px20px;百分比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ì)齊，而不是圖像充滿元素。知識(shí)儲(chǔ)備1.CSS背景屬性background-attachment屬性設(shè)置背景圖像固定，其取值可以為：5.背景圖像固定固定屬性取值含義scroll圖像隨頁面元素一起滾動(dòng)（默認(rèn)值）。fixed圖像固定在屏幕上，不隨頁面元素滾動(dòng)。知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，背景屬性也是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。背景的這幾個(gè)屬性沒有順序要求，但是習(xí)慣上按背景色、圖像、平鋪、位置、固定這樣的順序來寫。6.綜合設(shè)置背景background:cadetblueurl(img/pic.png)no-repeatcentertopfixed;background:背景色url("圖像")平鋪定位固定;知識(shí)儲(chǔ)備2.CSS3新增背景屬性運(yùn)用CSS3中的background-size屬性可以輕松控制背景圖像的大小。1.背景圖像大小background-size:屬性值1屬性值2;（1）auto：背景圖像的實(shí)際大小，默認(rèn)值。

（2）像素值：設(shè)置背景圖像的寬度和高度，當(dāng)設(shè)置一個(gè)值時(shí)，將其作為寬度值來等比縮放。

（3）0%～100%：用百分比指定背景圖像大小，當(dāng)設(shè)置一個(gè)值時(shí)同上。

（4）cover：覆蓋，將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。

（5）contain：容納，將背景圖像等比縮放至某一邊緊貼容器邊緣為止，背景圖像始終被包含在容器內(nèi)。

屬性值取值：知識(shí)儲(chǔ)備2.CSS3新增背景屬性使用

background-origin屬性來設(shè)置background-position屬性相對(duì)哪個(gè)位置來定位背景圖像。2.背景圖像原點(diǎn)位置background-origin:屬性值;（1）border-box：相對(duì)于邊框區(qū)域來定位背景圖像原點(diǎn)位置。（2）padding-box：相對(duì)于內(nèi)邊距區(qū)域來定位背景圖像原點(diǎn)位置。（3）content-box：相對(duì)于內(nèi)容區(qū)域來定位背景圖像原點(diǎn)位置。border-boxpadding-boxcontent-box知識(shí)儲(chǔ)備2.CSS3新增背景屬性background-clip屬性用于定義背景圖像的裁剪區(qū)域3.背景圖像裁剪區(qū)域background-clip:屬性值;（1）border-box：默認(rèn)值，從邊框區(qū)域向外裁剪背景。（2）padding-box：從內(nèi)邊距區(qū)域向外裁剪背景。（3）content-box：從內(nèi)容區(qū)域向外裁剪背景。border-boxpadding-boxcontent-box知識(shí)儲(chǔ)備2.CSS3新增背景屬性在CSS3中，通過background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值可以實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開。4.多重背景圖像background-image:url1，url2…;知識(shí)儲(chǔ)備3.漸變背景屬性在網(wǎng)頁中有很多地方用到背景色的漸變，例如：左側(cè)菜單欄的漸變背景色，中間模塊的漸變背景色等等。知識(shí)儲(chǔ)備3.漸變背景屬性以前，背景漸變效果是用圖像來實(shí)現(xiàn)的，現(xiàn)在，可以通過CSS3漸變背景屬性來實(shí)現(xiàn)，這樣可以減少下載的時(shí)間和寬帶的使用，此外，漸變是由瀏覽器產(chǎn)生的，背景圖像放大不會(huì)出現(xiàn)模糊，反而更加細(xì)膩、效果更好。知識(shí)儲(chǔ)備3.漸變背景屬性在線性漸變過程中，起始顏色會(huì)沿著一條直線按順序過渡到結(jié)束顏色。語法格式為：1.線性漸變background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);

用于定義漸變方式為線性漸變

括號(hào)內(nèi)參數(shù)用于設(shè)定漸變角度和顏色值。知識(shí)儲(chǔ)備3.漸變背景屬性1.線性漸變漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度值或關(guān)鍵詞，默認(rèn)是從上到下漸變。顏色值用于設(shè)置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個(gè)顏色值，各顏色值之間用“,”隔開。知識(shí)儲(chǔ)備3.漸變背景屬性1.線性漸變示例知識(shí)儲(chǔ)備3.漸變背景屬性徑向漸變是從一個(gè)中心點(diǎn)，沿著橢圓形或圓形形狀向外擴(kuò)散的漸變，有一種水波擴(kuò)散的效果。語法格式如下：2.徑向漸變background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2,...,顏色值n);

用于定義漸變方式為徑向漸變

括號(hào)內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。知識(shí)儲(chǔ)備3.漸變背景屬性background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2,...,顏色值n);漸變形狀用來定義徑向漸變的形狀，其取值既可以是定義水平半徑和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。ellipse表示橢圓形，circle表示圓形，默認(rèn)是ellipse。圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置。關(guān)鍵詞可以取left、right、center、top、bottom等，默認(rèn)是center，參數(shù)值可以用百分比或像素值。顏色值指定漸變的起止顏色，可以使用長(zhǎng)度或百分比指定起止顏色的位置。2.徑向漸變知識(shí)儲(chǔ)備3.漸變背景屬性2.徑向漸變示例知識(shí)儲(chǔ)備3.漸變背景屬性重復(fù)線性漸變用“background-image:repeating-linear-gradient（參數(shù)值）;”，它類似于linear-gradient()并采用相同的參數(shù)，但它會(huì)無限地重復(fù)整個(gè)過程直至覆蓋整個(gè)容器。3.重復(fù)漸變background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);第一個(gè)顏色從0開始，第二個(gè)顏色在容器寬度的10%的位置，第三個(gè)顏色值在容器寬度的20%，進(jìn)行重復(fù)線性漸變。知識(shí)儲(chǔ)備3.漸變背景屬性重復(fù)徑向漸變用background-image:repeating-radial-gradient（參數(shù)值），它類似于radial-gradient()并采用相同的參數(shù)，但它會(huì)無限地重復(fù)整個(gè)過程直至覆蓋整個(gè)容器。3.重復(fù)漸變background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);第一個(gè)顏色是深灰色從0開始，第二個(gè)顏色是黑色寬度到4px，進(jìn)行重復(fù)徑向漸變。知識(shí)儲(chǔ)備總結(jié)背景圖像大小背景圖像原點(diǎn)位置背景圖像裁剪區(qū)域多重背景圖像CSS3新增背景屬性線性漸變徑向漸變重復(fù)漸變漸變背景屬性背景顏色背景圖像背景圖像平鋪背景圖像位置背景圖像固定綜合設(shè)置背景背景屬性知識(shí)導(dǎo)圖知識(shí)導(dǎo)圖任務(wù)分析具體樣式：body背景圖像為bg.jpg；logo背景圖像為logo.png；nav背景圖像為nav.png；banner背景圖像為banner.png；section背景圖像為多重背景圖像，分別為bg1.png、bg2.png、bg3.png，分別位于section底部、底部左側(cè)、底部右側(cè)；h2的背景圖像分別為icon1.png、icon2.png。綜合應(yīng)用背景屬性設(shè)置元素背景樣式<header><nav>div.banner<section>任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)3.3制作“中華文化網(wǎng)”導(dǎo)航菜單效果展示知識(shí)儲(chǔ)備1.元素類型及特點(diǎn)塊元素特點(diǎn)（1）每個(gè)塊元素會(huì)獨(dú)占一行，按順序自上而下排列，其寬度默認(rèn)填滿其父元素寬度;（2）可以對(duì)其設(shè)置寬度、高度等屬性，即使設(shè)置了寬度，仍然是獨(dú)占一行；（3）其內(nèi)可以容納行內(nèi)元素、行內(nèi)塊元素和其他塊元素。塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。常見的塊元素有：<header><nav>等結(jié)構(gòu)化元素<div><dl><dt><dd><ul><ol><li><h1>-<h6><p><form><table>等在用CSS布局頁面的時(shí)候，HTML標(biāo)簽被定義成了不同的類型，一般分為3種，即：塊元素、行內(nèi)元素(也可以叫內(nèi)聯(lián)元素）和行內(nèi)塊元素。知識(shí)儲(chǔ)備2.元素類型轉(zhuǎn)換在用CSS布局頁面的時(shí)候，HTML標(biāo)簽被定義成了不同的類型，一般分為3種，即：塊元素、行內(nèi)元素(也可以叫內(nèi)聯(lián)元素）和行內(nèi)塊元素。行內(nèi)元素特點(diǎn)（1）相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下才會(huì)換行；（2）不能設(shè)置寬度、高度屬性，僅僅靠其內(nèi)的文字和圖像尺寸來支撐結(jié)構(gòu)；（3）其內(nèi)只能容納文本或者其他行內(nèi)元素，不能容納塊元素。行內(nèi)元素也稱為內(nèi)聯(lián)元素或內(nèi)嵌元素，常用于控制頁面中文本的樣式。常見的行內(nèi)元素有：<a><span><i><u><b><em>等知識(shí)儲(chǔ)備2.元素類型轉(zhuǎn)換行內(nèi)塊元素特點(diǎn)常見的行內(nèi)塊元素有：<img><input>等在用CSS布局頁面的時(shí)候，HTML標(biāo)簽被定義成了不同的類型，一般分為3種，即：塊元素、行內(nèi)元素(也可以叫內(nèi)聯(lián)元素）和行內(nèi)塊元素。（1）相鄰的行內(nèi)元素或行內(nèi)塊元素會(huì)排列在同一行上；（2）可以設(shè)置元素的高度、寬度等屬性。行內(nèi)塊元素就是同時(shí)具備行內(nèi)元素和塊級(jí)元素的特點(diǎn)，本質(zhì)仍是行內(nèi)元素，可以水平排列，但是可以設(shè)置width及height屬性值。知識(shí)儲(chǔ)備1.元素類型及特點(diǎn)知識(shí)儲(chǔ)備2.元素類型轉(zhuǎn)換行內(nèi)元素和塊元素類型并不是絕對(duì)的，是可以相互轉(zhuǎn)換的，可以通過display屬性來改變默認(rèn)的顯示類型。inlineblockinline-blocknone01將元素顯示為行內(nèi)元素。03將元素顯示為行內(nèi)塊元素02將元素顯示為塊元素。04此元素將被隱藏，不顯示，也不占用頁面空間。display知識(shí)儲(chǔ)備2.元素類型轉(zhuǎn)換當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時(shí)就會(huì)出現(xiàn)間隙，可以通過以下兩種方法解決：1、去掉行內(nèi)元素之間的換行；2、將行內(nèi)元素的父級(jí)設(shè)置font-size為0，行內(nèi)元素自身再設(shè)置font-size值。知識(shí)儲(chǔ)備總結(jié)display:none;不顯示該元素，display:block;轉(zhuǎn)換為塊元素；display:inline;轉(zhuǎn)換為行內(nèi)元素；display:inline-block;轉(zhuǎn)換為行內(nèi)塊元素。元素類型轉(zhuǎn)換塊元素行內(nèi)元素行內(nèi)塊元素元素類型及特點(diǎn)知識(shí)導(dǎo)圖任務(wù)分析<nav><a>具體樣式：<a>的寬度、高度、邊距、漸變背景、文字大小、顏色等樣式任務(wù)實(shí)施任務(wù)實(shí)施技能拓展拓展任務(wù)：自選古詩內(nèi)容制作中華文化網(wǎng)“唐詩宋詞”模塊。效果如圖所示。任務(wù)要求：綜合使用盒子模型屬性設(shè)置元素邊框、邊距等屬性，頁面元素間距合理，美觀大方。技能拓展拓展任務(wù)：頁面中有一功能模塊，有“網(wǎng)站首頁”、“公司簡(jiǎn)介”、“聯(lián)系我們”、“系統(tǒng)設(shè)置”四個(gè)超鏈接，每個(gè)超鏈接為圓角、寬高相同、背景為漸變背景，效果如圖所示。THANKYOU《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目4列表頁面制作任務(wù)4.3制作“低碳環(huán)保網(wǎng)”頭部模塊03目錄Contents任務(wù)4.2制作“環(huán)保百科”圖像列表模塊02任務(wù)4.1制作“低碳環(huán)保網(wǎng)”文字列表01教學(xué)目標(biāo)熟悉超鏈接偽類選擇器掌握CSS列表屬性掌握偽元素選擇器的用法理解結(jié)構(gòu)化偽類選擇器、關(guān)系選擇器的用法1.知識(shí)目標(biāo)能夠?yàn)榱斜碓O(shè)置列表項(xiàng)圖像

能夠使用偽元素選擇器在元素前后添加內(nèi)容

能夠使用結(jié)構(gòu)化偽類選擇器、關(guān)系選擇器選擇元素

能夠使用Font?Awesome圖標(biāo)庫設(shè)置圖標(biāo)2.技能目標(biāo)倡導(dǎo)低碳生活、環(huán)保出行意識(shí)

培養(yǎng)不斷探索、精益求精的工匠精神

遵守代碼規(guī)范性要求，養(yǎng)成良好的代碼編寫習(xí)慣3.素養(yǎng)目標(biāo)1任務(wù)4.1制作“低碳環(huán)保網(wǎng)”文字列表效果展示知識(shí)儲(chǔ)備CSS列表屬性2偽元素選擇器3超鏈接偽類選擇器1設(shè)置列表項(xiàng)圖像4目錄Contents知識(shí)儲(chǔ)備在一個(gè)網(wǎng)站中，所有頁面都是通過超鏈接相互連接在一起的，用戶通過超鏈接就可以訪問網(wǎng)站中的每個(gè)頁面。在設(shè)計(jì)網(wǎng)站時(shí)，超鏈接與導(dǎo)航都是網(wǎng)頁中重要的組成部分之一。1.超鏈接偽類選擇器知識(shí)儲(chǔ)備a:linka:visiteda:hovera:active正常超鏈接訪問后.鼠標(biāo)經(jīng)過懸停時(shí)超鏈接標(biāo)簽<a>的偽類1.超鏈接偽類選擇器知識(shí)儲(chǔ)備同時(shí)使用鏈接的4種偽類時(shí)，通常按照a:link、a:visited、a:hover和a:active的順序書寫，即LVHA，否則定義的樣式可能不起作用。除了文本樣式之外，鏈接偽類還常常用于控制超鏈接的背景、邊框等樣式。1.超鏈接偽類選擇器知識(shí)儲(chǔ)備說到列表大家并不陌生，在瀏覽網(wǎng)頁時(shí)，隨處可見。列表是網(wǎng)頁設(shè)計(jì)中使用頻率非常高的元素，在大多數(shù)網(wǎng)站設(shè)計(jì)中，無論是新聞列表，還是圖片列表，甚至導(dǎo)航菜單等，均需要以列表的形式來體現(xiàn)。2.CSS列表屬性知識(shí)儲(chǔ)備列表屬性列表項(xiàng)類型list-style-type列表項(xiàng)位置列表項(xiàng)圖像list-style-imagelist-style-position2.CSS列表屬性知識(shí)儲(chǔ)備屬性值顯示效果disc默認(rèn)值，實(shí)心的圓點(diǎn)circle空心圓square實(shí)心方塊decimal數(shù)字upper-alpha大寫英文字母，如A、B、C、...lower-alpha小寫英文字母，如a、b、c、...upper-roman大寫羅馬字母，如Ⅰ、Ⅱ、Ⅲ、...lower-roman小寫羅馬字母，如i、ii、iii、...none不顯示任何符號(hào)列表項(xiàng)類型在CSS中，可以使用list-style-type屬性來修改列表項(xiàng)的標(biāo)志類型。2.CSS列表屬性知識(shí)儲(chǔ)備2.CSS列表屬性CSS中使用list-style-image將列表項(xiàng)前的項(xiàng)目符號(hào)替換為任意圖片。語法格式如下：這種設(shè)置列表項(xiàng)圖像的方法比較簡(jiǎn)單，但是無法調(diào)整圖像與列表文字之間的距離。如果希望項(xiàng)目符號(hào)采用圖像的方式，一般是將list-style-type屬性設(shè)置為none，然后設(shè)置li標(biāo)簽的背景屬性background來實(shí)現(xiàn)。list-style-image:url(圖片URL)|none;例：使用list-style-image屬性設(shè)置列表項(xiàng)圖像：li{list-style-type:none;list-style-image:url(images/arrow.gif); }例：使用background屬性設(shè)置列表項(xiàng)圖像:li{list-style-type:none;background:url(images/arrow.gif)no-repeatleftcenter;padding-left:20px;/*設(shè)置li的左內(nèi)邊距為20px，是為了調(diào)整圖像和列表項(xiàng)文字之間的距離*/}2.列表項(xiàng)圖像知識(shí)儲(chǔ)備CSS中使用list-style-position屬性控制列表項(xiàng)的位置，語法格式如下：outside:列表項(xiàng)標(biāo)記位于文本的左側(cè)，且放置在文本以外，為默認(rèn)值inside:列表項(xiàng)標(biāo)記放置在文本以內(nèi)list-style-position：outside|inside;outsideinside2.CSS列表屬性3.列表項(xiàng)位置知識(shí)儲(chǔ)備3.偽元素選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容<元素>::before{content:文字/url()/;}必須配合content屬性來指定要插入的具體內(nèi)容；

content屬性值可以是文字、圖片和各種利用“width”、“height”、“border”制作出來的形狀，甚至還能添加音頻、視頻這些多媒體文件；::before選擇器::after選擇器用于在被選元素的內(nèi)容后面插入內(nèi)容知識(shí)儲(chǔ)備3.偽元素選擇器知識(shí)儲(chǔ)備3.偽元素選擇器:first-line：

為某個(gè)元素的第一行文字使用樣式。:first-letter：

為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式。知識(shí)儲(chǔ)備4.設(shè)置列表項(xiàng)圖像方法1：使用list-style-image設(shè)置列表項(xiàng)圖像設(shè)置列表項(xiàng)符號(hào)為none，再設(shè)置列表項(xiàng)圖像，調(diào)整列表項(xiàng)位置。list-style-type:none;list-style-image:url(img/li.png);list-style-position:inside;簡(jiǎn)單，但是無法精確調(diào)整圖像的位置。優(yōu)缺點(diǎn)知識(shí)儲(chǔ)備方法2：

使用背景屬性設(shè)置列表項(xiàng)圖像設(shè)置li的背景屬性background，再通過padding-left

調(diào)整背景圖像與列表項(xiàng)文字之間的距離?？梢跃_控制背景圖像的位置，但是圖像需要提前準(zhǔn)備好，并且圖像背景半透明。優(yōu)缺點(diǎn)4.設(shè)置列表項(xiàng)圖像知識(shí)儲(chǔ)備方法3：

使用CSS制作列表項(xiàng)圖像修改HTML結(jié)構(gòu)，在a前面增加span標(biāo)簽，設(shè)置span的樣式為小圓點(diǎn)。需要修改HTML結(jié)構(gòu)，在每個(gè)a前增加span標(biāo)簽，有點(diǎn)繁瑣。優(yōu)缺點(diǎn)4.設(shè)置列表項(xiàng)圖像知識(shí)儲(chǔ)備方法4：使用偽元素選擇器生成列表項(xiàng)圖像使用偽元素選擇器::before，在a前生成一個(gè)圖像。不用修改HTML結(jié)構(gòu)，方便、靈活。優(yōu)缺點(diǎn)4.設(shè)置列表項(xiàng)圖像知識(shí)導(dǎo)圖任務(wù)分析使用list-style-image設(shè)置列表項(xiàng)圖像使用background設(shè)置列表項(xiàng)li的背景圖像使用CSS樣式制作一個(gè)小圓點(diǎn)圖形。（1）“環(huán)保資訊”標(biāo)題前的圖標(biāo)如何實(shí)現(xiàn)？可以設(shè)置標(biāo)題的背景圖像。（2）列表項(xiàng)前的圖標(biāo)如何實(shí)現(xiàn)？<h3>ul>li>adiv.newsdiv#top任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)4.2制作“環(huán)保百科”圖像列表模塊效果展示任務(wù)4.2制作“環(huán)保百科”圖像列表模塊知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器是根據(jù)頁面中元素之間的結(jié)構(gòu)關(guān)系來定位HTML元素，從而減少對(duì)HTML元素的id屬性和class屬性的依賴。CSS3中新增了結(jié)構(gòu)化偽類選擇器，大大提高了開發(fā)者的開發(fā)效率。:target選擇器8:nth-child(n)和:nth-last-child(n)選擇器2:nth-of-type(n)和:nth-last-of-type(n)選擇器3:root選擇器4:only-child選擇器5:only-of-type選擇器6:empty選擇器7:first-child和:last-child選擇器1知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)和最后一個(gè)子元素設(shè)置樣式。1.:first-child選擇器和:last-child選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:nth-child(n)選擇器和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，與元素類型無關(guān)。n可以是數(shù)字、關(guān)鍵字（even偶數(shù)、odd奇數(shù)）或公式（2n、n+3）。2.:nth-child(n)和:nth-last-child(n)選擇器（1）若n是數(shù)字，則表示選擇第n個(gè)子元素，n從1開始；

（2）若n是關(guān)鍵字，則even表示偶數(shù)，odd表示奇數(shù)；

（3）若n是表達(dá)式，則此時(shí)n從0開始計(jì)算。知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:nth-child(n)選擇器和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，與元素類型無關(guān)。n可以是數(shù)字、關(guān)鍵字（even偶數(shù)、odd奇數(shù)）或公式（2n、n+3）。2.:nth-child(n)和:nth-last-child(n)選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素。2.:nth-of-type(n)和:nth-last-of-type(n)選擇器知識(shí)儲(chǔ)備:nth-child(n)與:nth-of-type(n)的區(qū)別如下：

:nth-child(n)對(duì)父元素里所有子元素進(jìn)行排序選擇(序號(hào)是固定的)，先找到第n個(gè)子元素，然后看看是否和子元素匹配，若不匹配則不使用；

:nth-of-type(n)對(duì)父元素里特定類型的子元素進(jìn)行排序選擇，先去匹配子元素，然后根據(jù)子元素找第n個(gè)子元素。總結(jié)結(jié)構(gòu)化偽類選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說使用“:root選擇器”定義的樣式，對(duì)所有頁面元素都生效。4.:root選擇器當(dāng)使用了:root，則body只對(duì)當(dāng)前包含內(nèi)容的塊改變背景顏色，否則整個(gè)頁面背景顏色改變。知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說，如果某個(gè)父元素僅有一個(gè)子元素，則使用“:only-child選擇器”可以選擇這個(gè)子元素。5.:only-child選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:only-of-type選擇器用于匹配屬于父元素的特定類型的唯一子元素的元素。6.:only-of-type選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:empty選擇器用來選擇沒有子元素或文本內(nèi)容為空的所有元素。文本內(nèi)容為空是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格。7.:empty選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器:target選擇器用于為頁面中的某個(gè)target元素指定樣式。target元素就是頁面中的超鏈接通過#id鏈接到的元素。只有用戶單擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后，:target選擇器所設(shè)置的樣式才會(huì)起作用。8.:target選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類選擇器如果對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個(gè)樣式，可以使用:not選擇器。9.:not選擇器知識(shí)導(dǎo)圖任務(wù)分析如何讓li橫排？塊元素轉(zhuǎn)換為行內(nèi)元素：display：inline-block，使用floatdiv#baike圖標(biāo)<ul><h1><li><a><img>任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)4.3制作“低碳環(huán)保網(wǎng)”頭部模塊效果展