HTML5 CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目7 動畫頁面制作；項(xiàng)目8 響應(yīng)式布局

《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目7動畫頁面制作任務(wù)7.3制作“科普世界”模塊03目錄Contents任務(wù)7.2制作“漫游科技館”模塊02任務(wù)7.1制作“中國夢”主頁頭部輪播動畫模塊01任務(wù)7.4制作頁腳模塊04教學(xué)目標(biāo)掌握transition過渡屬性掌握transform變形屬性掌握animation動畫屬性熟悉iconfont圖標(biāo)庫的使用方法1.知識目標(biāo)能夠?yàn)樵卦O(shè)置過渡效果

能夠?yàn)樵卦O(shè)置變形效果

能夠創(chuàng)建并使用動畫

能夠在頁面中使用iconfont圖標(biāo)2.技能目標(biāo)樹立科技強(qiáng)國意識

培養(yǎng)精益求精、力求創(chuàng)新的精神

遵守代碼規(guī)范性要求，養(yǎng)成良好的代碼編寫習(xí)慣3.素養(yǎng)目標(biāo)1任務(wù)7.1制作“中國夢”主頁頭部輪播動畫模塊效果展示animation-duration：動畫完成時(shí)間2animation-timing-function：速度曲線3animation-name：動畫名稱1animation-iteration-count：動畫播放次數(shù)5animation-direction：動畫方向6animation-delay：延遲時(shí)間4animation：綜合設(shè)置動畫7知識儲備-animation屬性@keyframesanimationname{keyframes-selector{css-styles;}}

當(dāng)前動畫的名稱

關(guān)鍵幀選擇器，指定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動畫過程中的位置，百分比，from或to

定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動畫狀態(tài)，CSS樣式屬性定義知識儲備-animation屬性1.@keyframes創(chuàng)建動畫@keyframes規(guī)則用于創(chuàng)建動畫，animation屬性只有配合@keyframes規(guī)則才能實(shí)現(xiàn)動畫效果。@keyframes規(guī)則

當(dāng)前動畫的名稱定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動畫狀態(tài)

關(guān)鍵幀選擇器知識儲備-animation屬性1.@keyframes規(guī)則知識儲備-animation屬性2.animation屬性animation-name屬性用于定義使用@keyframes定義的動畫的名稱。1.animation-nameanimation-name:keyframename|none;知識儲備-animation屬性2.animation屬性animation-duration屬性用于定義整個(gè)動畫效果完成所需要的時(shí)間。time常用單位為秒（s）或毫秒（ms）。2.animation-durationanimation-duration:time;知識儲備-animation屬性2.animation屬性animation-timing-function用來規(guī)定動畫的速度曲線，可以定義使用哪種方式來執(zhí)行動畫效果。3.animation-timing-functionanimation-timing-function:value;屬性值描述linear表示過渡過程均勻變化。ease默認(rèn)值。初始速度同linear一致，然后加快，最后慢慢結(jié)束。ease-in表示以慢速開始，然后逐漸加快（淡入效果）ease-out表示以快速開始，然后逐漸減速（淡出效果）ease-in-out表示以慢速開始、中間加快、結(jié)束前減速cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值。取值范圍一般是從0到1的數(shù)值。知識儲備-animation屬性2.animation屬性animation-delay屬性用于定義執(zhí)行動畫效果之前延遲的時(shí)間，也就是規(guī)定動畫什么時(shí)候開始。4.animation-delayanimation-delay:time;

定義動畫開始前延遲的時(shí)間知識儲備-animation屬性2.animation屬性animation-iteration-count屬性用于定義動畫的播放次數(shù)。5.animation-iteration-countanimation-iteration-count:number|infinite;

播放動畫的次數(shù)

指定動畫循環(huán)播放知識儲備-animation屬性2.animation屬性定義當(dāng)前動畫播放的方向，即動畫播放完成后是否逆向交替循環(huán)。6.animation-directionanimation-direction:normal|reverse|alternate|alternative-reverse;

動畫正常播放alternate屬性值會使動畫在奇數(shù)次數(shù)（1、3、5等）正常播放，而在偶數(shù)次數(shù)（2、4、6等）逆向播放

