HTML5+CSS3 Web前端開(kāi)發(fā)項(xiàng)目化教程 課件 項(xiàng)目8 響應(yīng)式布局

《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)能夠書寫媒體查詢語(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ù)訪問(wèn)設(shè)備的不同（如桌面顯示器、平板電腦、智能手機(jī)或其他手持設(shè)備）自動(dòng)調(diào)整布局、圖片大小、導(dǎo)航菜單以及其他界面元素，從而提供一致且優(yōu)化的用戶體驗(yàn)。知識(shí)儲(chǔ)備1.響應(yīng)式布局（1）流體布局：通過(guò)百分比單位而非固定像素來(lái)定義元素的寬度和高度，使得頁(yè)面元素可以根據(jù)容器的大小按比例伸縮。（2）媒體查詢：利用CSS3的媒體查詢功能，可以為不同的設(shè)備和屏幕尺寸定義不同的樣式表規(guī)則，使得樣式能夠根據(jù)設(shè)備的具體條件（如視口寬度）發(fā)生變化。（3）自適應(yīng)圖像：根據(jù)設(shè)備的屏幕尺寸和分辨率加載合適大小的圖片資源，以減少加載時(shí)間和流量消耗。（4）可折疊/隱藏的內(nèi)容區(qū)域：對(duì)于較小的屏幕，某些非關(guān)鍵內(nèi)容可以被折疊或完全隱藏，僅在用戶需要時(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)題、編寫代碼。GPT-4：并且能夠處理更多種類的數(shù)據(jù)輸入，包括圖像、音頻等多媒體信息。知識(shí)儲(chǔ)備2.AI大模型阿里云的通義千問(wèn)：具備多輪對(duì)話、邏輯推理、多模態(tài)理解及多種語(yǔ)言支持能力，能夠在多種應(yīng)用場(chǎng)景下提供智能化服務(wù)。

/2.

百度的文心一言（ERNIE?Bot）：整合了大規(guī)模知識(shí)圖譜，能夠進(jìn)行高效的對(duì)話交互、文本生成和知識(shí)問(wèn)答。/知識(shí)儲(chǔ)備2.AI大模型4.?華為的盤古大模型：專注于分布式訓(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)出不同的效果，從而為不同終端的用戶提供更好的用戶體驗(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：用戶是否可以縮放操作1.設(shè)置<meta>標(biāo)簽2.媒體查詢?cè)O(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識(shí)儲(chǔ)備2.響應(yīng)式布局實(shí)現(xiàn)步驟媒體查詢是響應(yīng)式布局的關(guān)鍵，通過(guò)媒體查詢?yōu)椴煌脑O(shè)備、設(shè)備的不同狀態(tài)來(lái)分別設(shè)置樣式。其語(yǔ)法格式如下：@mediamediaTypeand(mediafeather){css-code}1.設(shè)置<meta>標(biāo)簽2.媒體查詢?cè)O(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識(shí)儲(chǔ)備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.媒體查詢?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)指定某種特別的媒體類型。操作符@mediaonlyscreen{}/*只能在screen設(shè)備能用*/@medianotspeech{}

/*除了speech設(shè)備都可以用*/1.設(shè)置<meta>標(biāo)簽2.媒體查詢?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.媒體查詢?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)，我們稱其為斷點(diǎn)，也就是網(wǎng)頁(yè)的樣式在這一點(diǎn)時(shí)發(fā)生變化。例如：在每個(gè)媒體查詢塊中，可以根據(jù)需要設(shè)置不同的樣式。這些樣式將僅在滿足媒體查詢條件時(shí)生效。1.設(shè)置<meta>標(biāo)簽2.媒體查詢?cè)O(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)知識(shí)儲(chǔ)備2.響應(yīng)式布局實(shí)現(xiàn)步驟1.設(shè)置<meta>標(biāo)簽2.媒體查詢?cè)O(shè)置樣式3.設(shè)置多種視圖斷點(diǎn)在每個(gè)媒體查詢塊中，可以根據(jù)需要設(shè)置不同的樣式。這些樣式將僅在滿足媒體查詢條件時(shí)生效。示例：知識(shí)儲(chǔ)備2.響應(yīng)式布局實(shí)現(xiàn)步驟（1）盒子寬度需要使用百分比例如：header{width:100%}section{width:50%;}（2）處理圖片縮放的方法可以給圖片指定的最大寬度為百分比。假如圖片超過(guò)了，就縮?。患偃鐖D片小了，就原尺寸輸出。例如：1.設(shè)置<meta>標(biāo)簽2.媒體查詢?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ì)上。我們需要充分考慮用戶的使用習(xí)慣和設(shè)備特性，保證網(wǎng)站的易用性和可訪問(wèn)性，提高網(wǎng)站性能和加載速度，提升用戶滿意度。職業(yè)素養(yǎng)：用戶至上任務(wù)分析先用CSS設(shè)置導(dǎo)航菜單水平顯示的樣式屏幕尺寸大于768px或小于768px時(shí)顯示不同的樣式，怎么實(shí)現(xiàn)？屏幕尺寸大于768px時(shí)水平顯示再使用媒體查詢語(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的縮寫，意為彈性布局，用來(lái)簡(jiǎn)便實(shí)現(xiàn)響應(yīng)式頁(yè)面布局。采用Flex布局的元素，稱為Flex容器（flexcontainer），簡(jiǎn)稱為“容器”；它的所有子元素為容器成員，稱為Flex項(xiàng)目（flexitem），簡(jiǎn)稱為“項(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)目的第一行文字的基線對(duì)齊stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(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)寫形式，默認(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)寫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，如果有空間的話則它們將等分。如果一個(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)目flex-shrink都為0，當(dāng)空間不足時(shí)，不會(huì)縮小。如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮?。焕缭O(shè)置第2個(gè)元素flex-shrink為0，第2個(gè)元素不縮小。項(xiàng)目屬性知識(shí)儲(chǔ)備2.Flex布局相關(guān)屬性設(shè)置元素在主軸上的初始尺寸，默認(rèn)值為auto。4.flex-basisflex-basis:number|auto|initial|inherit;/*defaultauto*/所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。例如：設(shè)置flex-basis:80px;項(xiàng)目屬性知識(shí)儲(chǔ)備2.Flex布局相關(guān)屬性flex屬性是flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫，默認(rèn)值為：01auto。5.flexflex:flex-growflex-shrinkflex-basis|auto|initial|inherit;項(xiàng)目屬性知識(shí)儲(chǔ)備2.Flex布局相關(guān)屬性設(shè)置單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。align-self默認(rèn)值為auto,表示繼承父元素的align-items屬性，如果沒(méi)有父容器則等同于stretch。6.align-selfalign-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/*defaultauto*/例如：設(shè)置第