教案《HTML5CSS3項目開發案例教程》第17課CSS3常見布局形式_第1頁
教案《HTML5CSS3項目開發案例教程》第17課CSS3常見布局形式_第2頁
教案《HTML5CSS3項目開發案例教程》第17課CSS3常見布局形式_第3頁
教案《HTML5CSS3項目開發案例教程》第17課CSS3常見布局形式_第4頁
教案《HTML5CSS3項目開發案例教程》第17課CSS3常見布局形式_第5頁
已閱讀5頁，還剩13頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

生的出勤情況 (2min)CSS3常見布局形式第課CSS2課時(90min)知識技能目標： (3)掌握使用彈性伸縮盒進行布局的方法思政育人目標：思維、辯證思維和創新思維能力，引導學思考的良好習慣重點：學習CSS3構建三列布局的方法教學重難點教學難點：利用CSS3語言構建三列布局第1節課：考勤(2min)→導入新知(4min)→知識講解(24min)→上臺演示(15min)第2節課：導入新知(4min)→知識講解(30min)→課堂小結(7min)→作業布置(4min)主要教學內容及步驟課考如何在網頁中進行豐富的布局，激發學生的求知欲導入新知 (4min)列布局等【教師】講述單列和雙列布局1第課CSS3常見布局形式式只需按照標準文檔流的順序添加容器標簽即可，必要時可通過將點，讓學生進一步的使用，掌握對側側邊欄的布局形式。構建這種布識講解 識講解 (24min) (1)創建HTML5文檔，在<body>標簽中輸入以下代碼，標<div>主體部分</div> (2)在<head>標簽中添加<style>標簽，在其中輸入以下代碼，/*設置頁面的寬度與內外邊距，設置文本的字號、字體加粗與居中對齊*/2/*設置頁眉與頁腳的寬度、高度、背景顏色與外邊距*//*設置中心區域的寬度、高度、相對定位、背景顏色與外邊距*//*設置側邊欄的寬度、高度、背景顏色、絕對定位的頂部與左側偏移量*//*設置主體部分的寬度、高度、背景顏色、絕對定位的頂部與右側偏移量*/實現三列布局，可在例9-1的基礎上分別設置左、中、右3個模塊絕對定位的左側(或右側)偏移量為0%、15%和85%(以兩側側邊欄寬度各占父元素的15%為例)。或向右浮動。但使用這種方法構建的布局不夠穩定，在實際應用中，可通過設置外邊距屬性或將兩個側邊欄模塊分別向左和向右浮動來17第課344第課構建三列布局 (15min)第二節課學生的交流表達能力導入新知 (4min)知識講解 (30min)上一節課，主要講述了單列和雙列布局，在單列布局和雙列布局的基礎上，講述了三列布局，但是這些布局要控制好對象像素的大小，提前做好精密的計算，在拓展性和延伸性上不是很好，今天學習的彈性伸縮盒可以解決上述問題局部布局的盒子模型，稱為彈性伸縮盒。使用彈性伸縮盒構建布局的方式叫作彈性伸縮盒布局(flex布局)，它把父元素轉換為具有式分布在父元素中，節課講述的內容17CSS3常見布局形式第課現圖9-3效果局的頁面效果簽中輸入代碼，設置容器元素為彈性伸縮盒，使其塊級子元素顯示盒*/bordersolid2px/*設置子元素的寬度、高度、內外邊距、邊框與背景顏色*/5第課素為伸縮容器，其子元素為伸縮項目，伸縮項目可有多個。伸縮容 (1)主軸(mainaxis)：伸縮容器的主軸指明伸縮行的方向， (2)主軸起點(main-start)與主軸終點(main-end)：主軸的 (3)主軸長度(mainsize)：伸縮項目在主軸方向上的長度。 (4)側軸(crossaxis)：伸縮容器的側軸垂直于主軸，默認 (5)側軸起點(cross-start)與側軸終點(cross-end)：側軸的開始位置為側軸起點，結束位置為側軸終點。 (6)側軸長度(crosssize)：伸縮項目在側軸方向上的長度。的排列方向，具體格式為：在flex布局中，使用flex-wrap屬性設置伸縮容器是否多行顯6617CSS3常見布局形式第課示，具體格式為： 方向上的對齊方式，具體格式為： 上的對齊方式，具體格式為：d 對齊方式，具體格式為：77通過通過復習總結，讓學生清楚的梳理這節課學習的 (7min)第課CSS3常見布局形式現圖9-8效果-8水平導航條的頁面效果 (2)在<head>標簽中添加<style>標簽，在其中輸入以下代碼，設置容器元素為彈性伸縮盒，并設置伸縮項目的對齊方式，制作水/*設置div元素的圓角、上外邊距與背景顏色，將其設置為伸縮容器并設置伸縮項目的對齊方式*/字號、字體加粗與內邊距，去除下劃線*/本節課學習了使用CSS3構建單列、雙列和三列布局的方817CSS3常見布局形式第課法，以及使用彈性伸縮盒進行布局的方法。希望同學們在課下內容通過課后練習，通過課后練習，鞏固學生對知識點

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論