反方向播放動畫

奇數(shù)次逆向播放，偶數(shù)次正向播放知識儲備-animation屬性2.animation屬性animation屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中綜合設(shè)置以上六個(gè)屬性。使用animation屬性時(shí)必須指定animation-name和animation-duration屬性，否則持續(xù)的時(shí)間為0，動畫永遠(yuǎn)不會播放。7.animationanimation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;知識儲備-animation屬性2.animation屬性實(shí)例解析animation屬性的用法動畫效果鼠標(biāo)放到box上時(shí)，小球延遲1s無限次的勻速來回運(yùn)動，持續(xù)時(shí)間為3s。animation-name:slide;/*動畫名稱為slide*/animation-duration:3s;/*動畫持續(xù)時(shí)間為3s*/animation-timing-function:linear;/*速度曲線為linear*/animation-delay:1s;/*動畫延遲時(shí)間為1s*/animation-iteration-count:infinite;/*循環(huán)播放*/animation-direction:alternate;/*奇數(shù)正向播放、偶數(shù)逆向播放*/animation:slide2slinear1sinfinitealternate;設(shè)置哪些屬性？1.創(chuàng)建動畫知識儲備1.用@keyframes創(chuàng)建動畫@keyframes：創(chuàng)建動畫animation-name

：動畫名稱animation-duration

：動畫完成時(shí)間animation-timing-function

：速度曲線animation-delay：延遲時(shí)間animation-iteration-count：動畫播放次數(shù)animation-direction：動畫方向animation：復(fù)合屬性總結(jié)任務(wù)分析<header>div.topdiv.bottom<footer>任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)7.2制作“漫游科技館”模塊效果展示知識儲備可以使元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時(shí)看起來比較平滑，例如漸顯、漸隱等。為什么使用過渡？transition屬性知識儲備transition-duration屬性：持續(xù)時(shí)間2transition-timing-function屬性：速度曲線3transition-property屬性：過渡屬性1transition屬性5transition-delay屬性：延遲時(shí)間4transition屬性知識儲備transition屬性transition-property屬性是設(shè)置應(yīng)用過渡的CSS屬性，例如，寬度屬性、背景屬性等。1.transition-propertytransition-property:none|all|property;示例：transition-property：color；

沒有任何CSS屬性有過渡效果

所有CSS屬性都有過渡效果

應(yīng)用過渡效果的CSS屬性名稱知識儲備transition屬性transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）2.transition-durationtransition-duration:time;示例：transition-duration：2s；知識儲備transition屬性transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“。3.transition-timing-functiontransition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知識儲備transition屬性屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果ease-out指定以慢速結(jié)束（淡出效果）的過渡效果。ease-in-out指定以慢速開始和結(jié)束的過渡效果。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。transition-timing-function屬性的取值transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“。3.transition-timing-function知識儲備transition屬性transition-delay屬性規(guī)定過渡效果何時(shí)開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）。4.transition-property基本語法格式transition-delay:time;正數(shù):過渡動作會延遲觸發(fā)。負(fù)數(shù)：過渡動作會從該時(shí)間點(diǎn)開始，之前的動作被截?cái)唷Ｊ纠簍ransition-delay：1s；知識儲備transition屬性transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性。5.transition基本語法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。例如：transition:border-radius5sease-in-out2s;知識儲備transition屬性使用過渡需要滿足以下兩個(gè)條件：元素必須具有狀態(tài)變化；必須為每個(gè)狀態(tài)設(shè)置不同的樣式-樣式變化。知識儲備transition屬性實(shí)例解析transition屬性的用法動畫效果動畫效果為鼠標(biāo)指針放到div上延遲1s后，div形狀和顏色在2s內(nèi)逐漸變化，過渡效果為以慢速開始，然后逐漸加快。transition-property：形狀、顏色；transition-duration：2s；transition-timing-function：ease-in；transition-delay：1s；transition:all2sease-in1s;設(shè)置哪些屬性？狀態(tài)變化？知識導(dǎo)圖任務(wù)分析任務(wù)7.2制作“中國夢”頁面——漫游科技館模塊鼠標(biāo)放到a上時(shí)，div.cur逐漸顯示，怎么實(shí)現(xiàn)？可以調(diào)整div.cur的位置，剛開始在左側(cè)隱藏，鼠標(biāo)放到a上時(shí)，div.cur位置正常，并使用過渡逐漸顯示div.bottomdiv.cura>img<h3><span><h2>任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)7.3制作“科普世界”模塊效果展示任務(wù)7.3制作“科普世界”模塊知識儲備在CSS3之前，如果需要為頁面設(shè)置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。CSS3出現(xiàn)后，通過transform屬性就可以實(shí)現(xiàn)變形效果，包括元素的縮放、旋轉(zhuǎn)、移動、傾斜等變形效果。平移縮放旋轉(zhuǎn)傾斜CSS3的變形（transform）屬性可以讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形。基本語法格式transform：none|transform-functions;知識儲備transform屬性

