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

下載本文檔

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

文檔簡介

1731第課1731第課CSS3常見布局形式的基基本本PAGE817321CSS3常見布局形式第17321CSS3常見布局形式第課PAGE7173212CSS3常見布局形式第課173212CSS3常見布局形式第課PAGE1

課題CSS3常見布局形式課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）掌握使用CSS3構(gòu)建單列和雙列布局的方法（2）學(xué)習(xí)CSS3構(gòu)建三列布局的操作（3）掌握使用彈性伸縮盒進(jìn)行布局的方法思政育人目標(biāo)：通過對本節(jié)課課程的學(xué)習(xí)，培養(yǎng)學(xué)生的邏輯思維、辯證思維和創(chuàng)新思維能力，引導(dǎo)學(xué)生養(yǎng)成獨立思考和深度思考的良好習(xí)慣教學(xué)重難點教學(xué)重點：學(xué)習(xí)CSS3構(gòu)建三列布局的方法教學(xué)難點：利用CSS3語言構(gòu)建三列布局教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、手機、平板教學(xué)設(shè)計第1節(jié)課：知識講解（24min）第2節(jié)課：導(dǎo)入新知（4min）

知識講解（30min）

課堂小結(jié)（7min）

作業(yè)布置（4min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】提出問題，引出新知識點在實際網(wǎng)頁制作中，不僅可以構(gòu)建類似“圖書簡介”頁面的單列布局和“網(wǎng)上書店”頁面的雙列布局，還可以構(gòu)建三列布局、多列布局等試問：在網(wǎng)頁中如何對其進(jìn)行布局？對其布局的方法有哪些【學(xué)生】聆聽、思考通過問答的方式，讓學(xué)生主動思考如何在網(wǎng)頁中進(jìn)行豐富的布局，激發(fā)學(xué)生的求知欲知識講解

