Web前端技術(shù) 課件 模塊二 任務(wù)4 及MV欣賞欄目實現(xiàn)

熱門推薦及MV欣賞欄目實現(xiàn)Web前端技術(shù)主講老師：***延時符CONTENTS目錄01任務(wù)描述03知識點導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實施延時符任務(wù)描述延時符任務(wù)描述網(wǎng)頁中的通常會用圖文并茂地方式展現(xiàn)需要表達的內(nèi)容，表現(xiàn)形式一般為上方是一張圖片，圖片下方寫著簡要的說明文字，如需了解更多詳情，點擊圖片或者文字均可轉(zhuǎn)到詳情頁面。目前絕大多數(shù)網(wǎng)站都會或多或少采用這種表現(xiàn)形式，同學(xué)們可通過本節(jié)任務(wù)學(xué)習(xí)并掌握相關(guān)技能。從使用頻率來說，視頻播放功能用得并不多，主要取決于網(wǎng)站是否需要通過視頻來展現(xiàn)。在本節(jié)任務(wù)中，音樂需要通過MV視頻向用戶傳遞新歌，因此同學(xué)們通過案例學(xué)習(xí)視頻播放相關(guān)技能。延時符頁面效果圖延時符學(xué)習(xí)目標(biāo)延時符學(xué)習(xí)目標(biāo)掌握通過定義列表設(shè)置欄目的方法；掌握播放視頻標(biāo)簽的方法；掌握CSS背景圖片定位的方法；知識目標(biāo)能夠根據(jù)效果圖使用合理標(biāo)簽進行頁面結(jié)構(gòu)搭建；能學(xué)會設(shè)置欄目的HTML和CSS方法；能學(xué)會視頻播放標(biāo)簽的屬性；技能目標(biāo)延時符培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)能夠舉一反三、總結(jié)規(guī)律的能力；培養(yǎng)探索精神。素養(yǎng)目標(biāo)知識點導(dǎo)圖延時符知識點導(dǎo)圖延時符相關(guān)知識延時符<video>標(biāo)簽<audio>標(biāo)簽background-position高級應(yīng)用HTML標(biāo)簽：<video>標(biāo)簽延時符很多站點都會使用到視頻.HTML5提供了展示視頻的標(biāo)準(zhǔn)。主流瀏覽器都支持<video>標(biāo)簽。<video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。提供了播放、暫停和音量控件功能，也提供了width和height屬性控制視頻的尺寸。<video>支持的視頻格式如表2-4-1所示：HTML標(biāo)簽：<video>標(biāo)簽延時符常用的屬性及值如表2-4-2所示：<video>的使用方法視頻講解HTML標(biāo)簽：<audio>標(biāo)簽延時符頁面中除了可以播放視頻，還可以播放音樂或錄音，HTML5提供了展示音頻的標(biāo)準(zhǔn)。主流瀏覽器都支持<audio>標(biāo)簽。HTML支持3種音頻文件格式：OGG、MP3和WAV。OGG:OGG文件沒有被壓縮，所以音質(zhì)是3種文件格式中最好的，但同時文件大小也是最大的。MP3:MP3文件被壓縮過，所以文件大小會略小一些，同時音質(zhì)也會低于OGG文件。另外，MP3格式是最普遍使用的文件格式。WAV:WAV文件也是被壓縮過，文件大小是3種文件格式中最小的，但音質(zhì)也是最差的。常用的屬性與值如表2-4-3所示：<audio>的使用方法視頻講解CSS樣式：background-position高級應(yīng)用延時符background-position屬性在上節(jié)任務(wù)中已經(jīng)用過，可通過background-position將放大鏡圖標(biāo)從搜索框中向右移動一段距離，在一個網(wǎng)站里，往往會使用多個小圖標(biāo)增加網(wǎng)站的美感，如果一個圖標(biāo)保存為一個文件，那么無論是文件管理、調(diào)用圖標(biāo)還是圖標(biāo)維護都比較麻煩，因此通常把所用的圖標(biāo)放在一張圖片上，稱為圖標(biāo)集。比如圖2-4-6所示。圖2-4-6圖標(biāo)集CSS樣式：background-position高級應(yīng)用延時符當(dāng)使用其中某個圖標(biāo)時，首先將該圖作為背景圖放置在容器里，然后通過設(shè)置寬度和高度以及某圖標(biāo)在圖中的坐標(biāo)位置即可。比如使用空心圈的盾牌圖標(biāo)，它的坐標(biāo)和尺寸如圖2-4-7：圖2-4-7目標(biāo)圖標(biāo)坐標(biāo)和尺寸CSS樣式：background-position高級應(yīng)用延時符其實現(xiàn)的原理如圖2-4-8：圖2-4-8圖標(biāo)集調(diào)用圖片原理圖CSS樣式：background-position高級應(yīng)用延時符按原理圖設(shè)置一個容器，將圖標(biāo)集作為背景圖放入：未設(shè)置坐標(biāo)時，效果如圖2-4-9，圖標(biāo)集的左上角的圖作為背景顯示在容器中：按圖2-4-8進一步設(shè)置CSS，將背景圖分別向左移115px，向上移115px，完成后的效果圖如圖2-4-10所示：圖2-4-9未設(shè)置坐標(biāo)時效果圖2-4-10圖標(biāo)集中調(diào)用圖標(biāo)效果圖background-position高級應(yīng)用視頻講解任務(wù)實施延時符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析——熱門推薦延時符“熱門推薦”欄目由上下2個部分組成。上半部分由“熱門推薦”、音樂分類和“更多”組成，其中“熱門標(biāo)簽”和“更多”由<div>標(biāo)簽定義，音樂分類用無序列表<ul><li>標(biāo)簽定義。下半部分由八個相同結(jié)構(gòu)的欄目組成，每個欄目都是由<dl><dt><dd>組成，<dl>為每個欄目的容器，<dt>里放圖片，<dd>里放說明文字。樣式分析——熱門推薦12音樂分類采用無序列表及flex彈性布局設(shè)置

3音樂欄目通過尺寸定義將八個小欄目排成兩行，每行四個。每個子欄目利用定義列表設(shè)置，其中圖片采用背景圖片定位方式顯示。延時符任務(wù)實施視頻講解熱門推薦欄里的文字用<div>放在左右兩側(cè)，中間的音樂分類采用一級導(dǎo)航菜單的方法

結(jié)構(gòu)分析——MV速遞延時符“MV速遞”欄目由上下兩個部分組成。上半部分由“MV速遞”和“更多”組成，都由<div>標(biāo)簽定義。下半部分就是一個視頻播放標(biāo)簽<video>。樣式分析——MV速遞12“MV速遞”標(biāo)題欄目尺寸與“熱門推薦”一致，只是少了音樂分類，但總體的結(jié)