《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)_第1頁(yè)
《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)_第2頁(yè)
《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)_第3頁(yè)
《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)_第4頁(yè)
《響應(yīng)式開(kāi)發(fā)技術(shù)》課件-2. flex布局基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè),還剩59頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論