（24min）【教師】講述單列和雙列布局單列和雙列布局小型企業(yè)宣傳網(wǎng)站一般使用簡單的單列布局，構(gòu)建這種布局形式只需按照標(biāo)準(zhǔn)文檔流的順序添加容器標(biāo)簽即可，必要時可通過將個別容器標(biāo)簽左右外邊距屬性值設(shè)置為auto，使其居中顯示。雙列布局一般是指帶有左側(cè)或右側(cè)側(cè)邊欄的布局形式。構(gòu)建這種布局形式可以通過設(shè)置浮動屬性，使主體部分與側(cè)邊欄一個向左浮動一個向右浮動來實現(xiàn)。此外，也可以通過設(shè)置定位屬性實現(xiàn)?！窘處煛垦菔尽纠?-1】操作流程，實現(xiàn)圖9-1的效果使用定位屬性構(gòu)建雙列布局，頁面效果如圖9-1所示。圖9-1使用定位屬性構(gòu)建雙列布局（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記頁面的容器標(biāo)簽。<header>頁眉</header> <main> <aside>側(cè)邊欄</aside> <div>主體部分</div> </main><footer>頁腳</footer>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，使用定位屬性設(shè)置各容器的位置，構(gòu)建雙列布局。body{width:1200px;padding:0;margin:0auto;font-size:1.3em;font-weight:bold;text-align:center;}/*設(shè)置頁面的寬度與內(nèi)外邊距，設(shè)置文本的字號、字體加粗與居中對齊*/margin:0auto;}/*設(shè)置頁眉與頁腳的寬度、高度、背景顏色與外邊距*/main{width:100%;height:300px;position:relative;background:#e0eeee;margin:0auto;}/*設(shè)置中心區(qū)域的寬度、高度、相對定位、背景顏色與外邊距*/aside{width:20%;height:200px;background:#847da1;position:absolute;top:0;left:0;}/*設(shè)置側(cè)邊欄的寬度、高度、背景顏色、絕對定位的頂部與左側(cè)偏移量*/div{width:80%;height:200px;background:#847da1;position:absolute;top:0;right:0;}/*設(shè)置主體部分的寬度、高度、背景顏色、絕對定位的頂部與右側(cè)偏移量*/【學(xué)生】聆聽、記錄、思考【教師】講述三列布局三列布局是指同時有兩列側(cè)邊欄的布局形式。要使用定位屬性實現(xiàn)三列布局，可在例9-1的基礎(chǔ)上分別設(shè)置左、中、右3個模塊絕對定位的左側(cè)（或右側(cè)）偏移量為0%、15%和85%（以兩側(cè)側(cè)邊欄寬度各占父元素的15%為例）。使用浮動屬性實現(xiàn)三列布局時，可直接設(shè)置各模塊一同向左或向右浮動。但使用這種方法構(gòu)建的布局不夠穩(wěn)定，在實際應(yīng)用中，可通過設(shè)置外邊距屬性或?qū)蓚€側(cè)邊欄模塊分別向左和向右浮動來固定側(cè)邊欄的位置?！窘處煛垦菔尽纠?-2】操作流程，實現(xiàn)圖9-2的效果使用浮動屬性構(gòu)建較為穩(wěn)定的三列布局，頁面效果如圖9-2所示。圖9-2使用浮動屬性構(gòu)建三列布局【學(xué)生】聆聽、記錄、思考【教師】巡視課堂，督促學(xué)生學(xué)習(xí)【學(xué)生】回顧課程內(nèi)容，對不理解的地方，提出疑問【教師】回答學(xué)生疑問通過講解知識點，讓學(xué)生進(jìn)一步了解CSS3中布局的使用，掌握對CSS3語言的操作上臺演示

（15min）【教師】讓學(xué)生以小組為單位制作一個三列布局的頁面，并組織學(xué)生上臺演示操作過程【學(xué)生】小組內(nèi)部討論，制作頁面，由組長上臺演示【教師】與學(xué)生一起對演示結(jié)果進(jìn)行評定讓學(xué)生有自我展示的平臺，提高學(xué)生的交流表達(dá)能力第二節(jié)課導(dǎo)入新知

（4min）【教師】復(fù)習(xí)上一節(jié)課內(nèi)容，引出本節(jié)課知識點上一節(jié)課，主要講述了單列和雙列布局，在單列布局和雙列布局的基礎(chǔ)上，講述了三列布局，但是這些布局要控制好對象像素的大小，提前做好精密的計算，在拓展性和延伸性上不是很好，今天學(xué)習(xí)的彈性伸縮盒可以解決上述問題【學(xué)生】聆聽、思考、理解通過對上一節(jié)內(nèi)容的復(fù)習(xí)，指出其不足，引出本節(jié)課講述的內(nèi)容知識講解

（30min）【教師】講解彈性伸縮盒彈性伸縮盒除前面介紹的幾種整體布局形式外，CSS3中還有一種常用于局部布局的盒子模型，稱為彈性伸縮盒。使用彈性伸縮盒構(gòu)建布局的方式叫作彈性伸縮盒布局（flex布局），它把父元素轉(zhuǎn)換為具有彈性的伸縮盒，將未知大小的子元素以各種形式分布在父元素中，是一種比較簡便、靈活的布局方式。在CSS3中，使用display屬性可將元素設(shè)置為伸縮盒，具體格式為：其中，flex表示最新版本的伸縮盒，inline-flex表示最新版本的行內(nèi)伸縮盒。伸縮盒的默認(rèn)寬度為100%，而行內(nèi)伸縮盒的寬度取決于其子元素?！窘處煛垦菔尽纠?-3】操作流程，實現(xiàn)圖9-3效果使用彈性伸縮盒布局將塊級元素顯示在一行中，頁面效果如圖9-3所示。圖9-3彈性伸縮盒布局的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標(biāo)簽中輸入代碼，設(shè)置容器元素為彈性伸縮盒，使其塊級子元素顯示在一行中。<style> .d_flex{width:500px;border:solid2pxblack;display:flex;}/*設(shè)置父元素的寬度與邊框，并將其轉(zhuǎn)換為彈性伸縮盒*/ .flex{width:40px;height:40px;padding:10px;margin:10px; border:solid2pxblack;background-color:aliceblue;}/*設(shè)置子元素的寬度、高度、內(nèi)外邊距、邊框與背景顏色*/</style>……<body> <divclass="d_flex"> <divclass="flex">box1</div> <divclass="flex">box2</div> <divclass="flex">box3</div> <divclass="flex">box4</div> <divclass="flex">box5</div> </div></body>1．flex布局結(jié)構(gòu)伸縮盒由伸縮容器與伸縮項目組成，display屬性值為flex的元素為伸縮容器，其子元素為伸縮項目，伸縮項目可有多個。伸縮容器與伸縮項目也稱為flex容器（flexcontainer）與flex項目（flexitem）伸縮項目沿伸縮容器的行排列，默認(rèn)情況下，伸縮容器中只有一個伸縮行，并且與文本方向一致。相關(guān)概念的解釋如下（1）主軸（mainaxis）：伸縮容器的主軸指明伸縮行的方向，默認(rèn)為自左向右。（2）主軸起點（main-start）與主軸終點（main-end）：主軸的開始位置為主軸起點，結(jié)束位置為主軸終點。（3）主軸長度（mainsize）：伸縮項目在主軸方向上的長度。（4）側(cè)軸（crossaxis）：伸縮容器的側(cè)軸垂直于主軸，默認(rèn)方向為自上向下。（5）側(cè)軸起點（cross-start）與側(cè)軸終點（cross-end）：側(cè)軸的開始位置為側(cè)軸起點，結(jié)束位置為側(cè)軸終點。（6）側(cè)軸長度（crosssize）：伸縮項目在側(cè)軸方向上的長度。2．伸縮方向在flex布局中，使用flex-direction屬性設(shè)置伸縮容器中主軸的方向，也就是伸縮項目的排列方向，具體格式為：flex-direction:row|row-reverse|column|column-reverse;其中，row是默認(rèn)值，表示自左向右排列；row-reverse表示自右向左排列；column表示自上向下排列；column-reverse表示自下向上排列。3．單行或多行顯示在flex布局中，使用flex-wrap屬性設(shè)置伸縮容器是否多行顯示，具體格式為：flex-wrap:nowrap|wrap|wrap-reverse;其中，nowrap是默認(rèn)值，表示單行顯示；wrap表示多行顯示；wrap-reverse表示在wrap的基礎(chǔ)上反向排列。4．對齊方式在flex布局中，設(shè)置伸縮容器的相關(guān)屬性，能夠使伸縮項目以不同的對齊方式顯示。（1）主軸對齊。justify-content屬性可以設(shè)置伸縮項目在主軸方向上的對齊方式，具體格式為：justify-content:flex-start|flex-end|center|space-between|

space-around;其中，flex-start是默認(rèn)值，表示向主軸起點方向?qū)R；flex-end表示向主軸終點方向?qū)R；center表示居中對齊；space-between表示兩端對齊；space-around表示平均分布。（2）側(cè)軸對齊。align-items屬性可以設(shè)置伸縮項目在側(cè)軸方向上的對齊方式，具體格式為：align-items:stretch|flex-start|flex-end|center|baseline;其中，stretch是默認(rèn)值，表示將伸縮項目拉伸至填充整個伸縮容器；flex-start表示向側(cè)軸起點方向?qū)R；flex-end表示向側(cè)軸終點方向?qū)R；center表示居中對齊；baseline表示根據(jù)元素中文本的基線對齊。（3）行對齊。align-content屬性可以設(shè)置伸縮行在側(cè)軸方向上的對齊方式，具體格式為：align-content:stretch|flex-start|flex-end|center|

