Web前端技術(shù)項目式教程(HTML5CSS3FlexBootstrap)教案-使用Flex實現(xiàn)網(wǎng)頁響應(yīng)式布局

1、第8章使用FleX實現(xiàn)網(wǎng)頁響應(yīng)式布局課程名稱Web前端開發(fā)項目名稱使用Flex布局實現(xiàn) 網(wǎng)頁響應(yīng)式布局任務(wù)名稱使用Flex布局實現(xiàn)網(wǎng)頁響應(yīng)式布局課時6項目性質(zhì)演示性驗證性設(shè)計性綜合性授課班級授課日期授課地點教學(xué)目標(biāo)能力目標(biāo)：1. 具備應(yīng)用Flex實現(xiàn)響應(yīng)式布局的能力2. 具備靈活運用Flex的能力 知識目標(biāo)：1. 掌握響應(yīng)式布局的基礎(chǔ)知識2. 掌握Flex布局的基本語法3. 掌握運用Flex布局實現(xiàn)各種響應(yīng)式布局的方法 素質(zhì)目標(biāo)：1. 培養(yǎng)學(xué)生信息搜集能力2. 培養(yǎng)學(xué)生團結(jié)合作、互幫互助的能力教學(xué)內(nèi)容1. 任務(wù)描述2. 任務(wù)展示與實現(xiàn)（1）創(chuàng)建響應(yīng)式布局的基本結(jié)構(gòu)（2） 實現(xiàn)云景旅游公司首頁F

2、lex布局（2）學(xué)生動手操作3. 教師講解本任務(wù)涉及的知識點4. 任務(wù)小結(jié)教學(xué)重點1. 響應(yīng)式布局基礎(chǔ)知識2. Flex實現(xiàn)響應(yīng)式網(wǎng)頁教學(xué)難點1. Flex 基本語法2. Flex實現(xiàn)響應(yīng)式網(wǎng)頁教學(xué)準(zhǔn)備1. 裝有SUbIime或者HbUilder 的電腦2. 教學(xué)課件PPT3. 教材：Web前端技術(shù)項目式教程作業(yè)設(shè)計使用Flex實現(xiàn)游公司二級頁面“公司概況”的響應(yīng)式效果。教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）課前組織做好課前“ 5分鐘”教學(xué)管理（多媒體、實訓(xùn)室），做好上課前的各項準(zhǔn)備工作（打開電腦、打 開課件、打開軟件、打開 U盤中的素材位置、打開授課計劃、教

3、案等），吸引學(xué)生注意力。課程說明【課前說明】分別從響應(yīng)式布局基礎(chǔ)知識、FleX語法基礎(chǔ)，掌握響應(yīng)式網(wǎng)頁的實現(xiàn)方法?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本單元知識的要求和目 標(biāo)。掌握Flex布局的基礎(chǔ)，掌握使用 Flex實現(xiàn)響應(yīng)式網(wǎng)頁的方法。課程內(nèi)容描述一、響應(yīng)式布局基礎(chǔ)無論使用Flex布局還是Bootstrap框架實現(xiàn)響應(yīng)式網(wǎng)頁，都必須首先掌握響應(yīng)式布局的基礎(chǔ)知識，主要包括：VieWPOrt設(shè)置、百分比寬度布局、相對大小子體、彈性圖片、媒體查詢，下面逐一進行介紹。二、Flex布局采用Flex布局的元素，簡稱“容器”。它的所有子元素自動成為容器成員，簡稱“項目”

4、。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）為main Start ,結(jié)束位置為 main end ;交叉軸的開始位置為 cross start，結(jié)束位置為crossend。項目默認沿主軸排列。單個項目占據(jù)的主軸空間為main SiZe ,占據(jù)的交叉軸空間為cross SiZeO（1）容器的屬性Flex布局的語法一共包含12個屬性，其中，6個設(shè)置在容器上，6個設(shè)置在項目上。下面先介紹設(shè)置在容器上的屬性：flex -direction屬性、flex -WraP屬性、flex -flow 屬性、justify -CO

5、ntent屬性、align -items 屬性、align-content 屬性。（2）項目的屬性另外6個屬性設(shè)置在項目上：Order屬性、flex-grow屬性、flex-shrink屬性、flex-basis屬性、flex屬性、align-self屬性。課堂冋步訓(xùn)練：使用FleX實現(xiàn)云景旅游公司首頁響應(yīng)式布局實訓(xùn)1.實現(xiàn)首頁頭部響應(yīng)式效果手機端頁面最終的顯示效果是：Logo、導(dǎo)航、導(dǎo)航項、搜索表單全部居中。厶I景旅游手機端頁面頭部Flex代碼1.ogo2display: flex;3justify-c Ontent: Cen ter;45nav ul li6display: flex;7j

6、ustify-c Ontent: Cen ter;89.n avbar form 10display: flex;1112.n avbar in PUt 13flex-grow: 1;14B厶:景旅游PAD端頁面頭部Flex代碼1media(mi n-width:768px)2nav ul3display: flex;45n av6display: flex;7JUStify-C Ontent: Cen ter;89I厶I景旅游桌面端頁面頭部Flex代碼1media(mi n-width:992px)2header3display: flex;45.n avbar6display: flex;

7、7flex: 1;8 justify-c Ontent: SPaCe-betwee n;9 10 .n avbar in put11 flex-grow: 0;/12 13 2. 主體內(nèi)容.main_top區(qū)域?qū)崿F(xiàn).top區(qū)域Flex代碼1 .top2 display: flex;3 4 .top_left5 flex: 1;6 display: flex;7 alig n-items: Cen ter;8 9 .top_right10 flex: 1;11 .bottom區(qū)域FleX代碼1 .bottom2 display: flex;3 4 .col5 flex: 1;6 3. 主體內(nèi)容.

8、main_middle 區(qū)域?qū)崿F(xiàn).main_middle區(qū)域包含兩個.jingqu部分，兩部分代碼相同，此處只列舉其中一個部分代碼。.jingqu區(qū)域Flex代碼1 .jin gqu2 display: flex;3 4 .ji ngqu .tra nsbox5 flex: 2;6 7 .jin gqu_img8flex: 5;910.ji ngqu_img ul11display: flex;12flex-wrap: wrap;134.主體內(nèi)容.main_bottom 區(qū)域?qū)崿F(xiàn)下面詳細介紹實現(xiàn)這個區(qū)域布局效果的Flex代碼。.main_bottom 區(qū)域 FleX 代碼1.ma in _bo

9、ttom2display: flex;3alig n-items: Cen ter;45.ma in _bottom>div6display: flex;78.main_bottom div div9flex: 1;10 Flex實現(xiàn)水平居中和垂直居中1.main_bottom div div:first-child p2display: flex;3align-items: Ce nter;4justify-c Ontent: Cen ter;55.實現(xiàn)頁腳效果下面介紹實現(xiàn)網(wǎng)頁頁腳效果的Flex代碼。Flex實現(xiàn)頁腳導(dǎo)航水平排列footer uldisplay: flex;Flex實現(xiàn)頁腳信息兩端對齊1footer div p2display: flex;3justify-c Ontent: SPaCe-betwee n;4總結(jié)評價通過學(xué)習(xí)，學(xué)生能夠掌握響應(yīng)式布局的基本原理方法，掌握使用FleX實現(xiàn)響應(yīng)式布局的基本方法。本節(jié)課主要運用案例教學(xué)法，通過使用Fle