Web前端開發(fā)項(xiàng)目案例教程 課件 項(xiàng)目3 線上博物館

項(xiàng)目3線上博物館HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)理解網(wǎng)頁模塊命名的規(guī)范理解布局視口、視覺視口和理想視口的概念掌握百分比布局的使用理解Flex布局的結(jié)構(gòu)掌握Flex容器屬性與項(xiàng)目屬性的使用掌握媒體查詢的語法和用法掌握Rem布局和Grid布局的使用技能目標(biāo)熟練使用視口和百分比布局完成移動(dòng)端線上博物館的基礎(chǔ)布局熟練使用Flex布局搭建更豐富與個(gè)性化的移動(dòng)端線上博物館熟練使用媒體查詢、Rem布局和Grid布局搭建更美觀與便捷的移動(dòng)端線上博物館HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢學(xué)習(xí)目標(biāo)素質(zhì)目標(biāo)培養(yǎng)學(xué)生具備響應(yīng)式設(shè)計(jì)思維，能夠從用戶體驗(yàn)出發(fā)設(shè)計(jì)網(wǎng)頁培養(yǎng)學(xué)生養(yǎng)成良好的網(wǎng)頁模塊命名規(guī)范意識(shí)，注重代碼的可讀性和可維護(hù)性HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢學(xué)習(xí)內(nèi)容任務(wù)1完成移動(dòng)端線上博物館的基礎(chǔ)布局任務(wù)2為線上博物館添加Flex布局任務(wù)3為線上博物館設(shè)置Rem與Grid布局HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢項(xiàng)目描述移動(dòng)端線上博物館項(xiàng)目主要以首頁為例，使用不同布局展示不同的首頁效果。首頁展示的內(nèi)容主要包括標(biāo)題模塊、廣告模塊、欄目分類模塊、專題展覽模塊和底部導(dǎo)航欄模塊（任務(wù)3中實(shí)現(xiàn)）。通過對(duì)移動(dòng)端線上博物館項(xiàng)目的學(xué)習(xí)，讀者將掌握網(wǎng)頁模塊的命名規(guī)范、視口、百分比布局、Flex結(jié)構(gòu)、Flex容器與項(xiàng)目屬性、媒體查詢、Rem布局和Grid布局等知識(shí)的運(yùn)用。任務(wù)1完成移動(dòng)端線上博物館的基礎(chǔ)布局1HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢需求分析需求的具體介紹如下。1.移動(dòng)端線上博物館首頁包含標(biāo)題模塊、廣告模塊、欄目分類模塊和專題展覽模塊。2.標(biāo)題模塊中展示頁面的名稱。3.廣告欄模塊中展示一張博物館的圖片。4.欄目分類模塊中展示歷史故事、展館活動(dòng)、旅游指南和預(yù)訂中心的圖標(biāo)和文字信息5.專題展覽模塊中展示中國古代不同專題的圖片信息。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢需求分析通過需求使用百分比布局實(shí)現(xiàn)線上博物館首頁的效果如右圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢知識(shí)儲(chǔ)備一、網(wǎng)頁模塊命名規(guī)范二、視口三、百分比布局HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、網(wǎng)頁模塊命名規(guī)范

一般而言，為網(wǎng)頁模塊命名時(shí)需遵循三大核心原則。（1）命名避免使用中文字符（如id="內(nèi)容"）。（2）命名不能以數(shù)字開頭（如id="1header"）。（3）命名不能使用關(guān)鍵字（如id="div"）。在網(wǎng)頁開發(fā)中，常用駝峰式和帕斯卡這2種命名方式，具體說明如下。（1）駝峰式命名：除第一個(gè)單詞后面的單詞首字母都要大寫(如navOne)。（2）帕斯卡命名：每個(gè)單詞之間用“_”連接(如nav_one)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

