web前端技術(shù) 課件 模塊２ 主頁實(shí)現(xiàn)

入駐歌手欄目實(shí)現(xiàn)Web前端技術(shù)延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述一個(gè)吸引用戶的網(wǎng)頁，往往包含很多圖片。合理的使用圖文混排，能夠讓頁面內(nèi)容更豐富，更引人入勝。本任務(wù)采用目前流行的flex布局方式，結(jié)合<div>、<span>和<img/>標(biāo)簽，完成“奕品堂音樂”網(wǎng)站主頁上的“入駐歌手”欄目。效果如圖2-1-1所示。延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握添加外部CSS樣式的方法和CSS后代選擇器的含義及使用方法；掌握CSS彈性布局flex多行彈性元素控制方法；掌握文本添加和樣式設(shè)置方法。知識目標(biāo)能夠根據(jù)效果圖使用合理標(biāo)簽進(jìn)行頁面結(jié)構(gòu)搭建；能為頁面添加外部CSS樣式；能夠根據(jù)需求靈活選擇各類基礎(chǔ)選擇器進(jìn)行樣式添加；技能目標(biāo)延時(shí)符培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)良好的審美觀念；培養(yǎng)團(tuán)隊(duì)合作的意識。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符span標(biāo)簽圖像標(biāo)簽外部樣式文件CSS的元素顯示模式字體樣式行高后代選擇器彈性布局屬性HTML標(biāo)簽：span標(biāo)簽延時(shí)符<span>標(biāo)簽是沒有語義的，它就是一個(gè)盒子，用來裝內(nèi)容。span意為跨度、跨距。<span>標(biāo)簽用來布局，一行上可以多個(gè)<span>，寬度不可以設(shè)置，大小由內(nèi)容撐開，上下邊距不可以設(shè)置。前面的任務(wù)已經(jīng)介紹過圖像標(biāo)簽<img/>和它的src、width、height屬性。要想在網(wǎng)頁中靈活地使用圖像，僅依靠src屬性是遠(yuǎn)遠(yuǎn)不夠的，為此HTML還為<img/>標(biāo)簽提供了其他的屬性。HTML標(biāo)簽：圖像標(biāo)簽延時(shí)符CSS樣式：引入外部樣式文件延時(shí)符外部樣式也可稱之為外鏈?zhǔn)交蜴溔胧?，是將所有的CSS樣式寫在一個(gè)或多個(gè)擴(kuò)展名為“.css”的樣式文件中，通過<link/>標(biāo)簽將外部樣式表文件鏈接到需要使用該樣式的HTML文件中，其基本語法格式如下：外部樣式及元素顯示模式視頻講解<linkrel="stylesheet"type="text/css"href="CSS文件的路徑"/>(1) rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。(2) type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。在一些寬松的語法格式中，type屬性可以省略，但是建議寫全。(3) href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑，建議使用相對路徑，這個(gè)屬性的設(shè)置最為關(guān)鍵。CSS樣式：CSS的元素顯示模式延時(shí)符網(wǎng)頁的標(biāo)簽非常多，在不同地方會(huì)用到不同類型的標(biāo)簽，了解它們的特點(diǎn)可以更好的布局網(wǎng)頁。元素顯示模式就是元素（標(biāo)簽）以什么方式進(jìn)行顯示，比如<div>獨(dú)占一行，比如一行可以放多個(gè)<span>。HTML元素一般分為塊級元素和行內(nèi)元素兩種類型。(1)

塊級元素。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。塊級元素的特點(diǎn)：①獨(dú)占一行。②高度，寬度、外邊距以及內(nèi)邊距都可以控制。③寬度默認(rèn)是容器（父級寬度）的100%。④是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級元素。注意：文字類的元素內(nèi)不能使用塊級元素。<p>標(biāo)簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>。同理，<h1>-<h6>等都是文字類塊級標(biāo)簽，里面也不能放其他塊級元素。CSS樣式：CSS的元素顯示模式延時(shí)符(2)