默認(rèn)值，表示不進(jìn)行變形

變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表知識儲備transform屬性在CSS3中，使用scale()可以實(shí)現(xiàn)元素縮放效果。該函數(shù)包含兩個(gè)參數(shù)值，分別用來定義寬度和高度的縮放比例?？s放transform:scale(x,y);x、y分別指元素寬度和高度的縮放倍數(shù)。x、y可以是整數(shù)、負(fù)數(shù)和小數(shù)，取值絕對值大于1表示放大元素，取值絕對值小于1表示縮小元素，取值為負(fù)數(shù)表示反轉(zhuǎn)元素。如果y值省略，則高度和寬度的縮放倍數(shù)相同知識儲備transform屬性在CSS3中，使用rotate()可以旋轉(zhuǎn)指定的元素對象。旋轉(zhuǎn)transform:rotate(angle);參數(shù)angle表示旋轉(zhuǎn)的角度，角度單位為deg。角度為正時(shí)，按照順時(shí)針方向旋轉(zhuǎn)；角度為負(fù)時(shí)，按照逆時(shí)針方向旋轉(zhuǎn)。知識儲備transform屬性平移是指元素位置的變化，包括水平移動和垂直移動。在CSS3中，使用translate()可以實(shí)現(xiàn)元素的平移效果。平移transform:translate(x,y);注意：x指元素在水平方向上移動的距離，y指元素在垂直方向上移動的距離。x、y值為帶有長度單位標(biāo)志符的數(shù)值，可以取0、正值和負(fù)值：若取值為正，則表示向右或向下移動；若取值為負(fù)，則表示向左或向上移動。知識儲備transform屬性在CSS3中，使用skew()可以實(shí)現(xiàn)元素傾斜效果。兩個(gè)參數(shù)值分別用來定義X軸和Y軸坐標(biāo)傾斜的角度。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。傾斜transform:skew(x-value,y-value);注意：參數(shù)x-angle和y-angle表示角度值，x-angle表示相對于X軸進(jìn)行傾斜，y-angle表示相對于Y軸進(jìn)行傾斜，如果省略了y-angle，則取默認(rèn)值0。知識儲備transform屬性transform可以設(shè)置多個(gè)變形函數(shù)，多個(gè)函數(shù)之間用空格間隔。多種變形transform:rotate(30deg)scale(1.2)；示例：知識儲備transform屬性變形操作默認(rèn)是以元素的中心點(diǎn)為基準(zhǔn)原點(diǎn)進(jìn)行的，如果要改變原點(diǎn)位置，則可以使用transform-origin屬性來指定，這可以增加變形的靈活性。定義變形原點(diǎn)transform-origin:xy;注意：x表示定義變形原點(diǎn)x坐標(biāo)位置，默認(rèn)值為50%，取值可以為left、center、right、長度值、百分比；y表示定義變形原點(diǎn)y坐標(biāo)位置，取值可以為top、center、bottom、長度值、百分比。湖州職業(yè)技術(shù)學(xué)院/知識儲備變形示例知識導(dǎo)圖任務(wù)分析a>img視頻的高度為兩個(gè)a的高度+之間的距離視頻的寬度為3個(gè)a的寬度+之間的距離<h2>div.top<video>任務(wù)實(shí)施任務(wù)實(shí)施4任務(wù)7.4制作頁腳模塊效果展示知識儲備iconfont圖標(biāo)庫使用iconfont阿里巴巴矢量圖標(biāo)庫官網(wǎng)（/）任務(wù)分析li>iconfont圖標(biāo)鼠標(biāo)放到li上，iconfont圖標(biāo)有變化，這怎么實(shí)現(xiàn)？修改li正常狀態(tài)和鼠標(biāo)放到li上時(shí)的陰影效果變化是有過渡效果<footer><ol>任務(wù)實(shí)施任務(wù)實(shí)施技能拓展拓展任務(wù)：使用過渡、變形屬性制作動態(tài)效果，鼠標(biāo)放到圖像所在窗口，底部“風(fēng)景如畫”文字從底部逐漸出現(xiàn)，“點(diǎn)贊”文字從底部到中間位置，圖像放大到1.2倍，效果如圖所示。技能拓展拓展任務(wù)：動畫關(guān)鍵幀在0%時(shí)旋轉(zhuǎn)到90deg，40%時(shí)旋轉(zhuǎn)到-10deg，，70%時(shí)旋轉(zhuǎn)到10deg，100%時(shí)旋轉(zhuǎn)到0deg。動畫的執(zhí)行時(shí)間為2s循環(huán)播放。THANKYOU《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目8響應(yīng)式布局任務(wù)8.3制作“茶具展示”模塊03目錄Contents任務(wù)8.2制作“導(dǎo)航菜單”模塊02任務(wù)8.1茶文化頁面整體布局01教學(xué)目標(biāo)了解響應(yīng)式布局的概念掌握響應(yīng)式布局實(shí)現(xiàn)步驟掌握Flex布局相關(guān)屬性1.知識目標(biāo)能夠書寫媒體查詢語句