在PC端，視口僅表示瀏覽器的可視區(qū)域，視口寬度與瀏覽器窗口寬度保持一致。在移動(dòng)端，視口與移動(dòng)端瀏覽器的寬度并不關(guān)聯(lián)，移動(dòng)端視口較為復(fù)雜，主要涉及三個(gè)視口：布局視口、視覺視口和理想視口。

1.布局視口

布局視口（（LayoutViewport））指的是網(wǎng)頁的寬度，一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)添加一個(gè)viewport元標(biāo)簽用于設(shè)置布局視口。根據(jù)設(shè)備類型的不同，布局視口的默認(rèn)寬度可能是768px、980px或1024px，在移動(dòng)設(shè)備中這些固定寬度并不適用。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

布局視口如下圖所示。布局視口的理想的寬度指的是以CSS像素為單位計(jì)算的寬度，即屏幕的邏輯像素寬度，與設(shè)備的物理像素寬度并無關(guān)聯(lián)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

2.視覺視口

視覺視口（VisualViewport）通俗來說就是用戶當(dāng)前所看到的區(qū)域。在PC端，瀏覽器窗口可隨意改變大小，我們可直觀的看到窗口發(fā)生的變化。在移動(dòng)端，大部分移動(dòng)端設(shè)備的瀏覽器并不支持改變?yōu)g覽器寬高，因此視覺視口就是其屏幕大小，視覺視口寬度和設(shè)備屏幕寬度始終保持一致。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

3.理想視口

理想視口實(shí)現(xiàn)頁面在設(shè)備中的最佳呈現(xiàn)，理想視口是布局視口的一個(gè)理想尺寸。顯示在理想視口中的網(wǎng)頁擁有最理想的瀏覽、閱讀寬度，用戶無需對(duì)頁面進(jìn)行縮放便可完美地瀏覽整個(gè)頁面。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

4.使用視口

通過<meta>視口標(biāo)簽可以在不同的設(shè)備上設(shè)置視口，<meta>視口標(biāo)簽的語法格式如下所示。完整視口的寫法如下所示。<metaname="viewport"content="視口的屬性"><metaname=viewportcontent="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、視口

<meta>標(biāo)簽中常用的屬性及說明如下表所示

。

屬性說明width設(shè)置布局視口的寬度，可指定固定值，如600。也可指定特殊值，如device-width表示視口寬度為當(dāng)前設(shè)備的寬度，單位為像素height與width相對(duì)應(yīng)，設(shè)置布局視口的高度。該屬性可設(shè)置為數(shù)值或device-height，單位為像素user-scalable設(shè)置用戶是否可以手動(dòng)縮放。yes表示可以手動(dòng)縮放，no表示禁止手動(dòng)縮放initial-scale設(shè)置頁面的初始縮放比例，即頁面第一次加載時(shí)的縮放比例，屬性值為大于0的數(shù)字minimum-scale設(shè)置允許用戶縮放頁面的最小比例，即最小縮放比，屬性值為大于0的數(shù)字maximum-scale設(shè)置允許用戶縮放頁面的最大比例，即最大縮放比，屬性值為大于0的數(shù)字minimal-ui<meta>標(biāo)簽新增的屬性，可以使網(wǎng)頁在加載時(shí)便可隱藏頂部的地址欄與底部的導(dǎo)航欄HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、百分比布局

百分比布局是一種等比例縮放的布局方式，是移動(dòng)端開發(fā)中經(jīng)常使用的布局方式之一。

百分比布局的特點(diǎn)有以下3個(gè)方面。

（1）盒子寬度自適應(yīng)，使用百分比來定義，但高度使用固定px像素值定義。

（2）盒子內(nèi)的圖標(biāo)、字體大小等都是固定的，不是所有內(nèi)容都是自適應(yīng)。

（3）在CSS樣式中，需要使用min-*和max-*屬性來設(shè)置盒子在設(shè)備中的最小寬度和最大寬度，防止任意拉伸頁面導(dǎo)致異常問題的發(fā)生。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、百分比布局