行內(nèi)元素。常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽是最典型的行內(nèi)元素。有的地方也將行內(nèi)元素稱為內(nèi)聯(lián)元素。行內(nèi)元素的特點(diǎn)：①相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)。②高、寬直接設(shè)置是無效的。③默認(rèn)寬度就是它本身內(nèi)容的寬度。④行內(nèi)元素只能容納文本或其他行內(nèi)元素。注意：鏈接里面不能再放鏈接。特殊情況鏈接<a>里面可以放塊級元素，但是給<a>轉(zhuǎn)換一下塊級模式最安全。CSS樣式：CSS的元素顯示模式延時(shí)符（3）行內(nèi)塊元素。在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽，<img/>、<input/>、<td>，它們同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)。有些資料稱它們?yōu)樾袃?nèi)塊元素。行內(nèi)塊元素的特點(diǎn)：①和相鄰行內(nèi)元素（行內(nèi)塊）在一行上，但是他們之間會(huì)有空白縫隙。一行可以顯示多個(gè)（行內(nèi)元素特點(diǎn)）。②默認(rèn)寬度就是它本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）。③高度，行高、外邊距以及內(nèi)邊距都可以控制（塊級元素特點(diǎn)）。CSS樣式：CSS字體樣式屬性延時(shí)符為了方便控制頁面中的文字的外觀，CSS提供了一些字體有關(guān)的樣式屬性，具體如下。font-size：字號大小。font-size屬性用于設(shè)置字號，該屬性的值可以使用相對長度單位或絕對長度單位。相對長度單位有em，相對于當(dāng)前對象內(nèi)文本的字體尺寸的倍率；px，像素，是目前使用最頻繁，最常用的單位，推薦使用。絕對長度單位有：in，英寸；cm，厘米，這個(gè)單位很大，慎用；mm，毫米；pt，點(diǎn)。font-family:字體。(5)font：綜合設(shè)置字體樣式font屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法如下。選擇器{font:font-stylefont-weightfont-size/line-heightfont-family}使用font屬性時(shí)，必須按上面語法格式中的順序書寫，各個(gè)屬性以空格隔開。(4)font-style：字體風(fēng)格font-style屬性用于設(shè)置字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體。其可用屬性值默認(rèn)為normal，表示標(biāo)準(zhǔn)的字體樣式。italic和oblique都用于定義斜體，兩者在顯示效果上并沒有本質(zhì)區(qū)別。(3)font-weight：字體加粗。取值為normal（正常粗細(xì)）、bold（加粗）、bolder（更粗）、lighter（更細(xì)）、100-900（100的整數(shù)，定義從細(xì)到粗，其中400等同于normal，700等同于bold，值越大字體越粗(2)font-family:字體。font-family屬性用于設(shè)置文本字體。只要是操作系統(tǒng)正常安裝的字體，在網(wǎng)頁中都可以使用，如宋體、楷體、微軟雅黑、黑體等?？梢詾槲谋就瑫r(shí)設(shè)定幾個(gè)不同字體，中間用逗號分隔。CSS樣式：line-height行高延時(shí)符line-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱之為行高。line-height常用的屬性值單位有3種，分別為像素px、相對值em和百分比%，實(shí)際工作中使用最多的是像素px。注意：CSS沒有給我們提供單行文字垂直居中的代碼，這里可以使用一個(gè)小技巧來實(shí)現(xiàn)，就是讓文字的行高等于盒子的高度就可以讓文字在當(dāng)前盒子內(nèi)垂直居中。CSS樣式：后代選擇器延時(shí)符在CSS中，可以根據(jù)選擇器的類型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對基本選擇器進(jìn)行組合形成的。復(fù)合選擇器可以更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽），復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的，常用的復(fù)合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等。后代選擇器又稱為包含選擇器，可以選擇父元素里面后代元素。其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代?；菊Z法如下：元素1元素2{樣式聲明}上述語法表示選擇元素1里面的所有元素2(后代元素)。元素1和元素2中間用空格隔開，元素1是父級，元素2是后代，最終選擇的是元素2，元素2可以是兒子，也可以是孫輩等，只要是元素1的后代即可，元素1和元素2可以是任意基礎(chǔ)選擇器。CSS樣式：justify-content延時(shí)符flex布局中，justify-content屬性定義了項(xiàng)目在主軸上的對齊方式，使用這個(gè)屬性前一定要確定好主軸是哪個(gè)。justify-content屬性值如表2-1-4所示。CSS樣式：flex-wrap延時(shí)符flex布局中，默認(rèn)情況下項(xiàng)目都排在一條線（又稱為“軸線”）上，flex布局中默認(rèn)是不換行的。如果裝不下，會(huì)縮小子元素的寬度，放到父元素里面。flex-wrap屬性默認(rèn)值nowrap，表示不換行。wrap表示換行。后代選擇器及彈性布局屬性視頻講解任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符“入駐歌手”欄目由3個(gè)部分組成，分別為標(biāo)題、圖文混排（圖片、圖片說明文字）、仿按鈕文字。所有的部分用<div>標(biāo)簽進(jìn)行區(qū)域劃分，所有的文字使用<span>標(biāo)簽，圖片使用<img/>標(biāo)簽定義。樣式分析1div.title、div.contentlist盒子使用flex布局，內(nèi)容為水平分布，主軸方向?yàn)樗?，div.title使用justify-content:space-between使首尾內(nèi)容位于起點(diǎn)和終點(diǎn)。2div.content、div.wenzi盒子使用flex布局，內(nèi)容為垂直分布，主軸方向?yàn)榇怪?。這兩個(gè)盒子均使用justify-content:space-around;使內(nèi)容周圍分配相同的空間。3設(shè)置各部分的邊距、字體、背景等屬性，使欄目效果跟效果圖一致。延時(shí)符任務(wù)實(shí)施視頻講解謝謝觀看！主頁尾部實(shí)現(xiàn)Web前端技術(shù)延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述制作網(wǎng)頁時(shí)一般會(huì)重視頭部和主體部分，但是頁面尾部也是一個(gè)不可忽視的部分，在頁尾可以增加聯(lián)系方式、友情鏈接、服務(wù)、社交網(wǎng)站等，增加網(wǎng)站的宣傳渠道，還可以提供企業(yè)的聯(lián)系的方式，建立用戶對網(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等偽類的使用方法。知識目標(biāo)能靈活使用背景添加鼠標(biāo)經(jīng)過時(shí)變化效果；能夠根據(jù)需求靈活選擇基礎(chǔ)選擇器或復(fù)合選擇器進(jìn)行樣式添加；能夠根據(jù)CSS樣式的三大特性合理的使用選擇器設(shè)置樣式。技能目標(biāo)延時(shí)符培養(yǎng)尊重規(guī)則，尊重法律的意識；培養(yǎng)能夠初步搜集、處理、運(yùn)用社會(huì)信息的方法和技能；培養(yǎng)探索精神。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符p標(biāo)簽ul標(biāo)簽CSS三大特性background背景屬性文本對齊鼠標(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)目符號呈現(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)之間沒有順序級別之分，是并列的。<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。列表的使用視頻講解CSS樣式：CSS的三大特性延時(shí)符CSS有三個(gè)特別重要的特性，分別是層疊性、繼承性和優(yōu)先級。(1) 層疊性。相同選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突問題。層疊性原則：樣式?jīng)_突，遵循的原則是就近原則，哪個(gè)樣式離結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式。樣式不沖突，不會(huì)層疊。(2) 繼承性。CSS具有繼承性，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號。恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式，例如text-，font-，line-這些元素開頭的可以繼承，以及color屬性。(3) 優(yōu)先級。當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級的產(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(使用絕對或相對地址指定背景圖像)（2）背景平鋪。默認(rèn)情況下，背景圖片會(huì)將整個(gè)區(qū)域填滿，如果圖片較小，會(huì)平鋪填滿整個(gè)區(qū)域，如果不需要在HTML頁面上對背景圖像進(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（背景圖像是隨對象內(nèi)容滾動(dòng)）|fixed（背景圖像固定）；(5)背景復(fù)合寫法。為了簡化背景屬性的代碼，我們可以將以上這些屬性合并簡寫在同一個(gè)屬性background中。從而節(jié)約代碼量.當(dāng)使用簡寫屬性時(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è)置或檢索在對象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。語法如下：li{cursor:pointer;}鼠標(biāo)外觀的屬性值和對應(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)目符號或編號，可以通過list-style:none去掉默認(rèn)樣式。這也是開發(fā)頁面時(shí)常用的方法。CSS樣式：偽類選擇器：hover延時(shí)符偽類選擇器由多種用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第1個(gè)，第n個(gè)元素。偽類選擇器書寫最大的特點(diǎn)是用冒號（:）開頭，比如:hover、:first-child。因?yàn)閭晤愡x擇器很多，比如有鏈接偽類、結(jié)構(gòu)偽類等，這里先介紹常用的鏈接偽類選擇器。font-family:字體。為了確保生效，請按照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)容為水平分布，主軸方向?yàn)樗健l.classify里面的li也使用flex布局，內(nèi)容為垂直分布，主軸方向?yàn)榇怪?。li里面的p標(biāo)簽設(shè)置大小后添加背景圖片，并添加鼠標(biāo)經(jīng)過時(shí)更換背景圖。

