HTML5+CSS3 Web前端開(kāi)發(fā)項(xiàng)目化教程 課件 項(xiàng)目3 圖文混排頁(yè)面制作

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

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

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

理解漸變背景屬性

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

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

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

每幅畫(huà)都有一個(gè)邊框，英文稱(chēng)為“border”，畫(huà)與畫(huà)框之間都會(huì)有一定的留白，稱(chēng)為內(nèi)邊距，英文稱(chēng)為“padding”；每幅畫(huà)之間通常也會(huì)一定的距離，這個(gè)距離稱(chēng)為“外邊距”，英文稱(chēng)為“margin”。知識(shí)儲(chǔ)備1.盒子模型的概念什么是盒子模型？所謂盒子模型，網(wǎng)頁(yè)其實(shí)也是由一個(gè)個(gè)矩形區(qū)域通過(guò)排版組合而成，這些矩形區(qū)域可以看成是承裝HTML內(nèi)容的容器，稱(chēng)為盒子。網(wǎng)頁(yè)盒子可以通過(guò)調(diào)整每個(gè)盒子的寬度、高度、距離等參數(shù)，來(lái)調(diào)節(jié)盒子的大小和位置。知識(shí)儲(chǔ)備1.盒子模型的概念內(nèi)容（content）內(nèi)容是盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容邊框（border）邊框（border）是盒子的邊界外邊距（margin）盒子的最外圍，是添加在邊框外周?chē)目臻g每個(gè)盒子模型都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。內(nèi)邊距（padding）內(nèi)容區(qū)和邊框之間的距離知識(shí)儲(chǔ)備1.盒子模型的概念頁(yè)面中的任何元素都可以看成盒子，常見(jiàn)的有div、h1到h6標(biāo)題、列表ul、li，甚至行內(nèi)元素a、span、img等等。正是因?yàn)檫@些盒子的排版，因此網(wǎng)頁(yè)的內(nèi)容雖然零散，但在版式排列上依然清晰有條理。知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性為了分割頁(yè)面中不同的盒子，常常需要給元素設(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（無(wú)）、dotted（點(diǎn)線(xiàn)）、dashed（虛線(xiàn)）、solid（實(shí)線(xiàn)）等以像素為單位用于定義頁(yè)面中邊框的風(fēng)格red、#ff0000、rgb(0,255,0注意：邊框三個(gè)屬性，必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則寬度、顏色都無(wú)效。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è)置邊框，語(yǔ)法格式如下：注意：

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中稱(chēng)之為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實(shí)際工作中常使用復(fù)合屬性，它可以簡(jiǎn)化代碼，提高頁(yè)面的運(yùn)行速度，但是如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性。注意：使用border屬性一次性設(shè)置邊框的樣式，僅適用于4個(gè)方向的邊框效果都一樣的情況，若每條邊框不相同，可通過(guò)單側(cè)邊框綜合屬性分別進(jìn)行設(shè)置。例如，單獨(dú)定義上邊框樣式：border-top:1pxdashedred;/*設(shè)置上邊框樣式*/1.邊框?qū)傩灾R(shí)儲(chǔ)備2.盒子模型相關(guān)屬性圓角邊框?qū)傩允荂SS3新增屬性，其基本語(yǔ)法格式如下。圓角邊框border-radius:參數(shù)1/參數(shù)2border-radius屬性同樣遵循值復(fù)制的原則，其水平半徑（參數(shù)1）和垂直半徑（參數(shù)2）均可以設(shè)置1-4個(gè)參數(shù)值，用來(lái)表示四角圓角半徑的大小。僅設(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)屬性中國(guó)新聞網(wǎng)——習(xí)近平與青年書(shū)｜“在逐夢(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)元素水平居中，并且上下拉開(kāi)5像素邊距*/margin控制元素之間的距離緊鄰的兩個(gè)元素之間的距離為第1個(gè)元素的margin-right加上第2個(gè)元素的margin-left。但在垂直方向上緊鄰的兩個(gè)元素之間的距離是兩者中的較大者。3.外邊距屬性知識(shí)儲(chǔ)備2.盒子模型相關(guān)屬性CSS3中的box-shadow屬性可以輕松實(shí)現(xiàn)陰影的添加，其基本語(yǔ)法格式如下：4.box-shadow屬性box-shadow:offset-xoffset-yblurspreadcolorinset;offset-x：水平陰影的位置，必選，可以為負(fù)值。offset-y：垂直陰影的位置，必選，可以為負(fù)值。blur：陰影模糊半徑，可選，只能取正值。0即無(wú)模糊效果，值越大陰影邊緣越模糊。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)邊距和邊框，其基本語(yǔ)法格式如下: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沒(méi)有設(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ù)字語(yǔ)法格式：語(yǔ)法格式：可以使用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>具體樣式：頁(yè)面內(nèi)的文字字體、大小、水平居中；<section>的寬高、水平居中、邊框?qū)傩缘龋?lt;h2>標(biāo)題的寬度、邊框、邊距屬性等；<img>的寬度、邊框、邊距、圓角屬性等；綜合應(yīng)用盒子模型屬性設(shè)置元素樣式任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)3.2設(shè)置“中華文化網(wǎng)”頁(yè)面背景效果展示知識(shí)儲(chǔ)備CSS3新增背景屬性2漸變背景屬性3CSS背景屬性1目錄Contents2.盒子模型相關(guān)屬性知識(shí)儲(chǔ)備1.CSS背景屬性1、網(wǎng)頁(yè)中插入圖像<imgsrc=“”/>瀏覽網(wǎng)頁(yè)時(shí)我們常常會(huì)被網(wǎng)頁(yè)中的圖像所吸引，巧妙的在網(wǎng)頁(yè)中穿插圖像可以讓網(wǎng)頁(yè)內(nèi)容變得更加豐富多彩。網(wǎng)頁(yè)中怎么使用圖像？2、圖像作為背景知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(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)通過(guò)引入RGBA模式可以設(shè)置背景的不透明度。知識(shí)儲(chǔ)備1.CSS背景屬性box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框，其基本語(yǔ)法格式如下:1.背景顏色background-image:url();知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，還可以將圖像作為網(wǎng)頁(yè)元素的背景，通過(guò)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è)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制。3.背景圖像平鋪background-repeat:圖像平鋪屬性;平鋪屬性值含義repeat沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪知識(shí)儲(chǔ)備1.CSS背景屬性背景圖像位置默認(rèn)為左上頂點(diǎn)，可以用background-position屬性來(lái)改變背景圖像的位置。background-position屬性通常有兩個(gè)屬性值，語(yǔ)法格式如下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ì)齊，而不是圖像充滿(mǎn)元素。知識(shí)儲(chǔ)備1.CSS背景屬性background-attachment屬性設(shè)置背景圖像固定，其取值可以為：5.背景圖像固定固定屬性取值含義scroll圖像隨頁(yè)面元素一起滾動(dòng)（默認(rèn)值）。fixed圖像固定在屏幕上，不隨頁(yè)面元素滾動(dòng)。知識(shí)儲(chǔ)備1.CSS背景屬性在CSS中，背景屬性也是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。背景的這幾個(gè)屬性沒(méi)有順序要求，但是習(xí)慣上按背景色、圖像、平鋪、位置、固定這樣的順序來(lái)寫(xiě)。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í)，將其作為寬度值來(lái)等比縮放。

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

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

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

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

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