能夠使用Flex屬性進(jìn)行響應(yīng)式布局

能夠使用AI模型工具生成并修改代碼2.技能目標(biāo)?培養(yǎng)審美意識，提高審美能力

培養(yǎng)勇于創(chuàng)新、敢于實(shí)踐的精神

培養(yǎng)自主學(xué)習(xí)和獨(dú)立解決問題的能力3.素養(yǎng)目標(biāo)1任務(wù)8.1茶文化頁面整體布局效果展示中國是茶的故鄉(xiāng)，中華茶文化源遠(yuǎn)流長，博大精深。本項(xiàng)目以“茶文化”為主題，來制作響應(yīng)式頁面。本次任務(wù)完成頁面整體布局。知識儲備AI大模型2響應(yīng)式布局1目錄Contents知識儲備1.響應(yīng)式布局響應(yīng)式布局是一種網(wǎng)頁設(shè)計(jì)和開發(fā)的技術(shù)方法，它的目的是使網(wǎng)頁能夠根據(jù)訪問設(shè)備的不同（如桌面顯示器、平板電腦、智能手機(jī)或其他手持設(shè)備）自動調(diào)整布局、圖片大小、導(dǎo)航菜單以及其他界面元素，從而提供一致且優(yōu)化的用戶體驗(yàn)。知識儲備1.響應(yīng)式布局（1）流體布局：通過百分比單位而非固定像素來定義元素的寬度和高度，使得頁面元素可以根據(jù)容器的大小按比例伸縮。（2）媒體查詢：利用CSS3的媒體查詢功能，可以為不同的設(shè)備和屏幕尺寸定義不同的樣式表規(guī)則，使得樣式能夠根據(jù)設(shè)備的具體條件（如視口寬度）發(fā)生變化。（3）自適應(yīng)圖像：根據(jù)設(shè)備的屏幕尺寸和分辨率加載合適大小的圖片資源，以減少加載時(shí)間和流量消耗。（4）可折疊/隱藏的內(nèi)容區(qū)域：對于較小的屏幕，某些非關(guān)鍵內(nèi)容可以被折疊或完全隱藏，僅在用戶需要時(shí)顯示，這樣可以保持界面的簡潔性和易讀性。（5）字體適配：根據(jù)屏幕尺寸自動調(diào)整字體大小，保證在不同設(shè)備上的可讀性。響應(yīng)式布局的關(guān)鍵技術(shù)手段知識儲備2.AI大模型1.OpenAI的GPT系列GPT-3：可以生成連貫的文本、解答問題、編寫代碼。GPT-4：并且能夠處理更多種類的數(shù)據(jù)輸入，包括圖像、音頻等多媒體信息。知識儲備2.AI大模型阿里云的通義千問：具備多輪對話、邏輯推理、多模態(tài)理解及多種語言支持能力，能夠在多種應(yīng)用場景下提供智能化服務(wù)。

