HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局

1、html5+css3基礎(chǔ)響應(yīng)式頁面布局隨著互聯(lián)網(wǎng)時代的進(jìn)展，我們對網(wǎng)頁布局有了新的要求，大氣，美觀，能夠在不同的設(shè)備上展現(xiàn)令人面貌一新的效果。此時，一個全新的概念—響應(yīng)式布局應(yīng)運(yùn)而生。它的出生為我們的移動端布局帶來了很大的方便。因此學(xué)習(xí)響應(yīng)式頁面布局勢在必行！一、響應(yīng)式頁面布局的概念響應(yīng)式布局是ethan marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)掃瞄器而出生的。二、響應(yīng)式布局的優(yōu)勢響應(yīng)式布局可以為不同終端的用戶提供越發(fā)舒服的

2、界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動設(shè)備的普及，用大勢所趨來形容也不為過。隨著越來越多的設(shè)計師采納這個技術(shù)，我們不僅看到無數(shù)的創(chuàng)新，還看到了一些成形的模式。三、響應(yīng)式布局網(wǎng)站案例（如下圖所示）：核心學(xué)問點(diǎn)v 彈性盒模型v 媒體查詢四、彈性盒模型彈性盒布局模型是css3規(guī)范中提出的一種新的布局方式。目的：提供一種越發(fā)高效的方式來對容器中的條目舉行布局、對齊和分配空間優(yōu)勢：這種布局模式已被主流掃瞄器所支持，可以在web應(yīng)用開發(fā)中用法。解釋：1.flex是display的一個屬性值。2.設(shè)置了display:flex屬性的元素，稱為flex容器，他里面的全部子元素統(tǒng)稱為容器成員，稱為flex

3、項(xiàng)目。后面我們就用法flex容器和 flex項(xiàng)目來舉行介紹。 flex容器有兩根坐標(biāo)軸：主軸（main axis）和交錯軸（cross axis）。flex容器屬性flex-direction: row | row-reverse | column | column-reverse;flex-direction:row;flex-direction:row-reverse;flex-direction:column;flex-direction:column-reverse;justify-content 定義了flex項(xiàng)目在主軸方向上的對齊方式flex-start | flex-end |

4、center | space-between | space-around;justify-content:flex-start;justify-content：flex-end;justify-content：flex-center;justify-content：space-between;justify-content：space-around;align-items：flex-start | flex-end | center | baseline | stretch; 定義項(xiàng)目在交錯軸上的對齊方式(適用于父類容器【彈性盒子】元素上)align-items：flex-start;ali

5、gn-items:flex-end;align-items:center;align-items:baseline;align-items:stretch;五、媒體查詢1.什么是媒體查詢用法 media 查詢，你可以針對不同的媒體類型定義不同的樣式。media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特殊是假如你需要設(shè)置設(shè)計響應(yīng)式的頁面，media 是十分實(shí)用的。當(dāng)你重置掃瞄器大小的過程中，頁面也會按照掃瞄器的寬度和高度重新渲染頁面。2.媒體查詢的作用可以在不轉(zhuǎn)變頁面內(nèi)容的狀況下，為特定的一些輸出設(shè)備定制顯示效果，是響應(yīng)式布局實(shí)現(xiàn)的主要方式3.媒體查詢的語法v 外聯(lián)css語法：媒體類型：medi

6、atype關(guān)鍵字：and|not|only媒體特征：media feature實(shí)例：v 內(nèi)嵌樣式的語法：media mediatype and|not|only (media feature) . 媒體類型：mediatype關(guān)鍵字：and|not|only媒體特征：media feature media screen and (max-width: 960px)body media screen and (max-(min-width:960px) and (max-width:1200px)bodybackground:yellow;四、課堂案例下面是一個響應(yīng)式布局的容易案例導(dǎo)航部分：1） 導(dǎo)航部分由logo，導(dǎo)航和登錄三部分組成，這三部分放置在一個header的父容器中，給header設(shè)置display：flex；使之成為彈性盒模型，并設(shè)置主軸方向?yàn)閞ow，子元素在父容器中的對齊方式為兩端對齊。2） 當(dāng)窗口小于等于640px時，將導(dǎo)航躲藏，添加媒體查詢列表部分1） 全部的都放置在一個class名為picture的父容器中，給父容器添加display:flex；使之成為彈性盒模型，并設(shè)置子元素的對齊方式為居中對齊（justify-content:center;）,并設(shè)置每一個子元素占領(lǐng)父