下面通過一個(gè)例子演示百分比布局的使用方式，核心代碼與運(yùn)行效果如下所示。<head>

......<!--設(shè)置視口--><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>百分比布局</title></head>/*設(shè)置整個(gè)頁面*/body{width:100%;min-width:240px;/*移動(dòng)端視口的最小寬度*/max-width:500px;/*最大寬度*/

......}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、百分比布局/*設(shè)置移動(dòng)端頁面中的無序列表盒子*/ul{width:100%;/*寬度100%*/height:280px;/*高度*/list-style:none;/*取消項(xiàng)目列表標(biāo)記*/}

......

/*分別設(shè)置第1~3個(gè)子元素在父盒子中的百分比寬度*/ulli:nth-child(1){width:25%;}ulli:nth-child(2){width:29%;}ulli:nth-child(3){width:46%;}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、百分比布局<h3>博物館展覽</h3><ul><li><imgsrc="../images/ancient_china.png"alt=""><span>中國古代</span></li><li><imgsrc="../images/ancient_coins.png"alt=""><span>古代錢幣</span></li>

......

HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)現(xiàn)

在chapter03文件夾中創(chuàng)建一個(gè)名為museum_percent.html的文件，用于實(shí)現(xiàn)線上博物館首頁。

<head>

......<!--設(shè)置視口--><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>線上博物館</title><linktype="text/css"rel="stylesheet"href="percent.css"></head><body><h3>博物館展覽</h3><!--廣告模塊--><divclass="banner"><imgsrc="images/banner.png"alt=""></div><!--欄目分類模塊--><divclass="column"><ahref="#"><imgsrc="images/col_history.png"alt=""><span>歷史故事</span></a>......HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)現(xiàn)

在chapter03文件夾中創(chuàng)建一個(gè)名為percent.css的文件，用于設(shè)置線上博物館首頁的樣式。

/*設(shè)置整個(gè)頁面*/body{width:100%;min-width:240px;/*移動(dòng)端視口的最小寬度*/max-width:520px;/*最大寬度*/margin:0auto;font-size:16px;/*字體大小*/color:#0b0b0b;/*文字顏色*/}

/*廣告模塊*/.banner{width:100%;height:35%;}/*廣告模塊中的圖片*/.bannerimg{width:100%;height:100%;vertical-align:middle;/*清除圖片底部空白間隙*/}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)現(xiàn)/*超鏈接中的圖片*/.columnaimg{display:block;/*轉(zhuǎn)為塊級(jí)元素*/width:80px;height:80px;margin:10pxauto4px;}/*超鏈接中的文字*/.columnaspan{display:block;font-size:14px;font-weight:600;color:#6c6f78;}

/*專題展覽模塊*/.image-container{width:100%;/*使容器寬度填滿父容器*/font-size:0;/*移除圖片間的默認(rèn)間距*/overflow:hidden;/*如果圖片溢出則隱藏，防止影響布局*/}/*專題展覽模塊中的圖片*/.image-containerimg{width:25%;/*每張圖片占滿容器寬度的25%*/height:160px;/*保持圖片的原始寬高比*/display:inline-block;/*使圖片并排顯示*/vertical-align:top;/*防止圖片底部出現(xiàn)小間隙*/}任務(wù)2為線上博物館添加Flex布局2HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢需求分析我們?cè)谑醉摌?biāo)題模塊中將標(biāo)題改為一個(gè)搜索框，在搜索框右側(cè)添加一個(gè)掃一掃圖標(biāo)。搜索框便于用戶在短時(shí)間內(nèi)精確定位展覽信息和展品詳情，用戶點(diǎn)擊掃一掃圖標(biāo)可以掃描展品旁邊的二維碼，立即獲取到展品的詳細(xì)介紹、圖片、視頻、語音講解等內(nèi)容，提升參觀體驗(yàn)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢知識(shí)儲(chǔ)備一、Flex結(jié)構(gòu)二、Flex容器屬性三、Flex項(xiàng)目屬性HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、Flex結(jié)構(gòu)

