《網頁設計與Web前端開發(fā)》電子教案（第5周）一、教學基本信息??課程名稱??：網頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第4章使用HTML+CSS布局網頁（4.1-4.4節(jié)）二、教學目標（一）知識目標理解CSS布局的核心概念（盒模型為基礎，元素分類為前提）。掌握CSS三種定位機制（普通流、浮動、絕對定位）的原理及應用場景。熟練使用浮動（float）實現(xiàn)同行布局，掌握清除浮動（clear）的方法。掌握定位屬性（position）的用法：相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。理解圖片布局特點，掌握vertical-align屬性對行內元素的垂直對齊控制。（二）思政目標通過分析布局案例的合理性，培養(yǎng)結構化思維和規(guī)劃能力。結合浮動與定位的靈活應用，體會“規(guī)范中求創(chuàng)新”的設計思想。在圖片布局實踐中，培養(yǎng)對細節(jié)的關注和審美能力。三、教學重難點（一）教學重點浮動（float:left/right）的應用及清除浮動（clear:both）的方法。絕對定位與相對定位的配合使用（子絕父相）。固定定位（position:fixed）在導航欄等場景的應用。vertical-align屬性在圖片與文字垂直對齊中的使用。（二）教學難點浮動元素導致的父元素高度塌陷及解決方案（偽元素清除法）。絕對定位中參照對象的確定（無已定位祖先則參照body）。行內塊元素與浮動元素在同行布局中的區(qū)別（間距、脫離文檔流）。四、教學方法案例演示法：以“新聞列表”“文繞圖”為例，演示浮動與定位的效果。對比分析法：對比float與inline-block的布局差異，加深理解。問題驅動法：提出“如何解決浮動導致的布局錯亂？”引導學生思考清除浮動的方法。實踐操作法：通過“產品展示頁”布局任務，強化浮動與定位的綜合應用。五、教學過程（一）第一學時：CSS布局概述與元素浮動（40分鐘）導入（5分鐘）展示“環(huán)保小站”網頁的兩種布局：混亂排列與整齊排列，提問：“如何通過CSS讓元素按設計位置排列？”引出本節(jié)課核心：CSS布局的三種機制（普通流、浮動、定位）。CSS布局基礎（10分鐘）盒模型回顧：所有元素均為盒子，由內容、內邊距、邊框、外邊距組成。元素分類：塊元素（div、p）：獨占一行，支持寬高設置。行內元素（span、a）：同行排列，不支持寬高。行內塊元素（img、input）：同行排列且支持寬高。定位機制：普通流：元素按HTML順序排列（塊元素換行，行內元素同行）。浮動：脫離普通流，沿父元素左右邊緣排列（例4-2文繞圖效果）。絕對定位：完全脫離普通流，基于參照對象定位。元素的浮動（20分鐘）基本用法：float:left：元素向左浮動，后續(xù)元素環(huán)繞。float:right：元素向右浮動。特殊情況及解決：父元素高度塌陷：子元素浮動后，父元素高度為0（例4-5）。解決方案（例4-7）：父元素設置固定高度（適用于高度已知場景）。新增空元素并設置clear:both。父元素使用偽元素::after{content:"";display:block;clear:both;}（推薦）。浮動元素重疊：浮動元素覆蓋普通流元素（例4-4），通過clear屬性清除影響。與inline-block的區(qū)別：浮動元素脫離普通流，inline-block仍在普通流中。浮動元素無默認間距，inline-block受代碼空格影響產生間距。小結（5分鐘）回顧浮動的核心用法及清除浮動的三種方法。布置思考題：“如何用浮動實現(xiàn)三列布局？”（二）第二學時：元素定位與圖片布局（40分鐘）復習導入（5分鐘）抽查學生對浮動的掌握：“寫出清除浮動的偽元素代碼？”引出本節(jié)課重點：通過定位實現(xiàn)元素精確布局（如導航欄固定、彈窗定位）。元素的定位（20分鐘）定位屬性（position）：相對定位（relative）：參照自身在普通流中的位置偏移（top/left為正值時向右下方移動）。不脫離普通流，原位置保留（例4-9圖片偏移）。絕對定位（absolute）：參照最近的已定位祖先元素（若無可參照body）。脫離普通流，原位置不保留（例4-11子元素相對于父元素定位）。應用場景：彈窗、下拉菜單（子絕父相布局）。固定定位（fixed）：參照瀏覽器窗口定位，滾動時位置不變。層疊順序（z-index）：值越大越靠上（例4-13中z-index:2的元素覆蓋z-index:1的元素）。圖片布局（10分鐘）水平對齊：通過父元素text-align:center實現(xiàn)圖片居中（適用于行內塊元素）。垂直對齊：vertical-align控制行內元素在行框中的對齊方式：middle：圖片中線與文字中線對齊（例4-19產品列表中圖片與文字對齊）。top/bottom：圖片頂部/底部與行框對齊。綜合案例分析（5分鐘）展示某網站導航欄：固定定位（fixed）+浮動（float）實現(xiàn)菜單項同行排列。（三）實踐學時：布局綜合實踐（40分鐘）任務布置（5分鐘）目標：制作“旅行博客”頁面布局，要求：頂部導航欄固定在頁面頂部（position:fixed）。主體內容分兩列：左側文章列表（浮動left），右側熱門景點（浮動right）。文章列表中插入圖片，實現(xiàn)文繞圖效果（float:left）。解決浮動導致的父元素高度塌陷問題。學生實踐（30分鐘）教師巡回指導，重點解決：固定導航欄與主體內容的間距（添加padding-top避免遮擋）。浮動元素寬度計算錯誤導致?lián)Q行