/2.

百度的文心一言（ERNIE?Bot）：整合了大規(guī)模知識圖譜，能夠進(jìn)行高效的對話交互、文本生成和知識問答。/知識儲備2.AI大模型4.?華為的盤古大模型：專注于分布式訓(xùn)練技術(shù)和全棧式AI基礎(chǔ)設(shè)施的研究，展示了在國產(chǎn)計(jì)算平臺上完成超大規(guī)模模型訓(xùn)練的可能性。

/

5.?科大訊飛的星火認(rèn)知大模型：是中國本土研發(fā)的大型中文預(yù)訓(xùn)練模型，具有上千億參數(shù)，涵蓋文本生成、語言理解、知識問答、邏輯推理等多項(xiàng)能力/desk

任務(wù)分析top寬度80%，其余部分寬度100%headerdiv.bannertopbottom<footer>任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)8.2制作“導(dǎo)航菜單”模塊效果展示知識儲備響應(yīng)式布局實(shí)現(xiàn)步驟2響應(yīng)式布局的定義1目錄Contents知識儲備1.響應(yīng)式布局的定義響應(yīng)式布局是指一個(gè)網(wǎng)站能夠兼容多個(gè)設(shè)備（PC、平板電腦、手機(jī)等），可以根據(jù)設(shè)備或窗口大小呈現(xiàn)出不同的效果，從而為不同終端的用戶提供更好的用戶體驗(yàn)。知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟在頁面頭部加入meta聲明viewport。<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>屬性對應(yīng)如下：width=device-width:自適應(yīng)設(shè)備屏幕的尺寸寬度maximum-scale：縮放比例的最大值inital-scale：縮放的初始化，1為禁止初始縮放user-scalable：用戶是否可以縮放操作1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟媒體查詢是響應(yīng)式布局的關(guān)鍵，通過媒體查詢?yōu)椴煌脑O(shè)備、設(shè)備的不同狀態(tài)來分別設(shè)置樣式。其語法格式如下：@mediamediaTypeand(mediafeather){css-code}1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟@mediamediaTypeand(mediafeather){css-code}mediaType是指設(shè)備類型，共有四種媒體類型，具體如下：all

默認(rèn)值，所有設(shè)備（可省略不寫）print

打印設(shè)備(用于打印機(jī)和打印預(yù)覽)screen

用于電腦屏幕，平板電腦，智能手機(jī)等speech

應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟@mediamediaTypeand(mediafeather){css-code}and(與、和)not:用來排除掉某些特定設(shè)備，比如@medianotprint（非打印設(shè)備)only:用來指定某種特別的媒體類型。操作符@mediaonlyscreen{}/*只能在screen設(shè)備能用*/@medianotspeech{}