space-between|space-around;其中，stretch是默認(rèn)值，表示伸縮行拉伸至盡量占用伸縮容器的空間；flex-start表示向伸縮容器頂部對齊；flex-end表示向伸縮容器底部對齊；center表示向伸縮容器中心對齊；space-between表示向伸縮容器兩端對齊；space-around表示在伸縮容器中平均分布。5．排列順序在flex布局中，設(shè)置伸縮項目的order屬性可以調(diào)整其在伸縮容器中的排列順序，屬性值可以為正整數(shù)、負(fù)整數(shù)或0，默認(rèn)值為0。order屬性值越大的伸縮項目顯示在伸縮容器中越靠后的位置?！窘處煛垦菔尽纠?-4】操作流程，實現(xiàn)圖9-8效果使用彈性伸縮盒制作水平導(dǎo)航條，頁面效果如圖9-8所示。圖9-8水平導(dǎo)航條的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建導(dǎo)航條的結(jié)構(gòu)。<navclass="head"> <ahref="#">秒殺</a> <ahref="#">優(yōu)惠券</a>……（省略部分代碼，具體內(nèi)容如圖9-8所示）</nav>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置容器元素為彈性伸縮盒，并設(shè)置伸縮項目的對齊方式，制作水平導(dǎo)航條。display:flex;justify-content:space-around;}/*設(shè)置div元素的圓角、上外邊距與背景顏色，將其設(shè)置為伸縮容器并設(shè)置伸縮項目的對齊方式*/.heada{display:block;height:35px;color:#ffffff;font-size:1.5em;font-weight:bold;padding:8px;text-decoration:none;}/*將超鏈接轉(zhuǎn)化為塊級元素，設(shè)置其高度、文本顏色、字號、字體加粗與內(nèi)邊距，去除下劃線*/【學(xué)生】聆聽、思考、理解【教師】詢問學(xué)生，是否有不理解的地方，回答學(xué)生提問【學(xué)生】舉手，提出問題【教師】回答學(xué)生問題通過講解的知識點，拓展學(xué)生的知識面，開拓學(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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論