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

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

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

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

理解漸變背景屬性

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

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

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

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

border-width、border-style

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

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

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

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

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

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

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

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

屬性值取值：知識儲備2.CSS3新增背景屬性使用

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

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

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

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

括號內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。知識儲備3.漸變背景屬性background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2,...,顏色值n);漸變形狀用來定義徑向漸變的形狀，其取值既可以是定義水平半徑和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。ellipse表示橢圓形，circle表示圓形，默認是ellipse。圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置。關(guān)鍵詞可以取left、right、center、top、bottom等，默認是center，參數(shù)值可以用百分比或像素值。顏色值指定漸變的起止顏色，可以使用長度或百分比指定起止顏色的位置。2.徑向漸變知識儲備3.漸變背景屬性2.徑向漸變示例知識儲備3.漸變背景屬性重復(fù)線性漸變用“background-image:repeating-linear-gradient（參數(shù)值）;”，它類似于linear-gradient()并采用相同的參數(shù)，但它會無限地重復(fù)整個過程直至覆蓋整個容器。3.重復(fù)漸變background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);第一個顏色從0開始，第二個顏色在容器寬度的10%的位置，第三個顏色值在容器寬度的20%，進行重復(fù)線性漸變。知識儲備3.漸變背景屬性重復(fù)徑向漸變用background-image:repeating-radial-gradient（參數(shù)值），它類似于radial-gradient()并采用相同的參數(shù)，但它會無限地重復(fù)整個過程直至覆蓋整個容器。3.重復(fù)漸變background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);第一個顏色是深灰色從0開始，第二個顏色是黑色寬度到4px，進行重復(fù)徑向漸變。知識儲備總結(jié)背景圖像大小背景圖像原點位置背景圖像裁剪區(qū)域多重背景圖像CSS3新增背景屬性線性漸變徑向漸變重復(fù)漸變漸變背景屬性背景顏色背景圖像背景圖像平鋪背景圖像位置背景圖像固定綜合設(shè)置背景背景屬性知識導(dǎo)圖知識導(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ù)實施任務(wù)實施3任務(wù)3.3制作“中華文化網(wǎng)”導(dǎo)航菜單效果展示知識儲備1.元素類型及特點塊元素特點（1）每個塊元素會獨占一行，按順序自上而下排列，其寬度默認填滿其父元素寬度;（2）可以對其設(shè)置寬度、高度等屬性，即使設(shè)置了寬度，仍然是獨占一行；（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布局頁面的時候，HTML標簽被定義成了不同的類型，一般分為3種，即