3div.copy設(shè)置為居中。延時(shí)符任務(wù)實(shí)施視頻講解div.main1版心居中。4設(shè)置各部分的邊距、字體、對齊方式等屬性，使頁面尾部效果跟效果圖一致。謝謝觀看！頭部導(dǎo)航欄目實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述網(wǎng)頁中的導(dǎo)航菜單如字典的檢索條目，也如導(dǎo)航的地圖，指引著用戶快速進(jìn)入不同的功能頁面里，基本上在線的網(wǎng)站都會(huì)有導(dǎo)航菜單，大部分是一級導(dǎo)航菜單，也有不少是功能更復(fù)雜的二級或者多級菜單，總的來說，就是根據(jù)網(wǎng)站的內(nèi)容把它們分類，并且以導(dǎo)航菜單的形式展示。因此，設(shè)計(jì)導(dǎo)航菜單是網(wǎng)頁設(shè)計(jì)必須熟練掌握的技能，導(dǎo)航菜單設(shè)計(jì)有多種方案，目前用得最多的是利用列表與浮動(dòng)布局相結(jié)合的技術(shù)實(shí)現(xiàn)。本小節(jié)將以音樂網(wǎng)站為例設(shè)計(jì)包含LOGO、搜索框等組合的導(dǎo)航菜單。延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握輸入標(biāo)簽和行內(nèi)span標(biāo)簽的方法；掌握CSS子代選擇符的方法；掌握CSS后代選擇符的方法。知識目標(biāo)能夠根據(jù)效果圖使用合理標(biāo)簽進(jìn)行頁面結(jié)構(gòu)搭建；能學(xué)會(huì)規(guī)劃導(dǎo)航菜單的方法；能夠正確采用子代選擇符和后代選擇符設(shè)置樣式；能利用border-radius、background-position和text-indent設(shè)置搜索框。技能目標(biāo)延時(shí)符培養(yǎng)細(xì)致認(rèn)真的工作態(tài)度；培養(yǎng)與他人合作溝通的能力。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符表單輸入標(biāo)簽結(jié)構(gòu)化偽類選擇器border-radius屬性text-indent屬性子代選擇符/后代選擇符彈性布局之flex屬性float屬性HTML標(biāo)簽：表單延時(shí)符網(wǎng)站所具有的功能不僅僅是展示信息給用戶，同時(shí)還能接收用戶提交的信息。我們常見的登錄注冊、點(diǎn)餐取貨等都是能夠?qū)崿F(xiàn)交互功能的系統(tǒng)，在前端設(shè)計(jì)中，實(shí)現(xiàn)交互功能重要的HTML標(biāo)簽就是表單，掌握表單的相關(guān)內(nèi)容對以后學(xué)習(xí)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)有很大幫助。表單不是表格，既不用來顯示數(shù)據(jù)，也不用來布局頁面，它提供了一個(gè)交互的容器，在其中放置了多種標(biāo)簽用于與用戶進(jìn)行互動(dòng)，比如登錄表單中有文本輸入框、密碼框、提交按鈕和復(fù)選框等標(biāo)簽，留言板表單中有多行文本框、文件上傳和提交按鈕等標(biāo)簽，當(dāng)用戶輸入數(shù)據(jù)后，點(diǎn)擊提交按鈕，表單會(huì)收集所有填入的數(shù)據(jù)一并通過網(wǎng)絡(luò)提交給后臺系統(tǒng)服務(wù)器端進(jìn)行處理，這就屬于動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)的范疇了。我們只需要掌握表單的設(shè)計(jì)，至于提交之后數(shù)據(jù)處理過程不在本書的知識范圍內(nèi)。表單的語法：<formname=“表單名稱”action=“表單處理程序”method=“數(shù)據(jù)傳送方式”>……</form>HTML標(biāo)簽：表單延時(shí)符在表單<form>標(biāo)簽中，可以設(shè)置表單的基本屬性，包括表單名稱、處理程序和傳送方式等。一般情況下，表單的處理程序action屬性和傳送方式method屬性是必不可少的參數(shù)，action屬性用于指定表單數(shù)據(jù)提交到哪個(gè)地址進(jìn)行處理，method用于指定數(shù)據(jù)提交到服務(wù)器時(shí)使用哪種HTTP提交方法，有兩個(gè)值：get和post。（1） GET。get方法是通過URL傳遞給程序，數(shù)據(jù)容量小，且數(shù)據(jù)內(nèi)容可在URL中直接查看，非常不安全。（2） POST。post方法將表單中的數(shù)據(jù)放在表單數(shù)據(jù)體中，按照變量和值相對應(yīng)的方式傳遞到處理程序，它能傳輸大容量數(shù)據(jù)，且數(shù)據(jù)內(nèi)容對用戶不可見，非常安全。method的默認(rèn)值是post。網(wǎng)頁除了向用戶傳遞信息外，還可以讓用戶與網(wǎng)頁進(jìn)行互動(dòng)，HTML5提供了多種輸入標(biāo)簽實(shí)現(xiàn)互動(dòng)功能，比如輸入框、密碼框、單選按鈕、復(fù)選按鈕、菜單列表和提交按鈕等，一般來說，輸入標(biāo)簽需要放在表單標(biāo)簽<form></form>里，但隨著移動(dòng)設(shè)備的普及，前端技術(shù)不斷發(fā)展，目前無需表單也可以完成與服務(wù)器端的信息交互功能。<input>是一個(gè)輸入簇標(biāo)簽，通過其type屬性決定不同的表現(xiàn)形式，如<inputtype=”text”>為單行文本框，<inputtype=”password”>為密碼框，<inputtype=”radio”>為單選按鈕等，熟練掌握這些屬性，就能夠得心應(yīng)手地設(shè)計(jì)互動(dòng)頁面。HTML標(biāo)簽：輸入標(biāo)簽延時(shí)符表單視頻講解本任務(wù)案例使用單行文本框來設(shè)計(jì)搜索框，代碼如下：<inputtype="text"placeholder="音樂/視頻/電臺/用戶">它的表現(xiàn)形式如圖2-4-4所示，placeholder屬性規(guī)定可描述輸入字段預(yù)期值的簡短的提示信息，該提示會(huì)在用戶輸入值之前顯示在輸入框中。（本例中是提示可輸入的搜索關(guān)鍵詞類型）。當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，提示信息會(huì)自動(dòng)消失，如圖2-4-5所示。