/*除了speech設(shè)備都可以用*/1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟@mediamediaTypeand(mediafeather){css-code}device-width:設(shè)備寬度device-height:設(shè)備高度max-device-width:最大設(shè)備寬度min-device-width:最小設(shè)備寬度?width：瀏覽器的寬度height:瀏覽器的高度max-width：最大寬度min-width:最小寬度mediafeather：是媒體特性表達(dá)式，表示視口符合這個(gè)條件時(shí)，才會使用該樣式。常用值如下：1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟桌面屏幕斷點(diǎn)>=1024平板屏幕斷點(diǎn)在768px和1023px之間手機(jī)屏幕斷點(diǎn)<=767px樣式切換的分界點(diǎn)，我們稱其為斷點(diǎn)，也就是網(wǎng)頁的樣式在這一點(diǎn)時(shí)發(fā)生變化。例如：在每個(gè)媒體查詢塊中，可以根據(jù)需要設(shè)置不同的樣式。這些樣式將僅在滿足媒體查詢條件時(shí)生效。1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)在每個(gè)媒體查詢塊中，可以根據(jù)需要設(shè)置不同的樣式。這些樣式將僅在滿足媒體查詢條件時(shí)生效。示例：知識儲備2.響應(yīng)式布局實(shí)現(xiàn)步驟（1）盒子寬度需要使用百分比例如：header{width:100%}section{width:50%;}（2）處理圖片縮放的方法可以給圖片指定的最大寬度為百分比。假如圖片超過了，就縮??；假如圖片小了，就原尺寸輸出。例如：1.設(shè)置<meta>標(biāo)簽2.媒體查詢設(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)響應(yīng)式布局能夠快捷解決多設(shè)備顯示適應(yīng)問題，但是要兼容各種設(shè)備，工作量大，僅一般適用頁面布局不復(fù)雜的網(wǎng)站。知識儲備響應(yīng)式網(wǎng)站建設(shè)的難度主要體現(xiàn)在對不同設(shè)備的適配和響應(yīng)式設(shè)計(jì)上。我們需要充分考慮用戶的使用習(xí)慣和設(shè)備特性，保證網(wǎng)站的易用性和可訪問性，提高網(wǎng)站性能和加載速度，提升用戶滿意度。職業(yè)素養(yǎng)：用戶至上任務(wù)分析先用CSS設(shè)置導(dǎo)航菜單水平顯示的樣式屏幕尺寸大于768px或小于768px時(shí)顯示不同的樣式，怎么實(shí)現(xiàn)？屏幕尺寸大于768px時(shí)水平顯示再使用媒體查詢語句設(shè)置導(dǎo)航菜單折疊顯示的樣式@media(max-width:768px){ /*在此針對小屏幕設(shè)備進(jìn)行樣式設(shè)置*/}屏幕尺寸小于768px時(shí)折疊顯示<header>.logo<nav><nav>Iconfont圖標(biāo)ul>li任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)8.3制作“茶具展示”模塊效果展示知識儲備Flex布局相關(guān)屬性2Flex布局的定義1目錄Contents知識儲備1.Flex布局的定義Flex是FlexibleBox的縮寫，意為彈性布局，用來簡便實(shí)現(xiàn)響應(yīng)式頁面布局。采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱為“容器”；它的所有子元素為容器成員，稱為Flex項(xiàng)目（flexitem），簡稱為“項(xiàng)目”。知識儲備1.Flex布局的定義彈性容器默認(rèn)有兩條軸，主軸和交叉軸，呈90度交叉排列，在彈性容器中所有的子元素都是沿著主軸方向顯示，每根軸都有起點(diǎn)和終點(diǎn)，通過flex-direction來決定主軸的方向。123主軸交叉軸起點(diǎn)子元素按主軸方向顯示彈性盒子display:flex;任何一個(gè)容器都可以指定為Flex布局，只需要給該元素設(shè)置display:flex;屬性。知識儲備2.Flex布局相關(guān)屬性justify-content：設(shè)置項(xiàng)目在主軸上的排列方式2align-items：設(shè)置項(xiàng)目在交叉軸的排列方式（單行）3flex-direction：設(shè)置主軸方向1flex-wrap：設(shè)置項(xiàng)目如何換行5flex-flow：同時(shí)設(shè)置flex-direction屬性和flex-wrap屬性6align-content：設(shè)置項(xiàng)目在交叉軸的排列方式（多行）4容器屬性容器相當(dāng)于父元素，即用在父元素上的屬性知識儲備2.Flex布局相關(guān)屬性flex-direction屬性：設(shè)置主軸方向，即項(xiàng)目的排列方向。1.flex-directionflex-direction:row|row-reverse|column|column-reverse;屬性對應(yīng)如下：row(默認(rèn)值):主軸在水平方向，起點(diǎn)在左；row-reverse：主軸在水平方向，起點(diǎn)在右；column：主軸為垂直方向，起點(diǎn)在上；column-reverse：主軸為垂直方向，起點(diǎn)在下；rowrow-reversecolumncolumn-reverse容器屬性知識儲備2.Flex布局相關(guān)屬性設(shè)置項(xiàng)目在主軸上的對齊方式，具體對齊方式與主軸的方向有關(guān)。下面假設(shè)主軸為水平方向，2.justify-contentjustify-content:flex-start|flex-end|center|space-between|space-around;flex-start(默認(rèn)值)：左對齊flex-end：右對齊center：

