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

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

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

掌握背景屬性的設置方法

理解漸變背景屬性

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

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

培養(yǎng)不斷探索、敢于實踐的精神培養(yǎng)代碼規(guī)范意識，養(yǎng)成良好的代碼編寫習慣3.素養(yǎng)目標1任務3.1制作“中華文化網(wǎng)”琴棋書畫模塊效果展示知識儲備盒子模型相關屬性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.盒子模型相關屬性為了分割頁面中不同的盒子，常常需要給元素設置邊框效果。在CSS中，我們可以設置單側(cè)邊框（上邊框、下邊框、左邊框、右邊框）的樣式屬性、寬度屬性、顏色屬性，也可以綜合設置邊框的這些屬性。邊框設置border020304border-top：上邊框;border-right：右邊框;border-bottom：下邊框;01border-left：左邊框知識儲備內(nèi)邊距屬性2外邊距屬性3邊框?qū)傩?box-sizing屬性5陰影屬性42.盒子模型相關屬性透明6知識儲備2.盒子模型相關屬性邊框?qū)傩赃吙驑邮絙order-style:上邊[右邊下邊左邊];邊框?qū)挾萣order-width:上邊[右邊下邊左邊];綜合設置邊框邊框顏色border-color:上邊[右邊下邊左邊];border:四邊寬度四邊樣式四邊顏色;none（無）、dotted（點線）、dashed（虛線）、solid（實線）等以像素為單位用于定義頁面中邊框的風格red、#ff0000、rgb(0,255,0注意：邊框三個屬性，必須設置邊框樣式，如果未設置樣式或設置為none，則寬度、顏色都無效。1.邊框?qū)傩灾R儲備2.盒子模型相關屬性border:border-width

border-style

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

border-width、border-style

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用背景屬性設置列表項圖像設置li的背景屬性background，再通過padding-left

調(diào)整背景圖像與列表項文字之間的距離。可以精確控制背景圖像的位置，但是圖像需要提前準備好，并且圖像背景半透明。優(yōu)缺點4.設置列表項圖像知識儲備方法3：

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

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

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

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

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