Flex是FlexibleBox的縮寫，意為“彈性布局”，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)可確保元素?fù)碛星‘?dāng)行為的布局方式。Flex布局可提供一種更加有效的方式對(duì)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。

任何一個(gè)容器都可以使用display屬性指定為Flex布局，示例代碼如下。塊級(jí)元素display:flex;

內(nèi)聯(lián)元素display:inline-flex;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、Flex結(jié)構(gòu)

Flex容器默認(rèn)存在兩根軸，即水平的主軸（mainaxis）和垂直的交叉軸（也稱為側(cè)軸，crossaxis）。主軸的開始位置（與邊框的交叉點(diǎn)）稱為mainstart，結(jié)束位置稱為mainend；交叉軸的開始位置稱為crossstart，結(jié)束位置稱為crossend。

Flex布局的結(jié)構(gòu)如右圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性

Flex布局的容器屬性有6個(gè)，分別為flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content。

1.flex-direction屬性

flex-direction屬性決定主軸的方向，即項(xiàng)目的排列方向，其語法格式如下。flex-direction:row|row-reverse|column|column-reverse;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性flex-direction屬性有4個(gè)屬性值，這些屬性值的說明如下表所示。屬性值說明column-reverse主軸為垂直方向，起點(diǎn)在下沿column主軸為垂直方向，起點(diǎn)在上沿row默認(rèn)值，主軸為水平方向，起點(diǎn)在左端row-reverse主軸為水平方向，起點(diǎn)在右端

flex-direction屬性決定主軸的4種排列方向如下圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性2.flex-wrap屬性flex-wrap屬性可用于定義當(dāng)一條軸線排不下所有項(xiàng)目時(shí)，項(xiàng)目的換行方式。flex-wrap屬性的語法格式如下所示。屬性值說明nowrap默認(rèn)值，項(xiàng)目不換行wrap換行，第一行在上方wrap-reverse換行，第一行在下方

flex-wrap屬性有3個(gè)屬性值，這些屬性值的具體說明如下表所示。flex-wrap:nowrap|wrap|wrap-reverse;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性下面通過一個(gè)例子演示flex-direction屬性和flex-wrap屬性的使用。