居中對齊space-between：兩端對齊，項(xiàng)目之間的間隔都相等space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等容器屬性知識儲備2.Flex布局相關(guān)屬性設(shè)置項(xiàng)目在交叉軸上的對齊方式（單行），具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸為垂直方向。3.align-itemsalign-items:flex-start|flex-end|center|baseline|stretch;flex-start：上對齊flex-end：下對齊center：居中對齊baseline：項(xiàng)目的第一行文字的基線對齊stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度，在設(shè)置有高度時(shí)，stretch無效，以設(shè)置的高度為準(zhǔn)。容器屬性知識儲備2.Flex布局相關(guān)屬性項(xiàng)目在交叉軸的排列方式（多行）。只能用于子項(xiàng)目是多行的情況，在單行下沒有效果。下面假設(shè)交叉軸為垂直方向。4.align-contentalign-content:flex-start|flex-end|center|stretch|space-between|space-around;flex-start（默認(rèn)值）：上對齊。flex-end：下對齊。center：居中對齊。stretch：拉伸對齊。space-between：兩端對齊，項(xiàng)目之間的間隔都相等。space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。

容器屬性知識儲備2.Flex布局的定義align-items適用于單行情況下，只有上對齊、下對齊、居中和拉伸；align-content適應(yīng)于換行（多行）的情況下（單行情況下無效），可以設(shè)置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值；無論aligh-items和align-content在設(shè)置有高度時(shí)，對齊方式設(shè)置為stretch都無效。align-items和align-content區(qū)別容器屬性知識儲備2.Flex布局相關(guān)屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。5.flex-wrapflex-wrap:nowrap|wrap|wrap-reverse;nowrap（默認(rèn)值）：不換行wrap：換行，第一行在下方wrap-reverse：反向換行容器屬性知識儲備2.Flex布局相關(guān)屬性flex-grow設(shè)置項(xiàng)目的放大比例2flex-shrink設(shè)置項(xiàng)目的縮小比例3order設(shè)置項(xiàng)目的排列順序1flex是flex-grow、flex-shrink、flex-basis的簡寫5align-self設(shè)置單個(gè)項(xiàng)目的對齊方式6flex-basis設(shè)置元素在主軸上的初始尺寸4項(xiàng)目屬性知識儲備2.Flex布局相關(guān)屬性設(shè)置項(xiàng)目的排列順序，數(shù)值為整數(shù)，數(shù)值越小，排列越靠前，默認(rèn)值為0。1.orderorder:<integer>/*default0*/+項(xiàng)目屬性知識儲備2.Flex布局相關(guān)屬性規(guī)定項(xiàng)目的放大比例（容器寬度大于元素總寬度時(shí)如何伸展），默認(rèn)為0，即如果存在剩余空間，也不放大。2.flex-growflex-grow:<number>;/*default0*/如果所有項(xiàng)目的flex-grow屬性都為1，如果有空間的話則它們將等分。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。彈性容器的寬度正好等于元素寬度總和，無多余寬度，此時(shí)無論flex-grow是什么值都不會生效。項(xiàng)目屬性知識儲備2.Flex布局相關(guān)屬性設(shè)置項(xiàng)目的縮小比例（容器寬度小于元素總寬度時(shí)如何收縮），默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。3.flex-shrinkflex-shrink:number|initial|inherit;/*default1*/如果所有項(xiàng)目fl