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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論