ul{width:100%;border:1pxsolid#666;display:flex;/*指定為flex布局*/flex-direction:row-reverse;/*主軸為水平方向，起點(diǎn)在右端*/flex-wrap:wrap-reverse;/*換行，第一行在下方*/}ul>li{width:21%;/*內(nèi)容寬度+左右外邊距：21%+2%+2%=25%*/height:50px;margin:2%;background-color:#e89e9e;}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性3.justify-content屬性justify-content屬性定義項(xiàng)目在主軸上的對(duì)齊方式，具體對(duì)齊方式與主軸的方向有關(guān)，其語法格式如下。justify-content:flex-start|flex-end|center|space-between|space-around;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性屬性值說明flex-start默認(rèn)值，左對(duì)齊flex-end右對(duì)齊center居中space-between兩端對(duì)齊，項(xiàng)目之間的間隔都相等space-around每個(gè)項(xiàng)目兩側(cè)的間隔相等

justify-content屬性有5個(gè)屬性值，這些屬性值的具體說明如下表所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性4.align-items屬性align-items屬性定義項(xiàng)目在交叉軸（側(cè)軸）上的對(duì)齊方式，在子項(xiàng)為單項(xiàng)時(shí)使用，具體的對(duì)齊方式與交叉軸的方向有關(guān)，其語法格式如下。align-items:flex-start|flex-end|center|baseline|stretch;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性下面通過一個(gè)例子演示justify-content屬性和align-items屬性的使用。

ul{width:100%;height:200px;border:1pxsolid#666;display:flex;/*指定為flex布局*/flex-direction:row-reverse;/*主軸為水平方向，起點(diǎn)在右端*/justify-content:center;/*在主軸方向居中對(duì)齊*/align-items:center;/*在交叉軸方向居中對(duì)齊*/}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性屬性值說明flex-start交叉軸的起點(diǎn)對(duì)齊flex-end交叉軸的終點(diǎn)對(duì)齊center交叉軸的中點(diǎn)對(duì)齊baseline項(xiàng)目的第一行文字的基線對(duì)齊stretch默認(rèn)值，伸縮，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度

align-items屬性有5個(gè)屬性值，這些屬性值的具體說明如下表所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性

5.align-content屬性

align-content屬性定義多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用，即flex-wrap屬性沒有使用wrap換行，align-content屬性不起作用。align-content屬性的語法格式如下。align-content:flex-start|flex-end|center|space-between|space-around|stretch;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性屬性值說明flex-start與交叉軸的起點(diǎn)對(duì)齊flex-end與交叉軸的終點(diǎn)對(duì)齊center與交叉軸的中點(diǎn)對(duì)齊space-between與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布space-around每根軸線兩側(cè)的間隔都相等，因此軸線之間的間隔比軸線與邊框的間隔大一倍stretch默認(rèn)值，拉伸，軸線占滿整個(gè)交叉軸align-content屬性有6個(gè)屬性值，這些屬性值的具體說明如下表所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Flex容器屬性6.flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。flex-flow屬性的語法格式如下。flex-flow:<flex-direction>||<flex-wrap>;HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性

Flex布局的項(xiàng)目屬性有6個(gè)，分別為order、flex-grow、flex-shrink、flex-basis、flex和align-self。1.order屬性order:<integer>;

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)屬性值為0。order屬性的語法格式如下。

order屬性通過數(shù)值大小定義項(xiàng)目的排列順序，如下圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性

3.flex-shrink屬性flex-shrink:<number>;/*default1*/

flex-shrink屬性定義項(xiàng)目的縮小比例，默認(rèn)值為1，即如果容器空間不足，該項(xiàng)目將縮小。flex-shrink屬性的語法格式如下。

下面通過一個(gè)例子演示flex-shrink屬性的使用。

/*容器*/.flex{display:flex;/*指定為Flex布局*/width:600px;height:200px;border:1pxsolid#666;list-style:none;/*取消列表標(biāo)記*/margin:20pxauto;align-items:center;/*交叉軸上的對(duì)齊方式，居中*/}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性/*項(xiàng)目*/li{width:250px;height:120px;font-size:20px;}li:nth-child(1){background-color:#ee4949;flex-shrink:0;/*250px,項(xiàng)目的縮小比例，不縮小*/}

li:nth-child(2){background-color:#4df26c;flex-shrink:2;/*190px,項(xiàng)目的縮小比例，2/(0+2+3)=2/5*/}li:nth-child(3){background-color:#efc333;flex-shrink:3;/*160px,項(xiàng)目的縮小比例，3/(0+2+3)=3/5*/}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性<!--容器--><ulclass="flex"><!--項(xiàng)目--><li>First</li><li>Second</li><li>Third</li></ul>HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性

4.flex-basis屬性flex-basis:<length>|auto;/*defaultauto*/

flex-basis屬性定義在分配多余空間之前，項(xiàng)目所占據(jù)的主軸空間（mainsize）。它的默認(rèn)值為auto，即項(xiàng)目的原始大小。flex-basis屬性的語法格式如下。flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]

flex屬性是flex-grow屬性、flex-shrink屬性和flex-basis屬性的簡寫，默認(rèn)值為01auto。flex-shrink屬性和flex-basis屬性為可選屬性。Felx屬性的語法格式如下。5.flex屬性HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Flex項(xiàng)目屬性6.align-self屬性align-self:auto|flex-start|flex-end|center|baseline|stretch;

align-self屬性允許單個(gè)項(xiàng)目具備與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。align-self屬性的語法如下。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)現(xiàn)

在chapter03文件夾中創(chuàng)建一個(gè)名為museum_flex.html的文件，該文件用于實(shí)現(xiàn)線上博物館首頁。

<!—標(biāo)題模塊--><divclass="search"><!--輸入框--><divclass="text"><!--放大鏡圖標(biāo)--><spanclass="glass"></span><inputtype="search"value="歷史古籍"></div><!--掃一掃--><ahref="#"class="sao"></a></div>/*頂部搜索框*/.search{display:flex;/*指定為flex布局*/width:100%;min-width:320px;/*規(guī)定最小和最大寬度*/max-width:520px;

......position:fixed;/*添加固定定位*/top:0;left:50%;/*距離左側(cè)偏移50%*/transform:translateX(-50%);/*向左位移自身50%寬度*/z-index:99;}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)現(xiàn)