用于定義漸變方式為線(xiàn)性漸變

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

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

括號(hào)內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。知識(shí)儲(chǔ)備3.漸變背景屬性background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2,...,顏色值n);漸變形狀用來(lái)定義徑向漸變的形狀，其取值既可以是定義水平半徑和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。ellipse表示橢圓形，circle表示圓形，默認(rèn)是ellipse。圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來(lái)定義徑向漸變的中心位置。關(guān)鍵詞可以取left、right、center、top、bottom等，默認(rèn)是center，參數(shù)值可以用百分比或像素值。顏色值指定漸變的起止顏色，可以使用長(zhǎng)度或百分比指定起止顏色的位置。2.徑向漸變知識(shí)儲(chǔ)備3.漸變背景屬性2.徑向漸變示例知識(shí)儲(chǔ)備3.漸變背景屬性重復(fù)線(xiàn)性漸變用“background-image:repeating-linear-gradient（參數(shù)值）;”，它類(lèi)似于linear-gradient()并采用相同的參數(shù)，但它會(huì)無(wú)限地重復(fù)整個(gè)過(guò)程直至覆蓋整個(gè)容器。3.重復(fù)漸變background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);第一個(gè)顏色從0開(kāi)始，第二個(gè)顏色在容器寬度的10%的位置，第三個(gè)顏色值在容器寬度的20%，進(jìn)行重復(fù)線(xiàn)性漸變。知識(shí)儲(chǔ)備3.漸變背景屬性重復(fù)徑向漸變用background-image:repeating-radial-gradient（參數(shù)值），它類(lèi)似于radial-gradient()并采用相同的參數(shù)，但它會(huì)無(wú)限地重復(fù)整個(gè)過(guò)程直至覆蓋整個(gè)容器。3.重復(fù)漸變background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);第一個(gè)顏色是深灰色從0開(kāi)始，第二個(gè)顏色是黑色寬度到4px，進(jìn)行重復(fù)徑向漸變。知識(shí)儲(chǔ)備總結(jié)背景圖像大小背景圖像原點(diǎn)位置背景圖像裁剪區(qū)域多重背景圖像CSS3新增背景屬性線(xiàn)性漸變徑向漸變重復(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.元素類(lèi)型及特點(diǎn)塊元素特點(diǎn)（1）每個(gè)塊元素會(huì)獨(dú)占一行，按順序自上而下排列，其寬度默認(rèn)填滿(mǎn)其父元素寬度;（2）可以對(duì)其設(shè)置寬度、高度等屬性，即使設(shè)置了寬度，仍然是獨(dú)占一行；（3）其內(nèi)可以容納行內(nèi)元素、行內(nèi)塊元素和其他塊元素。塊元素在頁(yè)面中以區(qū)域塊的形式出現(xiàn)，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。常見(jiàn)的塊元素有：<header><nav>等結(jié)構(gòu)化元素<div><dl><dt><dd><ul><ol><li><h1>-<h6><p><form><table>等在用CSS布局頁(yè)面的時(shí)候，HTML標(biāo)簽被定義成了不同的類(lèi)型，一般分為3種，即