




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
響應(yīng)式開(kāi)發(fā)技術(shù)主講人:flex布局定義及原理學(xué)習(xí)情境四教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究
有沒(méi)有更簡(jiǎn)單的做法呢?教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥1.flex布局定義21Flex布局又稱為彈性布局,是一種用于設(shè)計(jì)Web頁(yè)面布局的CSS技術(shù),是一種新的布局模式。其主要是用于移動(dòng)端布局,它允許容器中的子元素在容器內(nèi)以靈活的方式排列,適應(yīng)不同的屏幕尺寸和設(shè)備。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.布局原理21
采用Flex布局的元素,稱為Flex容器(flexcontainer),簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員,稱為Flex項(xiàng)目(flexitem),簡(jiǎn)稱"項(xiàng)目"。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.布局原理Flex布局divspanspanspandiv就是
flex父容器。span就是子容器flex項(xiàng)目教學(xué)內(nèi)容與過(guò)程為什么添加display:flex屬性就可以控制子容器呢?教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.布局原理spanFlex布局divspanspandiv就是
flex父容器。span就是子容器flex項(xiàng)目總結(jié)flex布局原理:就是通過(guò)給父容器添加flex屬性,來(lái)控制子容器的位置和排列方式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2:效果分析【彈性布局的簡(jiǎn)單應(yīng)用】教學(xué)內(nèi)容與過(guò)程display:flex教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.父容器、子容器設(shè)置樣式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.父容器、子容器設(shè)置樣式3.父盒子設(shè)置彈性布局教學(xué)內(nèi)容與過(guò)程任務(wù)4:操作演示[操作演示]完成flex布局的初次體驗(yàn)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)4學(xué)生實(shí)踐操作任務(wù)1:新建站點(diǎn)與網(wǎng)頁(yè)任務(wù)2:添加元素結(jié)構(gòu)任務(wù)3:設(shè)置標(biāo)記屬性任務(wù)4:網(wǎng)頁(yè)預(yù)覽、調(diào)試任務(wù)5:保存、提交作業(yè)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)5總結(jié)、評(píng)價(jià)本節(jié)小結(jié)教學(xué)評(píng)價(jià)Flex布局的定義和原理學(xué)習(xí)通課中完成教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)6布置作業(yè)、預(yù)習(xí)任務(wù)作業(yè)預(yù)習(xí)完成彈性布局初體驗(yàn)的樣式美化flex布局父項(xiàng)常見(jiàn)屬性flex布局子項(xiàng)常見(jiàn)屬性學(xué)習(xí)情境五教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究回顧知識(shí):flex布局原理:通過(guò)給父容器添加flex屬性,來(lái)控制子容器的位置和排列方式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥1.
主軸側(cè)軸在
flex布局中,是分為主軸和側(cè)軸兩個(gè)方向,同樣的叫法有
:
行和列、x軸和y軸默認(rèn)主軸方向就是
x
軸方向,水平向右默認(rèn)側(cè)軸方向就是
y
軸方向,水平向下flex-direction設(shè)置誰(shuí)為主軸,剩下的就是側(cè)軸。而我們的子元素是跟著主軸來(lái)排列的教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.flex-direction屬性值flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)屬性值說(shuō)明row默認(rèn)值從左到右row-reverse從右到左column從上到下column-reverse從下到上教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥主軸為Y軸時(shí)屬性值為column
屬性值為column-reverse教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2:效果分析【flex-direction屬性的簡(jiǎn)單運(yùn)用】教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2:效果分析display:flexflex-direction教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.父容器、子容器設(shè)置樣式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.父容器、子容器設(shè)置樣式3.父容器設(shè)置主軸方向教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)4學(xué)生實(shí)踐操作任務(wù)1:新建站點(diǎn)與網(wǎng)頁(yè)任務(wù)2:添加元素結(jié)構(gòu)任務(wù)3:設(shè)置標(biāo)記屬性任務(wù)4:網(wǎng)頁(yè)預(yù)覽、調(diào)試任務(wù)5:保存、提交作業(yè)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)5總結(jié)、評(píng)價(jià)本節(jié)小結(jié)教學(xué)評(píng)價(jià)Flex-direction學(xué)習(xí)通課中完成教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)6布置作業(yè)、預(yù)習(xí)任務(wù)作業(yè)預(yù)習(xí)完成flex-direction案例的樣式美化flex-wrap屬性flex布局父項(xiàng)常見(jiàn)屬性學(xué)習(xí)情境六教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究這樣的布局效果如何用代碼實(shí)現(xiàn)呢?教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥231justify-content
此屬性定義了項(xiàng)目在主軸上的對(duì)齊方式,可設(shè)置主軸上的子元素排列方式。注意:使用這個(gè)屬性之前一定要先確定好主軸。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.用法屬性值說(shuō)明flex-start默認(rèn)值從頭部開(kāi)始
如果主軸是x軸,則從左到右flex-end從尾部開(kāi)始排列center在主軸居中對(duì)齊(如果主軸是x軸則水平居中)space-around平分剩余空間space-between先兩邊貼邊再平分剩余空間(重要)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.給父容器、子容器設(shè)置樣式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.給父容器、子容器設(shè)置樣式3.給父容器添加justify-content屬性教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)4:操作展示[操作演示]完成簡(jiǎn)易小米家電模塊的布局教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)4學(xué)生實(shí)踐操作任務(wù)1:新建站點(diǎn)與網(wǎng)頁(yè)任務(wù)2:添加元素結(jié)構(gòu)任務(wù)3:設(shè)置標(biāo)記屬性任務(wù)4:網(wǎng)頁(yè)預(yù)覽、調(diào)試任務(wù)5:保存、提交作業(yè)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)5總結(jié)、評(píng)價(jià)本節(jié)小結(jié)教學(xué)評(píng)價(jià)Flex屬性的含義及用法學(xué)習(xí)通課中完成教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)6布置作業(yè)、預(yù)習(xí)任務(wù)作業(yè)預(yù)習(xí)完成京東移動(dòng)端的搜索框制作align-self屬性flex布局子項(xiàng)常見(jiàn)屬性學(xué)習(xí)情境七教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究知識(shí)回顧:通過(guò)justify-content屬性,可設(shè)置主軸上的子元素排列方式如果要設(shè)置側(cè)軸上的子元素排列方式,又該怎么做呢?教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥1.
定義align-items屬性是控制子項(xiàng)在側(cè)軸(默認(rèn)是y軸)上的排列方式在子項(xiàng)為單項(xiàng)(單行)的時(shí)候使用。教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.用法屬性值說(shuō)明flex-start從上到下flex-end
從下到上center
擠在一起居中(垂直居中)stretch
拉伸
(默認(rèn)值
)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2:效果分析【align-items的簡(jiǎn)單運(yùn)用】教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.設(shè)置基礎(chǔ)樣式教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.設(shè)置基礎(chǔ)樣式3.給父容器設(shè)置align-items屬性教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)4:操作展示[操作演示]完成align-items的簡(jiǎn)單運(yùn)用教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)4學(xué)生實(shí)踐操作任務(wù)1:新建站點(diǎn)與網(wǎng)頁(yè)任務(wù)2:添加元素結(jié)構(gòu)任務(wù)3:設(shè)置標(biāo)記屬性任務(wù)4:網(wǎng)頁(yè)預(yù)覽、調(diào)試任務(wù)5:保存、提交作業(yè)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)5總結(jié)、評(píng)價(jià)本節(jié)小結(jié)教學(xué)評(píng)價(jià)align-items屬性的含義及用法學(xué)習(xí)通課中完成教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)6布置作業(yè)、預(yù)習(xí)任務(wù)作業(yè)預(yù)習(xí)完成align-items的運(yùn)用的樣式flex-flow屬性flex布局子項(xiàng)常見(jiàn)屬性學(xué)習(xí)情境八教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)1任務(wù)引入與分析探究1.這種變化效果是如何實(shí)現(xiàn)的?教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)2知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥1.flex屬性flex屬性定義子項(xiàng)目分配剩余空間,用flex來(lái)表示占多少份數(shù)。實(shí)際的分配額度=各自的份數(shù)/同級(jí)子項(xiàng)的總份數(shù)教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)1:知識(shí)點(diǎn)撥2.格式item{flex:<number>;}教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)2:效果分析【搜索框的簡(jiǎn)易效果】教學(xué)內(nèi)容與過(guò)程Flex值教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3知識(shí)講解與演示操作任務(wù)3:代碼實(shí)現(xiàn)【步驟演示】1.搭建結(jié)構(gòu)2.給兩側(cè)子項(xiàng)目設(shè)置樣式3.給中間子項(xiàng)目添加flex屬性教學(xué)內(nèi)容與過(guò)程環(huán)節(jié)3
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2030中國(guó)電子郵件簽名軟件行業(yè)產(chǎn)業(yè)運(yùn)行態(tài)勢(shì)及投資規(guī)劃深度研究報(bào)告
- 2025至2030中國(guó)電動(dòng)鎖具行業(yè)市場(chǎng)深度分析及競(jìng)爭(zhēng)格局與投資前景報(bào)告
- 2025至2030中國(guó)瑜伽短褲行業(yè)發(fā)展趨勢(shì)分析與未來(lái)投資戰(zhàn)略咨詢研究報(bào)告
- 2025至2030中國(guó)特級(jí)面粉行業(yè)市場(chǎng)深度研究與戰(zhàn)略咨詢分析報(bào)告
- 學(xué)習(xí)動(dòng)機(jī)的強(qiáng)化策略教育心理學(xué)的視角
- 智能教育未來(lái)展望組委會(huì)的角色與影響
- 2025秋季教務(wù)處工作計(jì)劃:打造8大體系 培育時(shí)代新人
- 數(shù)字化教育資源的建設(shè)與共享
- 抖音商戶短視頻拍攝流程標(biāo)準(zhǔn)化規(guī)定
- 抖音商戶數(shù)據(jù)分析師用戶分層運(yùn)營(yíng)制度
- 2025年西安高新區(qū)管委會(huì)招聘考試試卷
- 2024-2025學(xué)年成都市青羊區(qū)七年級(jí)下英語(yǔ)期末考試題(含答案)
- 2018-2024年中國(guó)西瓜行業(yè)市場(chǎng)趨勢(shì)分析及投資潛力研究報(bào)告
- SL631水利水電工程單元工程施工質(zhì)量驗(yàn)收標(biāo)準(zhǔn)第1部分:土石方工程
- (正式版)HGT 22820-2024 化工安全儀表系統(tǒng)工程設(shè)計(jì)規(guī)范
- 學(xué)校中層干部選拔考試教育教學(xué)管理知識(shí)試題題庫(kù)(包含:名詞解釋、簡(jiǎn)答題、論述題、案例分析)
- 超外差收音機(jī)實(shí)習(xí)報(bào)告2000字
- 客棧承包合同
- 住所(經(jīng)營(yíng)場(chǎng)所)產(chǎn)權(quán)證明(模版)
- 下土地嶺滑坡穩(wěn)定性分析及風(fēng)險(xiǎn)計(jì)算
- T∕CHAS 10-4-9-2019 中國(guó)醫(yī)院質(zhì)量安全管理 第4-9部分:醫(yī)療管理危急值管理
評(píng)論
0/150
提交評(píng)論