/*輸入框的父元素*/.search.text{display:flex;position:relative;/*添加相對(duì)定位*/flex:1;/*得到搜索框模塊的所有剩余空間*/height:35px;background-color:rgb(250,250,250,.3);margin:10px10px10px60px;border-radius:15px;overflow:hidden;/*消除添加圓角之后的異常問題*/}/*放大鏡圖標(biāo)*/.search.text.glass{display:inline-block;width:24px;height:24px;background:url('images/glass.png')no-repeat;background-size:100%100%;margin:5px10px;}......具體代碼可參考教材或提供的源代碼任務(wù)3為線上博物館設(shè)置Rem與Grid布局3HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢需求分析移動(dòng)端線上博物館首頁添加了展覽名稱信息與底部導(dǎo)航欄。展覽名稱信息展示在專題展覽模塊的每張圖片下方，用于提醒用戶當(dāng)前展覽的主題和內(nèi)容。底部導(dǎo)航欄添加在首頁底部，導(dǎo)航欄中設(shè)置了首頁、精品分類、視頻講解和博物館簡介文本信息，以及這些文本對(duì)應(yīng)的圖標(biāo)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢知識(shí)儲(chǔ)備一、媒體查詢二、Rem布局三、Grid布局HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、媒體查詢使用@media查詢，可以針對(duì)不同的媒體類型和屏幕尺寸來定義不同的樣式操作，媒體查詢的語法格式如下。@media媒體類型and|not|only媒體特性{CSScode}媒體類型取值說明如下表所示。值說明all用于所有設(shè)備print用于打印機(jī)和打印瀏覽screen用于電腦屏幕、平板電腦、智能手機(jī)等speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、媒體查詢媒體特性取值說明如下表所示。值說明max-width定義最大可見區(qū)域?qū)挾萴in-width定義最小可見區(qū)域?qū)挾萴ax-height定義最大可見區(qū)域高度min-height定義最小可見區(qū)域高度orientation定義輸出設(shè)備中的頁面為portrait豎屏或landscape橫屏媒體查詢有2點(diǎn)需要注意的事項(xiàng)，如下所示。（1）媒體查詢通常是根據(jù)屏幕的尺寸按照從大到小或者從小到大的順序來編寫代碼，建議按照從小到大的順序，這是由于后面的樣式會(huì)覆蓋前面的樣式，當(dāng)屏幕尺寸區(qū)間有重合的地方時(shí)，可以省略重合區(qū)間的代碼。（2）min-width最小值和max-width最大值都是包含等于的，在賦值時(shí)，一定要注意這一點(diǎn)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、媒體查詢下面通過一個(gè)例子演示根據(jù)不同的屏幕尺寸改變?cè)氐谋尘邦伾团帕蟹较颉?/p>

ul{

......

overflow:hidden;/*清除浮動(dòng)帶來的影響*/}/*屏幕小于500px時(shí)*/

