Web前端技術(shù) 課件 模塊二 任務(wù)2 主頁尾部實(shí)現(xiàn)

主頁尾部實(shí)現(xiàn)Web前端技術(shù)主講老師：姜文秀延時(shí)符CONTENTS目錄01任務(wù)描述03知識(shí)點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識(shí)05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述制作網(wǎng)頁時(shí)一般會(huì)重視頭部和主體部分，但是頁面尾部也是一個(gè)不可忽視的部分，在頁尾可以增加聯(lián)系方式、友情鏈接、服務(wù)、社交網(wǎng)站等，增加網(wǎng)站的宣傳渠道，還可以提供企業(yè)的聯(lián)系的方式，建立用戶對(duì)網(wǎng)站的信任感等。本任務(wù)依然采用flex布局方式，使用<div>、<ul>、<span>和<p>標(biāo)簽，完成“奕品堂音樂”網(wǎng)站主頁尾部。延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握標(biāo)簽ul/li和p的使用方法；掌握CSS中background、color、cursor、list-style的設(shè)置方法；掌握CSS樣式的三大特性和：hover等偽類的使用方法。知識(shí)目標(biāo)能靈活使用背景添加鼠標(biāo)經(jīng)過時(shí)變化效果；能夠根據(jù)需求靈活選擇基礎(chǔ)選擇器或復(fù)合選擇器進(jìn)行樣式添加；能夠根據(jù)CSS樣式的三大特性合理的使用選擇器設(shè)置樣式。技能目標(biāo)延時(shí)符培養(yǎng)尊重規(guī)則，尊重法律的意識(shí)；培養(yǎng)能夠初步搜集、處理、運(yùn)用社會(huì)信息的方法和技能；培養(yǎng)探索精神。素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符p標(biāo)簽ul標(biāo)簽CSS三大特性background背景屬性文本對(duì)齊鼠標(biāo)外觀文本顏色列表樣式偽類選擇器HTML標(biāo)簽：p標(biāo)簽延時(shí)符網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在HTML標(biāo)簽中，<p>標(biāo)簽用于定義段落，它可以將整個(gè)網(wǎng)頁分為若干個(gè)段落。文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。段落和段落之間保有空隙。頁面中經(jīng)常使用列表來布局的，比如新聞標(biāo)題、導(dǎo)航欄、友情鏈接、商品羅列等都可以使用列表實(shí)現(xiàn)。列表最大的特點(diǎn)就是整齊、整潔、有序，它作為布局會(huì)更加自由和方便。根據(jù)使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。這里先介紹使用較多的無序列表標(biāo)簽<ul>。HTML標(biāo)簽：列表標(biāo)簽延時(shí)符<ul>標(biāo)簽表示HTML頁面中項(xiàng)目的無序列表，一般會(huì)以項(xiàng)目符號(hào)呈現(xiàn)列表項(xiàng)，而列表項(xiàng)使用<li>標(biāo)簽定義。無序列表的基本語法格式如下:<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>...</ul>無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。列表的使用視頻講解CSS樣式：CSS的三大特性延時(shí)符CSS有三個(gè)特別重要的特性，分別是層疊性、繼承性和優(yōu)先級(jí)。(1) 層疊性。相同選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突問題。層疊性原則：樣式?jīng)_突，遵循的原則是就近原則，哪個(gè)樣式離結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式。樣式不沖突，不會(huì)層疊。(2) 繼承性。CSS具有繼承性，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式，例如text-，font-，line-這些元素開頭的可以繼承，以及color屬性。(3) 優(yōu)先級(jí)。當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生。選擇器相同，則執(zhí)行層疊性。選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行。不同選擇器的權(quán)重可以認(rèn)為是以下值，通配符和繼承權(quán)重為0,標(biāo)簽選擇器為1,類(偽類)選擇器為10,id選擇器100,行內(nèi)樣式表為1000,!important無窮大。CSS樣式：background背景屬性延時(shí)符通過CSS背景屬性，可以給頁面元素添加背景樣式。背景屬性可以設(shè)置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。背景圖片。background-image屬性描述了元素的背景圖像。background-image:none（無背景圖，默認(rèn)值）|url(使用絕對(duì)或相對(duì)地址指定背景圖像)（2）背景平鋪。默認(rèn)情況下，背景圖片會(huì)將整個(gè)區(qū)域填滿，如果圖片較小，會(huì)平鋪填滿整個(gè)區(qū)域，如果不需要在HTML頁面上對(duì)背景圖像進(jìn)行平鋪，可以使用background-repeat屬性。background-repeat:repeat（背景圖像在縱向和橫向平鋪，默認(rèn)值）|no-repeat（背景圖像不平鋪）|repeat-x（背景圖像在橫向平鋪）|repeat-y（背景圖像在縱向平鋪）；（3）背景圖片位置。當(dāng)背景圖片小于區(qū)域大小，并在不平鋪的情況下，可以利用background-position屬性改變背景圖片在區(qū)域中的位置。background-position:x（x坐標(biāo)）y（y坐標(biāo)）;CSS樣式：background背景屬性延時(shí)符(4)背景位置固定。如果在一個(gè)帶垂直滾動(dòng)條的頁面中，想將背景圖固定住，不隨著滾動(dòng)條滾動(dòng)，可以使用background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。background-attachment后期可以制作視差滾動(dòng)的效果。background-attachment:scroll（背景圖像是隨對(duì)象內(nèi)容滾動(dòng)）|fixed（背景圖像固定）；(5)背景復(fù)合寫法。為了簡(jiǎn)化背景屬性的代碼，我們可以將以上這些屬性合并簡(jiǎn)寫在同一個(gè)屬性background中。從而節(jié)約代碼量.當(dāng)使用簡(jiǎn)寫屬性時(shí)，沒有特定的書寫順序,一般習(xí)慣約定順序?yàn)椋篵ackground:背景顏色背景圖片地址背景平鋪背景圖像滾動(dòng)背景圖片位置。語法如下：background:transparenturl(image.jpg)repeat-yfixedtop;(6)背景半透明效果。CSS3為我們提供了背景顏色半透明的效果。例如background:rgba(0,0,0,0.3);最后一個(gè)參數(shù)是alpha透明度，取值范圍在0-1之間，我們習(xí)慣把0.3的0省略掉，寫為background:rgba(0,0,0,.3);CSS樣式：cursor鼠標(biāo)外觀延時(shí)符cursor用于設(shè)置鼠標(biāo)的外觀，設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。語法如下：li{cursor:pointer;}鼠標(biāo)外觀的屬性值和對(duì)應(yīng)效果如表2-2-1所示。CSS樣式：文本顏色和列表樣式延時(shí)符color屬性用于定義文本的顏色。其取值方式和background-color一樣，也有三種，分別是預(yù)定義顏色值、十六進(jìn)制和RGB代碼。list-style屬性用于設(shè)置列表的樣式。無序列表ul和有序列表ol默認(rèn)在每個(gè)列表項(xiàng)前會(huì)有項(xiàng)目符號(hào)或編號(hào)，可以通過list-style:none去掉默認(rèn)樣式。這也是開發(fā)頁面時(shí)常用的方法。CSS樣式：偽類選擇器：hover延時(shí)符偽類選擇器由多種用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第1個(gè)，第n個(gè)元素。偽類選擇器書寫最大的特點(diǎn)是用冒號(hào)（:）開頭，比如:hover、:first-child。因?yàn)閭晤愡x擇器很多，比如有鏈接偽類、結(jié)構(gòu)偽類等，這里先介紹常用的鏈接偽類選擇器。font-family:字體。為了確保生效，請(qǐng)按照LVHA的循順序聲明:link－:visited－:hover－:active。鏈接偽類選擇器有四種，具體如表2-2-2所示。背景及偽類使用視頻講解任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符頁面尾部首先嵌套一個(gè)<div>版心，用于設(shè)置內(nèi)容居中。版心中包括鏈接分類、版權(quán)文字2個(gè)部分組成，鏈接分類被放在<ul>標(biāo)簽中，每一個(gè)部分使用一個(gè)<li>標(biāo)簽，每個(gè)<li>標(biāo)簽中使用<p>標(biāo)簽設(shè)置背景圖片，文字放在<span>標(biāo)簽中。版權(quán)文字區(qū)域放在<div>標(biāo)簽中，每一行單獨(dú)放在一個(gè)<p>標(biāo)簽中，所有的文字和|使用<span>標(biāo)簽。樣式分析12ul.classify使用flex布局，內(nèi)