《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第9周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第5章HTML5+CSS3移動網(wǎng)站布局（5.5-5.7節(jié)）二、教學目標（一）知識目標掌握CSS3彈性盒模型的核心概念，熟練使用彈性容器屬性（flex-direction、flex-wrap、justify-content等）和彈性項目屬性（flex-grow、order、align-self等）。理解替代盒模型（box-sizing:border-box）的計算規(guī)則，掌握與標準盒模型的區(qū)別。掌握動態(tài)計算函數(shù)calc()的語法及應用場景。理解響應式布局與自適應布局的差異，掌握媒體查詢（@media）的語法及斷點設置。掌握視口（viewport）元標簽的配置，能實現(xiàn)移動端頁面的基礎適配。了解移動端布局案例的實現(xiàn)思路，能綜合應用彈性盒與響應式技術(shù)。（二）思政目標通過彈性盒模型的靈活布局，培養(yǎng)“自適應”思維，理解技術(shù)對多樣化需求的支持。在響應式布局實踐中，體會“用戶為中心”的設計理念，培養(yǎng)換位思考能力。結(jié)合案例開發(fā)，培養(yǎng)團隊協(xié)作意識和代碼優(yōu)化意識，注重細節(jié)處理。三、教學重難點（一）教學重點彈性容器屬性（flex-direction控制主軸方向、justify-content主軸對齊、align-items交叉軸對齊）。彈性項目屬性（flex簡寫屬性、order排序、flex-grow分配剩余空間）。媒體查詢的語法（@mediascreenand(min-width:768px)）及斷點設計。視口元標簽的核心配置（width=device-width,initial-scale=1）。（二）教學難點彈性盒模型中主軸與交叉軸的動態(tài)轉(zhuǎn)換（flex-direction改變時的對齊調(diào)整）。彈性項目的縮放規(guī)則（flex-grow與flex-shrink的協(xié)同計算）。媒體查詢斷點的合理設置（適配不同設備尺寸的邏輯）。替代盒模型與彈性盒結(jié)合時的尺寸計算。四、教學方法演示法：通過瀏覽器開發(fā)者工具實時演示彈性盒屬性變化對布局的影響。案例分析法：解析“導航欄自適應布局”“多設備響應式卡片”案例，提煉技術(shù)要點。對比教學法：對比標準盒模型與替代盒模型的尺寸計算，加深理解。任務驅(qū)動法：實踐課通過“移動端商品列表”布局任務，綜合應用彈性盒與媒體查詢。五、教學過程（一）第一學時：CSS3彈性盒模型（40分鐘）導入（5分鐘）展示傳統(tǒng)浮動布局與彈性盒布局的對比效果：同樣的導航欄在不同屏幕尺寸下，彈性盒布局更整潔且無浮動塌陷問題。提問：“如何讓多個元素在一行自動分配空間，且在屏幕縮小時自動換行？”引出彈性盒模型。彈性盒模型基礎（10分鐘）核心概念：彈性容器（display:flex）與彈性項目（直接子元素），主軸與交叉軸的定義。基本設置：演示：彈性項目默認沿主軸（水平）排列，無需浮動即可同行顯示。彈性容器屬性（15分鐘）主軸方向（flex-direction）：row（默認，水平從左到右）、row-reverse（水平從右到左）、column（垂直從上到下）。換行規(guī)則（flex-wrap）：nowrap（默認，不換行）、wrap（溢出時換行）、wrap-reverse（反向換行）。主軸對齊（justify-content）：flex-start（默認左對齊）、center（居中）、space-between（兩端對齊）、space-around（等距分布）。交叉軸對齊（align-items）：stretch（默認拉伸填充）、center（垂直居中）、flex-end（底部對齊）。案例：用justify-content:space-between實現(xiàn)導航欄兩端對齊，flex-wrap:wrap實現(xiàn)小屏幕換行。彈性項目屬性（7分鐘）排序（order）：數(shù)值越小越靠前（默認0，支持負數(shù)）?？s放（flex-grow）：分配剩余空間的比例（默認0，值為1時平均分配）。簡寫屬性（flex）：flex:growshrinkbasis（如flex:1表示flex-grow:1，自動縮放）。演示：通過flex:1讓3個項目平分容器寬度。小結(jié)（3分鐘）彈性盒核心：通過容器屬性控制整體布局，項目屬性調(diào)整個體行為。布置思考：“如何用彈性盒實現(xiàn)三列布局，中間列寬度固定，兩側(cè)自動伸縮？”（二）第二學時：替代盒模型、響應式布局與案例（40分鐘）復習導入（5分鐘）抽查彈性盒布局代碼：“寫出一個彈性容器，使項目垂直排列且水平居中。”引出問題：“彈性項目的邊框和內(nèi)邊距會撐開容器寬度嗎？”導入替代盒模型。替代盒模型與calc()（10分鐘）替代盒模型（box-sizing:border-box）：計算規(guī)則：width

=內(nèi)容區(qū)+內(nèi)邊距+邊框（解決標準盒模型的尺寸溢出問題）。應用場景：布局中固定寬高包含邊框和內(nèi)邊距（如導航欄、卡片）。動態(tài)計算（calc()）：語法：calc(表達式)（如width:calc(100%-200px)），支持加減乘除。應用：自適應寬度（如側(cè)邊欄固定200px，主內(nèi)容區(qū)占剩余寬度）。響應式與自適應布局（15分鐘）核心區(qū)別：自適應：為不同設備預設固定布局（如移動端單獨頁面）。響應式：同一頁面通過CSS自動調(diào)整布局（依賴媒體查詢）。媒體查詢（@media）：視口配置：（確保頁面寬度與設備寬度一致，初始縮放比例1:1）。移動端布局案例解析（7分鐘）以“宋韻卿裳”發(fā)型店頁面為例，分析：用彈性盒實現(xiàn)商品列表橫向滾動。媒體查詢在小屏幕下調(diào)整元素尺寸。替代盒模型避免邊框撐開布局。小結(jié)（3分鐘）響應式布局核心：媒體查詢+彈性盒+視口配置。強調(diào)：斷點設計需參考主流設備尺寸（320px、768px、1200px）。（三）實踐學時：移動端響應式布局實戰(zhàn)（40分鐘）任務布置（5分鐘）目標：制作“移動端商品列表”，要求：用彈性盒布局實現(xiàn)商品卡片橫向排列（默認3列）。應用box-sizing:border-box確?？ㄆ吙虿挥绊懖季?。通過媒體查詢設置斷點：屏幕寬度<768px時，改為2列布局。屏幕寬度<480px時，改為1列布局，卡片占滿寬度。配置視口元標簽，確保移動端適配。學生實踐（30分鐘）教師巡回指導，重點解決：彈性容器flex-wrap:wr