HTML5+CSS3 Web前端開(kāi)發(fā)項(xiàng)目化教程 課件 項(xiàng)目4 列表頁(yè)面制作

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

項(xiàng)目4列表頁(yè)面制作任務(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)熟悉超鏈接偽類(lèi)選擇器掌握CSS列表屬性掌握偽元素選擇器的用法理解結(jié)構(gòu)化偽類(lèi)選擇器、關(guān)系選擇器的用法1.知識(shí)目標(biāo)能夠?yàn)榱斜碓O(shè)置列表項(xiàng)圖像

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

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

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

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

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

content屬性值可以是文字、圖片和各種利用“width”、“height”、“border”制作出來(lái)的形狀，甚至還能添加音頻、視頻這些多媒體文件；::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)單，但是無(wú)法精確調(diào)整圖像的位置。優(yōu)缺點(diǎn)知識(shí)儲(chǔ)備方法2：

使用背景屬性設(shè)置列表項(xiàng)圖像設(shè)置li的背景屬性background，再通過(guò)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)化偽類(lèi)選擇器結(jié)構(gòu)化偽類(lèi)選擇器是根據(jù)頁(yè)面中元素之間的結(jié)構(gòu)關(guān)系來(lái)定位HTML元素，從而減少對(duì)HTML元素的id屬性和class屬性的依賴。CSS3中新增了結(jié)構(gòu)化偽類(lèi)選擇器，大大提高了開(kāi)發(fā)者的開(kāi)發(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)化偽類(lèi)選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)和最后一個(gè)子元素設(shè)置樣式。1.:first-child選擇器和:last-child選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:nth-child(n)選擇器和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，與元素類(lèi)型無(wú)關(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開(kāi)始；

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

（3）若n是表達(dá)式，則此時(shí)n從0開(kāi)始計(jì)算。知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:nth-child(n)選擇器和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，與元素類(lèi)型無(wú)關(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)化偽類(lèi)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類(lèi)型的第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ì)父元素里特定類(lèi)型的子元素進(jìn)行排序選擇，先去匹配子元素，然后根據(jù)子元素找第n個(gè)子元素。總結(jié)結(jié)構(gòu)化偽類(lèi)選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說(shuō)使用“:root選擇器”定義的樣式，對(duì)所有頁(yè)面元素都生效。4.:root選擇器當(dāng)使用了:root，則body只對(duì)當(dāng)前包含內(nèi)容的塊改變背景顏色，否則整個(gè)頁(yè)面背景顏色改變。知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說(shuō)，如果某個(gè)父元素僅有一個(gè)子元素，則使用“:only-child選擇器”可以選擇這個(gè)子元素。5.:only-child選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:only-of-type選擇器用于匹配屬于父元素的特定類(lèi)型的唯一子元素的元素。6.:only-of-type選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:empty選擇器用來(lái)選擇沒(méi)有子元素或文本內(nèi)容為空的所有元素。文本內(nèi)容為空是一點(diǎn)內(nèi)容都沒(méi)有，哪怕是一個(gè)空格。7.:empty選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器:target選擇器用于為頁(yè)面中的某個(gè)target元素指定樣式。target元素就是頁(yè)面中的超鏈接通過(guò)#id鏈接到的元素。只有用戶單擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后，:target選擇器所設(shè)置的樣式才會(huì)起作用。8.:target選擇器知識(shí)儲(chǔ)備結(jié)構(gòu)化偽類(lèi)選擇器如果對(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)”頭部模塊效果展示知識(shí)儲(chǔ)備1.導(dǎo)航菜單對(duì)于一個(gè)成功的網(wǎng)站，導(dǎo)航菜單是不可缺少的。導(dǎo)航菜單的風(fēng)格往往也決定了整個(gè)網(wǎng)站的風(fēng)格，因此，很多設(shè)計(jì)者都投入很多時(shí)間和精力來(lái)制作各式各樣的導(dǎo)航菜單，從而體現(xiàn)網(wǎng)站的整體架構(gòu)與風(fēng)格。知識(shí)儲(chǔ)備1.導(dǎo)航菜單<nav><ul><li><ahref="#">主頁(yè)</a></li><li><ahref="#">新聞中心</a></li><li><ahref="#">公司簡(jiǎn)介</a></li><li><ahref="#">產(chǎn)品展示</a></li><li><ahref="#">關(guān)于我們</a></li></ul></nav>目前，大多數(shù)導(dǎo)航菜單都是基于列表結(jié)構(gòu)的。設(shè)計(jì)者在制作時(shí)將列表的list-style-type屬性值設(shè)置為none，即列表項(xiàng)前不顯示任何項(xiàng)目符號(hào)，然后再運(yùn)用CSS技術(shù)來(lái)制作風(fēng)格多樣的導(dǎo)航。知識(shí)儲(chǔ)備豎向?qū)Ш讲藛螜M向?qū)Ш讲藛螌?dǎo)航菜單一般有豎向和橫向兩種顯示方式，將豎向?qū)Ш讲藛无D(zhuǎn)換成橫向?qū)Ш讲藛巫钪匾沫h(huán)節(jié)就是設(shè)置<li>標(biāo)簽為浮動(dòng)（float）。1.導(dǎo)航菜單知識(shí)儲(chǔ)備1.導(dǎo)航菜單知識(shí)儲(chǔ)備在HTML中，元素之間的關(guān)系有父子關(guān)系、祖先后代關(guān)系、兄弟關(guān)系。父子關(guān)系中父元素直接包含子元素，祖先后代關(guān)系中祖先元素直接或間接包含后代元素，兄弟關(guān)系中元素?fù)碛泄餐冈亍?.關(guān)系選擇器知識(shí)儲(chǔ)備2.關(guān)系選擇器

后代選擇器2兄弟選擇器3

子元素選擇器1知識(shí)儲(chǔ)備2.關(guān)系選擇器用來(lái)選擇某個(gè)元素的第一級(jí)子元素，由符號(hào)“>”連接前后兩個(gè)元素。語(yǔ)法：父元素>子元素。1.子元素選擇器例如：h1>strong：選擇的是h1的第一級(jí)子元素strong元素。知識(shí)儲(chǔ)備2.關(guān)系選擇器后代選擇器選擇某個(gè)元素的后代，用“空格”連接，語(yǔ)法：祖先元素

后代元素。2.后代選擇器例如：h1strong：選擇的是h1的

后代strong元素。知識(shí)儲(chǔ)備2.關(guān)系選擇器子元素選擇器選擇的是某個(gè)元素的第一級(jí)子元素，而后代選擇器，選擇的是某個(gè)元素的后代，包括子元素和子元素的子元素，即所有的后代元素。子元素選擇器和后代選擇器有什么區(qū)別？父子父子孫子元素選擇器后代選擇器知識(shí)儲(chǔ)備2.關(guān)系選擇器思考：誰(shuí)的顏色為紅色？誰(shuí)的背景顏色為粉色？子元素選擇器選擇的是某個(gè)元素的第一級(jí)子元素，而后代選擇器，選擇的是某個(gè)元素的后代，包括子元素和子元素的子元素，即所有的后代元素。子元素選擇器和后代選擇器有什么區(qū)別？知識(shí)儲(chǔ)備2.關(guān)系選擇器兄弟選擇器用來(lái)選擇與某元素位于同一個(gè)父元