《HTML5+CSS3Web前端開發項目化教程》

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

能夠使用偽元素選擇器在元素前后添加內容

能夠使用結構化偽類選擇器、關系選擇器選擇元素

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

培養不斷探索、精益求精的工匠精神

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

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

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

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

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

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

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

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

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

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

:nth-of-type(n)對父元素里特定類型的子元素進行排序選擇，先去匹配子元素，然后根據子元素找第n個子元素。總結結構化偽類選擇器知識儲備結構化偽類選擇器知識儲備結構化偽類選擇器:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說使用“:root選擇器”定義的樣式，對所有頁面元素都生效。4.:root選擇器當使用了:root，則body只對當前包含內容的塊改變背景顏色，否則整個頁面背景顏色改變。知識儲備結構化偽類選擇器:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說，如果某個父元素僅有一個子元素，則使用“:only-child選擇器”可以選擇這個子元素。5.:only-child選擇器知識儲備結構化偽類選擇器:only-of-type選擇器用于匹配屬于父元素的特定類型的唯一子元素的元素。6.:only-of-type選擇器知識儲備結構化偽類選擇器:empty選擇器用來選擇沒有子元素或文本內容為空的所有元素。文本內容為空是一點內容都沒有，哪怕是一個空格。7.:empty選擇器知識儲備結構化偽類選擇器:target選擇器用于為頁面中的某個target元素指定樣式。target元素就是頁面中的超鏈接通過#id鏈接到的元素。只有用戶單擊了頁面中的超鏈接，并且跳轉到target元素后，:target選擇器所設置的樣式才會起作用。8.:target選擇器知識儲備結構化偽類選擇器如果對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，可以使用:not選擇器。9.:not選擇器知識導圖任務分析如何讓li橫排？塊元素轉換為行內元素：display：inline-block，使用floatdiv#baike圖標<ul><h1><li><a><img>任務實施任務實施3任務4.3制作“低碳環保網”頭部模塊效果展示知識儲備1.導航菜單對于一個成功的網站，導航菜單是不可缺少的。導航菜單的風格往往也決定了整個網站的風格，因此，很多設計者都投入很多時間和精力來制作各式各樣的導航菜單，從而體現網站的整體架構與風格。知識儲備1.導航菜單<nav><ul><li><ahref="#">主頁</a></li><li><ahref="#">新聞中心</a></li><li><ahref="#">公司簡介</a></li><li><ahref="#">產品展示</a></li><li><ahref="#">關于我們</a></li></ul></nav>目前，大多數導航菜單都是基于列表結構的。設計者在制作時將列表的list-style-type屬性值設置為none，即列表項前不顯示任何項目符號，然后再運用CSS技術來制作風格多樣的導航。知識儲備豎向導航菜單橫向導航菜單導航菜單一般有豎向和橫向兩種顯示方式，將豎向導航菜單轉換成橫向導航菜單最重要的環節就是設置<li>標簽為浮動（float）。1.導航菜單知識儲備1.導航菜單知識儲備在HTML中，元素之間的關系有父子關系、祖先后代關系、兄弟關系。父子關系中父元素直接包含子元素，祖先后代關系中祖先元素直接或間接包含后代元素，兄弟關系中元素擁有共同父元素。2.關系選擇器知識儲備2.關系選擇器

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

子元素選擇器1知識儲備2.關系選擇器用來選擇某個元素的第一級子元素，由符號“>”連接前后兩個元素。語法：父元素>子元素。1.子元素選擇器例如：h1>strong：選擇的是h1的第一級子元素strong元素。知識儲備2.關系選擇器后代選擇器選擇某個元素的后代，用“空格”連接，語法：祖先元素

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

后代strong元素。知識儲備2.關系選擇器子元素選擇器選擇的是某個元素的第一級子元素，而后代選擇器，選擇的是某個元素的后代，包括子元素和子元素的子元素，即所有的后代元素。子元素選擇器和后代選擇器有什么區別？父子父子孫子元素選擇器后代選擇器知識儲備2.關系選擇器思考：誰的顏色為紅色？誰的背景顏色為粉色？子元素選擇器選擇的是某個元素的第一級子元素，而后代選擇器，選擇的是某個元素的后代，包括子元素和子元素的子元素，即所有的后代元素。子元素選擇器和后代選擇器有什么區別？知識儲備2.關系選擇器兄弟選擇器用來選擇與某元素位于同一個父元