@mediascreenand(max-width:499px){ul>li{background-color:#ed0a0a;/*背景顏色為紅色*/}}

/*屏幕在500px~900px時(shí)*/

@mediascreenand(min-width:500px){ul>li{background-color:#f30deb;/*背景顏色為紫色*/float:left;}

}/*屏幕大于900px時(shí)*/

@mediascreenand(min-width:901px){

ul>li{

background-color:#5418ec;/*背景顏色為藍(lán)色*/

}}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、媒體查詢當(dāng)屏幕寬度小于500px時(shí)，媒體查詢的運(yùn)行效果如下圖所示。當(dāng)屏幕寬度大于500px~900px時(shí)，媒體查詢的運(yùn)行效果如下圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢一、媒體查詢當(dāng)屏幕寬度大于900px時(shí)，媒體查詢的運(yùn)行效果如下圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Rem布局

Rem布局主要是為了解決字體隨屏幕變化的問題，實(shí)現(xiàn)高度和寬度等比例縮放。rem(rootem)是一個(gè)相對(duì)單位，類似于em。em作為font-size的單位時(shí)，代表其父元素的字體大??；em作為其他屬性的單位時(shí)，代表自身字體大小。rem的優(yōu)點(diǎn)是可以通過修改根元素（html）中的文字大小來同步修改頁面中其它元素的大小，通過rem既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Rem布局

下面通過一個(gè)例子演示rem單位和em單位的使用。

/*定義html文字大小*/html{font-size:16px;}div{font-size:20px;/*定義p元素的父元素文字大小*/width:20rem;/*20*16=320px*/height:15rem;

......}.p1{/*rem相對(duì)于html元素的字體大小*/width:15rem;/*15*16=240px*/height:10rem;font-size:1rem;/*1*16=16px*/background-color:rgb(184,207,245);}.p2{/*em相對(duì)于父元素的字體大小*/width:15em;/*15*20=300px*/height:10em;font-size:1em;/*1*20=20px*/background-color:rgb(184,243,207);}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢二、Rem布局

rem單位與em單位的運(yùn)行效果如下圖所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Grid布局

Grid布局又稱為網(wǎng)格布局，它允許開發(fā)者將網(wǎng)頁劃分為行和列的網(wǎng)格結(jié)構(gòu)，并通過定義網(wǎng)格單元格來定位和對(duì)齊網(wǎng)頁中的元素。常見的網(wǎng)格布局屬性如下表所示。屬性說明display網(wǎng)格容器屬性，將元素設(shè)置為網(wǎng)格容器。grid-template-columns定義網(wǎng)格布局中的列數(shù)以及每列的寬度。grid-template-rows用于定義網(wǎng)格布局的行數(shù)以及每行的高度grid-gap/gap用于設(shè)置網(wǎng)格行和列之間的間距。row-gap設(shè)置行間距，column-gap設(shè)置列間距justify-content控制網(wǎng)格容器內(nèi)所有網(wǎng)格項(xiàng)在水平方向上的對(duì)齊方式align-content控制網(wǎng)格容器內(nèi)所有網(wǎng)格項(xiàng)在垂直方向上的對(duì)齊方式HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢三、Grid布局

下面通過一個(gè)例子演示Grid布局的使用。.grid-container{display:grid;grid-template-columns:repeat(2,1fr);/*創(chuàng)建兩列，每列寬度相等*//*創(chuàng)建兩行，每行高度為100px*/grid-template-rows:repeat(2,100px);gap:10px;/*設(shè)置網(wǎng)格項(xiàng)之間的間隙*/width:400px;/*設(shè)置網(wǎng)格容器的寬度*/border:1pxsolid#000;/*給網(wǎng)格容器添加邊框*/}.grid-item{/*設(shè)置網(wǎng)格項(xiàng)的背景顏色*/background-color:lightblue;text-align:center;/*文本居中顯示*/font-size:20px;line-height:100px;