Web前端技術(shù) 課件 模塊三 任務(wù)1 歌曲分類頁面實(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ù)描述一個(gè)網(wǎng)站是由多個(gè)頁面組成，主頁是最主要也是內(nèi)容最豐富的頁面，其他的頁面一般會(huì)沿用主頁的頭部尾部內(nèi)容以及總體風(fēng)格，本次任務(wù)要完成歌曲分類頁面，并且頁面能夠響應(yīng)式展示多個(gè)熱門推薦的內(nèi)容。采用flex布局方式結(jié)合媒體查詢，最終頁面布局效果能夠隨著屏幕大小而改變。當(dāng)屏幕寬度大于968像素時(shí)，效果如圖1所示，當(dāng)屏幕寬度小于等于768像素，并且大于500像素時(shí)，效果如圖2所示。延時(shí)符頁面效果圖延時(shí)符圖1圖2學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握媒體查詢的添加方法；掌握flex布局和絕對(duì)定位結(jié)合的使用方法；掌握CSS中文本超出隱藏的設(shè)置方法。知識(shí)目標(biāo)能夠根據(jù)現(xiàn)有頁面制作出另一個(gè)頭尾相同頁面結(jié)構(gòu)的頁面；能夠根據(jù)需求靈活選用不同的布局方式；能夠?yàn)轫撁嫣砑用襟w查詢；技能目標(biāo)延時(shí)符培養(yǎng)分析問題、解決問題的能力；培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)責(zé)任感、競爭意識(shí)、團(tuán)結(jié)合作和奉獻(xiàn)精神；素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符視口text-overflow文本溢出空白處理word-wrapposition定位媒體查詢align-selfHTML標(biāo)簽：視口延時(shí)符viewport視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域，視口可以分為布局視口、視覺視口和理想視口。接下來所講的視口是指理想視口。視口是為了網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定。理想視口是最理想的視口尺寸。需要手動(dòng)添加meta視口標(biāo)簽。標(biāo)簽如下：<metaname="viewport"content="width=device-width,initial-scale=1.0">meta視口標(biāo)簽的主要作用是：布局視口的寬度跟理想視口的寬度一致，也就是設(shè)備有多寬，布局的視口就多寬。CSS樣式：text-overflow文本溢出延時(shí)符如果文本超出其包含元素的范圍，是顯示還是會(huì)被裁剪掉，由text-overflow屬性控制，其規(guī)定當(dāng)文本溢出其包含元素時(shí)的樣式。text-overflow:clip（修剪文本）|ellipsis（使用省略號(hào)代替被修剪的文本）|string（使用給定的字符串來代表被修剪的文本）;text-overflow屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。CSS樣式：white-space空白處理延時(shí)符當(dāng)元素中間帶有空白，可以通過white-space屬性設(shè)置如何處理元素內(nèi)的空白。語法如下：white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;CSS樣式：word-wrap延時(shí)符word-wrap能設(shè)置或檢索當(dāng)前行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行，是一個(gè)指令代碼。語法如下：word-wrap:normal（只在允許的斷字點(diǎn)換行）|break-word（在長單詞或URL地址內(nèi)部進(jìn)行換行）;鼠標(biāo)外觀的屬性值和對(duì)應(yīng)效果如表2-2-1所示。CSS樣式：單行文本溢出延時(shí)符單行文本溢出顯示省略號(hào)，必須滿足三個(gè)條件：1. /*1.先強(qiáng)制一行內(nèi)顯示文本*/2. white-space:nowrap;（默認(rèn)normal自動(dòng)換行）3. /*2.超出的部分隱藏*/4. overflow:hidden;5. /*3.文字用省略號(hào)替代超出的部分*/6. text-overflow:ellipsis;單行文本溢出隱藏視頻講解CSS樣式：偽類選擇器：hover延時(shí)符CSS有三種基本的定位機(jī)制：普通文檔流、浮動(dòng)和絕對(duì)定位。font-family:字體。通過使用position屬性，我們可以選擇4種不同類型的定位，結(jié)合使用top、bottom、left和right屬性進(jìn)行位置的控制。這會(huì)影響元素框生成的方式。position屬性值和含義如下表3-1-2所示：CSS樣式：@media：媒體查詢延時(shí)符媒體查詢是CSS3的新語法。使用媒體查詢@media，可以針對(duì)不同的媒體類型定義不同的樣式，也可以根據(jù)不同的屏幕尺寸設(shè)置不同的樣式。當(dāng)重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。目前針對(duì)不同的手機(jī)、平板等設(shè)備都可以用到媒體查詢。語法如下：font-family:字體。@mediamediatypeand|not|only(mediafeature){css-code}媒體查詢視頻講解CSS樣式：align-self延時(shí)符在彈性盒子的側(cè)軸上，如果某個(gè)彈性元素，需要設(shè)置一個(gè)與其他彈性元素不同的對(duì)齊方式，可以由align-self控制子項(xiàng)自己在側(cè)軸上的排列方式。align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。align-self默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。font-family:字體。任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符歌曲分類頁面的主體內(nèi)容區(qū)域，總體分為頭部區(qū)域、詳情區(qū)域和翻頁區(qū)域。頭部區(qū)域分為左右兩部分，使用flex布局。詳情區(qū)域的每一部分使用獨(dú)立的<div>標(biāo)簽，標(biāo)簽中再嵌套3個(gè)<div>標(biāo)簽對(duì)應(yīng)圖片區(qū)、標(biāo)題區(qū)和作者區(qū)。圖片區(qū)中使用<img/>標(biāo)簽添加圖片，使用<div>標(biāo)簽添加播放數(shù)量，播放數(shù)量區(qū)域使用絕對(duì)定位，其中小圖標(biāo)使用<span>標(biāo)簽的背景添加。翻頁區(qū)域的頁碼等全部使用<a>標(biāo)簽，以方便實(shí)現(xiàn)頁面跳轉(zhuǎn)。樣式分析12詳情區(qū)域div.list-content使用flex水平多行布局。3詳情區(qū)域中詳情塊div.list-content-item使用flex垂直布局。詳情塊中圖片區(qū)div.img使用相對(duì)定位布局，圖片區(qū)中播放統(tǒng)計(jì)div.count使用flex水平布局控制子元素，使用固定布局定位自身位置。播放統(tǒng)計(jì)div.count中的<span>通過設(shè)置大小添加背景顯示小圖標(biāo)。延時(shí)符任務(wù)實(shí)施視頻講解頭部區(qū)域div.list-header使用flex水平布