圖2-3-4placeholder初始效果圖圖2-3-5placeholder單擊文本框后效果圖CSS樣式：結(jié)構(gòu)化偽類選擇器延時(shí)符結(jié)構(gòu)化偽類選擇器是CSS3中新增加的選擇器。作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素。優(yōu)勢：減少對于HTML中類的依賴，有利于保持代碼整潔。場景：常用于查找某父級選擇器中的子元素。常用的結(jié)構(gòu)化偽類選擇器如下：（1） :first-child和:last-child:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)或者最后一個(gè)子元素設(shè)置樣式。例如：ulli:first-child表示為父元素ul的第一個(gè)子元素li設(shè)置樣式。ulli:last-child表示為父元素ul中最后一個(gè)li元素設(shè)置樣式。（2） :nth-child(n)和:nth-last-child(n):nth-child(n)用于選擇作為其父元素的第n個(gè)子元素（n>=1）:nth-last-child(n)用于選擇作為其父元素的倒數(shù)第n個(gè)子元素（n>=1）例如：ulli:nth-child(2)表示為父元素ul的第二個(gè)子元素li設(shè)置樣式。ulli:nth-last-child(2)表示為父元素ul的倒數(shù)第二個(gè)子元素li設(shè)置樣式。CSS樣式：border-radius屬性延時(shí)符border-radius允許設(shè)置元素的外邊框圓角，它有兩個(gè)單位，一個(gè)是絕對單位，比如px、pt、em等，一個(gè)是相對單位，比如%。屬性值設(shè)置與margin、padding一樣，可分別設(shè)置為單值（同時(shí)四個(gè)角）、雙值（上下-左右）、三值（上-左右-下）和四值（上-右-下-左）。有個(gè)常用的設(shè)置方法為border-radius：50%，如果原圖是正方形，則設(shè)置后為正圓形，如果原因是長方形，則設(shè)置后為橢圓形，如下圖2-3-9和2-3-10所示：圖2-3-9使用border-radius將正方形變?yōu)檎龍A圖2-3-10使用border-radius將長方形變?yōu)闄E圓CSS樣式：text-indent屬性延時(shí)符text-indent屬性規(guī)定文本塊中首行文本的縮進(jìn)。在本例中設(shè)置該屬性是為了確保用戶輸入的文本的起始位置在放大鏡后面，而不會(huì)覆蓋在放大鏡圖標(biāo)上。當(dāng)頁面中有大量段落時(shí)，使用該屬性可以快速設(shè)置首行文本的縮進(jìn)。搜索框樣式設(shè)置視頻講解CSS樣式：子代選擇符/后代選擇符延時(shí)符網(wǎng)頁中的元素，具有明顯的層級關(guān)系?？梢岳盟麄兊南鄬ξ恢煤碗`屬關(guān)系，來定位元素，以簡化選擇符的設(shè)計(jì)。層級關(guān)系相關(guān)的選擇符有兩種：子代選擇符和后代選擇符。（1） 子代選擇符：格式：選擇符A>選擇符B。作用：訪問選擇符A下的所有選擇符B（只訪問到下一級，只有一級）。（2） 后代選擇符：格式：選擇符A選擇符B。作用：訪問選擇符A下的所有選擇符B（無論嵌套多少級）。子代選擇符/后代選擇符視頻講解CSS樣式：彈性布局之flex屬性延時(shí)符在前面的章節(jié)中已經(jīng)講過flex彈性布局的幾個(gè)基本屬性，如需更加細(xì)致地設(shè)計(jì)頁面，還需要掌握flex屬性，flex屬性是flex-grow、flex-shrink、flex-basis三個(gè)屬性的縮寫，用來設(shè)置flex項(xiàng)目的尺寸。先分別介紹flex-grow、flex-shrink、flex-basis屬性的基本用法。（1） flex-grow。該屬性用來設(shè)置當(dāng)父元素的寬度大于所有子元素的寬度的和時(shí)（即父元素會(huì)有剩余空間），子元素如何分配父元素的剩余空間。flex-grow的默認(rèn)值為0，意思是該元素不索取父元素的剩余空間，如果值大于0，表示索取。值越大，索取的越厲害。CSS樣式：彈性布局之flex屬性延時(shí)符（2） flex-shrink。該屬性用來設(shè)置子元素的縮小比例，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)（即子元素會(huì)超出父元素），子元素如何縮小自己的寬度的。flex-shrink的默認(rèn)值為1，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)，子元素的寬度會(huì)減小。值越大，減小的越厲害。如果值為0，表示不減小。（3） flex-basis。該屬性用來設(shè)置元素的寬度，通常情況下大家使用width設(shè)置寬度。但是如果元素上同時(shí)設(shè)置了width和flex-basis，那么width的值就會(huì)被flex-basis覆蓋掉。flex屬性有幾個(gè)常用縮寫如表2-3-1所示：彈性布局之flex屬性視頻講解CSS樣式：float屬性延時(shí)符塊級元素在頁面中會(huì)獨(dú)占一行，可定義寬高，自上而下排列，也就是定位體系中的常規(guī)流。由于塊級元素獨(dú)占一行，即使元素后面有空間，也不會(huì)分配給下一個(gè)塊級元素，如何在一行內(nèi)顯示多個(gè)塊級元素是頁面布局必須要解決的問題，常規(guī)流無法解決，那就要用到浮動(dòng)(float)技術(shù)。浮動(dòng)可以理解為讓某個(gè)塊級元素脫離常規(guī)流，漂浮在常規(guī)流之上。浮動(dòng)的屬性值如表2-3-2。font-family:字體。Float屬性視頻講解任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符“導(dǎo)航菜單”欄目由上下2個(gè)部分組成。上半部分由LOGO、菜單項(xiàng)、搜索框和注冊登錄鏈接結(jié)成，其中LOGO用<img>標(biāo)簽定義，導(dǎo)航菜單項(xiàng)用無序列表<ul><li>標(biāo)簽定義，熱點(diǎn)圖標(biāo)用<img>標(biāo)簽定義，搜索框用<input>標(biāo)簽定義，注冊登錄用<a>標(biāo)簽定義。下半部分是較簡單的一級菜單項(xiàng)，由無序列表<ul><li>標(biāo)簽定義。樣式分析12其中菜單項(xiàng)采用無序列表及浮動(dòng)float設(shè)置。

3搜索框采用border-radius、background-position和text-indent組合設(shè)置。延時(shí)符任務(wù)實(shí)施視頻講解導(dǎo)航菜單欄采用flex彈性盒子放置圖文內(nèi)容，使內(nèi)部的圖文成左右排列。謝謝觀看！熱門推薦及MV欣賞欄目實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

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

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

結(jié)構(gòu)分析——MV速遞延時(shí)符“MV速遞”欄目由上下兩個(gè)部分組成。上半部分由“MV速遞”和“更多”組成，都由<div>標(biāo)簽定義。下半部分就是一個(gè)視頻播放標(biāo)簽<video>。樣式分析——MV速遞12“MV速遞”標(biāo)題欄目尺寸與“熱門推薦”一致，只是少了音樂分類，但總體的結(jié)構(gòu)是一樣的，因此在“MV速遞”中只需要將音樂分類的文字內(nèi)容去掉，其他都不用改變。

3<video>標(biāo)簽尺寸在屬性里就可以定義，CSS只需要設(shè)置邊距即可。延時(shí)符任務(wù)實(shí)施視頻講解“MV速遞”寬度尺寸與“熱門推薦”一致。謝謝觀看！歌曲榜單欄目實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述在日常生活中，我們會(huì)用到表格來顯示數(shù)據(jù)，比如價(jià)目表、產(chǎn)品比較表、課程表等，在網(wǎng)頁中同樣可以使用表格，以幫助在頁面上構(gòu)建文本、圖像或?qū)ο螅ㄟ^表格，可以使網(wǎng)頁排版更加清晰，形式更加簡潔漂亮。本節(jié)任務(wù)是將歌曲榜單以表格形式在頁面中展現(xiàn)。延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握表格的基本概念；掌握table、tr和td標(biāo)簽的用法；掌握表格中常用屬性用法；知識目標(biāo)能夠根據(jù)效果圖合理使用表格進(jìn)行展示；能學(xué)會(huì)常用表格標(biāo)簽的方法；能學(xué)會(huì)合并單元格的用法；技能目標(biāo)延時(shí)符培養(yǎng)細(xì)致認(rèn)真的工作態(tài)度；培養(yǎng)與他人合作溝通的能力；培養(yǎng)獨(dú)立思考的能力。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符表格標(biāo)簽表格相關(guān)屬性HTML標(biāo)簽：表格標(biāo)簽延時(shí)符(1) 表格布局中有三個(gè)重要的標(biāo)簽：<table></table>：表格的開始和結(jié)束標(biāo)簽，行列的布局都在<table>標(biāo)簽內(nèi)。<tr></tr>行標(biāo)簽的開始和結(jié)束。<tb></tb>列標(biāo)簽的開始和結(jié)束。行標(biāo)簽在列標(biāo)簽的外層，不能單獨(dú)使用，其中必須至少有一列。HTML標(biāo)簽：表格標(biāo)簽延時(shí)符(2) 單元格設(shè)置的相關(guān)標(biāo)簽。1) 單元格表頭<th></th>這個(gè)標(biāo)簽用來設(shè)置表格的表頭，作用和列標(biāo)簽相似，只是字體是加黑的。2) 表格寬度屬性和高度屬性width,height。這兩個(gè)屬性可以設(shè)置在<table>標(biāo)簽里，也可以設(shè)置在<tr>和<tb>中，作用域會(huì)不同。3) 設(shè)置表格背景圖片background。這個(gè)屬性和尺寸屬性用法一樣，寫在相應(yīng)的標(biāo)簽里，就是相應(yīng)的背景圖案，設(shè)置的是圖片的路徑。4) 設(shè)置表格行列間距cellspacing。5) 設(shè)置單元格內(nèi)容偏移量cellpadding表格相關(guān)標(biāo)簽的使用方法視頻講解HTML標(biāo)簽：表格標(biāo)簽延時(shí)符(3) 表格的邊框?qū)傩院蛯R模式。靈活的應(yīng)用邊框，可以使表格看起來更加整潔有序。邊框?qū)挾葘傩詁order。邊框的顏色屬性bordercolor。不顯示外邊框frame="void"。設(shè)置frame="hsides"則只顯示上下外邊框。設(shè)置frame="vsides"則只顯示左右外邊框單獨(dú)顯示邊框的frame值分別為：上：above,下：below,左：lhs,右：rhs。設(shè)置表格對齊模式：水平對齊模式：align,表格的align屬性可以設(shè)置對齊模式，center,left,right分別對應(yīng)居中，左對齊，右對齊。垂直對齊模式：valign,和水平對齊模式相似，這個(gè)屬性的值為：middle，top，bottom對應(yīng)了中間對齊，上對齊和下對齊。HTML標(biāo)簽：表格標(biāo)簽延時(shí)符表格行和列的操作。行的合并：rowspan。2）列的合并colspan。3)表格的標(biāo)題標(biāo)簽<caption></caption>。合并行列視頻講解任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符“歌曲榜單”欄目由上下兩部分組成。上半部分是標(biāo)題。上下以分隔線劃分。下半部分是以表格形式展示的榜單內(nèi)容。樣式分析12歌曲榜單單雙行用背景色加以區(qū)分。

3榜單用圖利用陰影樣式顯示。延時(shí)符任務(wù)實(shí)施視頻講解標(biāo)題樣式同MV速遞。4榜單小標(biāo)題與圖標(biāo)用子選擇器和background-position確定位置。

謝謝觀看！新碟上架欄目實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述網(wǎng)頁中的容器空間是有限的，如果容器里需要展示的內(nèi)容超出了容器尺寸，通常的方法是采用輪播或者滾動(dòng)的方式展現(xiàn)，可用CSS的動(dòng)畫功能實(shí)現(xiàn)。本次任務(wù)是將上架的新碟在頁面右側(cè)以上下滾動(dòng)的方式展現(xiàn).延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握CSS動(dòng)畫的基本概念；掌握transform和transition配合設(shè)置動(dòng)畫的方法；掌握animation和@keyframe配合設(shè)置動(dòng)畫的方法；知識目標(biāo)能夠根據(jù)效果圖合理使用動(dòng)畫進(jìn)行展示；能學(xué)會(huì)動(dòng)畫設(shè)置的HTML和CSS方法；能學(xué)會(huì)@keyframe兩種配置方法；技能目標(biāo)延時(shí)符培養(yǎng)分析問題、解決問題的能力；培養(yǎng)良好的審美觀念；培養(yǎng)責(zé)任感、競爭意識、團(tuán)隊(duì)合作和奉獻(xiàn)精神。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符transform和transform-origintransitionanimation使用方法CSS樣式:動(dòng)畫延時(shí)符CSS動(dòng)畫使元素逐漸從一種樣式變?yōu)榱硪环N樣式。CSS動(dòng)畫有三個(gè)主要優(yōu)點(diǎn)：1）能夠非常容易地創(chuàng)建簡單動(dòng)畫，你甚至不需要了解JavaScript就能創(chuàng)建動(dòng)畫。2）動(dòng)畫運(yùn)行效果良好，甚至在低性能的系統(tǒng)上。渲染引擎會(huì)使用跳幀或者其他技術(shù)以保證動(dòng)畫表現(xiàn)盡可能的流暢。而使用JavaScript實(shí)現(xiàn)的動(dòng)畫通常表現(xiàn)不佳（除非經(jīng)過很好的設(shè)計(jì)）。3）讓瀏覽器控制動(dòng)畫序列，允許瀏覽器優(yōu)化性能和效果，如降低位于隱藏選項(xiàng)卡中的動(dòng)畫更新頻率。動(dòng)畫包括兩個(gè)部分：1）描述動(dòng)畫的樣式規(guī)則；2）用于指定動(dòng)畫開始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。CSS樣式：transform和transform-origin延時(shí)符動(dòng)畫的樣式規(guī)則由transform和transform-origin兩個(gè)屬性實(shí)現(xiàn)2D變換。其中transform屬性用于實(shí)現(xiàn)平移、縮放、旋轉(zhuǎn)和傾斜等變換，transform-origin屬性則用于設(shè)置中心點(diǎn)的變換。語法格式如下：<style>選擇器{Transform:屬性值;}</style>CSS樣式：transform和transform-origin延時(shí)符常用屬性值有：平移translate(x,y)平移有三種變化：

translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）。

translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）。

translateY(y)僅垂直方向移動(dòng)（Y軸移動(dòng)）。舉例：transform:translate(50px,50px)；效果??圖所示。解釋：使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動(dòng)50像素。注：坐標(biāo)值可以為負(fù)值或百分比值CSS樣式：transform和transform-origin延時(shí)符縮放scale(x,y)縮放有三種變化：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）。scaleX(x)元素僅水平方向縮放（X軸縮放）。scaleY(y)元素僅垂直方向縮放（Y軸縮放）。

舉例：transform:scale(0.8,1);效果??圖所示。解釋：使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。CSS樣式：transform和transform-origin延時(shí)符旋轉(zhuǎn)rotate(deg)可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；

舉例：transform:rotate(45deg);效果如??圖所示。解釋：使用rotate方法使該元素以中心點(diǎn)為原點(diǎn)旋轉(zhuǎn)45度屬性transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點(diǎn)，比如改變元素原點(diǎn)到左上角，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度，代碼如下：div{transform-origin:lefttop;transform:rotate(45deg);}注：如果是4個(gè)角，可以用lefttop這些，如果想要精確的位置，可以用px像素。CSS樣式：transform和transform-origin延時(shí)符傾斜skew(deg,deg)可使元素在水平和垂直方向上傾斜一定角度，第二個(gè)參數(shù)不寫默認(rèn)為0。

舉例：transform:skew(30deg,0deg);效果右圖所示。解釋：該實(shí)例通過skew方法把元素水平方向上傾斜30度，垂直方向保持不變。Transform使用方法視頻講解CSS樣式：transition延時(shí)符在CSS3引入Transition（過渡）這個(gè)概念之前，CSS是沒有時(shí)間軸的。也就是說，所有的狀態(tài)變化，都是即時(shí)完成。當(dāng)鼠標(biāo)移