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

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

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

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

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

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

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

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

當(dāng)前動(dòng)畫(huà)的名稱(chēng)

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

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

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

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

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

播放動(dòng)畫(huà)的次數(shù)

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

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

反方向播放動(dòng)畫(huà)

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

：動(dòng)畫(huà)名稱(chēng)animation-duration

：動(dòng)畫(huà)完成時(shí)間animation-timing-function

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

沒(méi)有任何CSS屬性有過(guò)渡效果

所有CSS屬性都有過(guò)渡效果

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

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

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

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

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

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

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

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

/2.

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

/

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

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

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

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

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

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

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

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

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