響應(yīng)式Web開(kāi)發(fā)項(xiàng)目化教程（HTML5+CSS3） 課件 項(xiàng)目9 制作個(gè)人信息頁(yè)面

項(xiàng)目9制作個(gè)人信息頁(yè)面·制作個(gè)人信息頁(yè)面·柵格系統(tǒng)·彈性盒布局學(xué)習(xí)目標(biāo)掌握了解理解了解利用柵格系統(tǒng)進(jìn)行響應(yīng)式設(shè)計(jì)。1掌握彈性盒布局的各個(gè)屬性用法，能使用彈性布局進(jìn)行頁(yè)面設(shè)計(jì)。2理解彈性盒布局在響應(yīng)式設(shè)計(jì)中的應(yīng)用，能夠通過(guò)彈性布局來(lái)制作響應(yīng)式網(wǎng)站。3目錄9.1項(xiàng)目描述9.2前導(dǎo)知識(shí)9.3項(xiàng)目分析9.4項(xiàng)目實(shí)踐9.5項(xiàng)目總結(jié)9.1項(xiàng)目描述本書(shū)在前面的單元中講解了通過(guò)百分比布局加上媒體查詢等方式來(lái)進(jìn)行屏幕適配，這其實(shí)是一種響應(yīng)式設(shè)計(jì)，遵循響應(yīng)式設(shè)計(jì)的原則意味著你的網(wǎng)站并非固定為單一尺寸，不管采用什么類(lèi)型的設(shè)備，頁(yè)面都會(huì)做出響應(yīng)并正確調(diào)整尺寸，確保一切看起來(lái)美觀又清晰。因此，響應(yīng)式才會(huì)在各種復(fù)雜分辨率條件下都能給用戶比較好的體驗(yàn)。本章利用柵格系統(tǒng)和彈性盒布局實(shí)現(xiàn)了一個(gè)個(gè)人信息頁(yè)面的響應(yīng)式設(shè)計(jì)。9.1項(xiàng)目描述個(gè)人信息網(wǎng)頁(yè)大屏幕效果圖9.1項(xiàng)目描述個(gè)人信息網(wǎng)頁(yè)中等屏幕效果圖9.1項(xiàng)目描述個(gè)人信息網(wǎng)頁(yè)小屏幕效果圖柵格系統(tǒng)9.2.1什么是柵格系統(tǒng)？9.2前導(dǎo)知識(shí)柵格系統(tǒng)9.2.1什么是柵格系統(tǒng)？9.2前導(dǎo)知識(shí)響應(yīng)式可以響應(yīng)的前提有兩點(diǎn)：頁(yè)面布局具有規(guī)律性；元素寬高可用百分比代替固定數(shù)值，而這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)是順理成章的。之前我們知道，要讓網(wǎng)站根據(jù)瀏覽器的大小來(lái)改變頁(yè)面元素的大小，就不能將列寬設(shè)為固定的像素，而是應(yīng)當(dāng)使用百分比來(lái)確定列的寬度。柵格系統(tǒng)中有一些動(dòng)態(tài)調(diào)整的縱列，當(dāng)窗口變小時(shí)，它們將自動(dòng)順延到下一行。柵格系統(tǒng)9.2.19.2前導(dǎo)知識(shí)【例9-1】例9-1演示了柵格系統(tǒng)在響應(yīng)式設(shè)計(jì)中的應(yīng)用，當(dāng)屏幕寬度大于500px的時(shí)候，導(dǎo)航、文章和側(cè)邊欄排成一行，當(dāng)屏幕寬度縮小至500px以內(nèi)時(shí)候，它們自動(dòng)順延到下一行。彈性盒布局9.2.29.2前導(dǎo)知識(shí)什么是彈性盒布局？彈性盒布局9.2.29.2前導(dǎo)知識(shí)2009年，W3C提出了一種新的方案——Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。Flex是FlexibleBox的縮寫(xiě)，意為"彈性盒布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局，目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，F(xiàn)lex布局將成為未來(lái)布局的首選方案。彈性盒布局9.2.29.2前導(dǎo)知識(shí)flexbox是一整個(gè)模塊，并非單一的一個(gè)屬性，它涉及的東西比較多，包括一系列屬性。其中一些屬性是用在容器（父元素，即容器）上的其他一些屬性則是用在子元素（項(xiàng)目）上的flexcontainerflexitem彈性盒布局9.2.29.2前導(dǎo)知識(shí)1.display屬性2.felx-flow屬性3.justify-content屬性4.align-item屬性5.order屬性6.flex屬性7.align-self屬性彈性盒布局9.2.29.2前導(dǎo)知識(shí)display屬性用來(lái)定義flex容器，容器是行內(nèi)元素或者塊元素取決于給定的值。為了創(chuàng)建flex容器，我們把一個(gè)容器的display屬性值改為flex

或者

inline-flex。使用方式如下：display屬性.container{ display:flex;/*或者inline-flex*/}彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-2】例9-2中，第10行display:flex;設(shè)置container為flex布局，第21行margin:auto;讓item水平垂直都居中彈性盒布局9.2.29.2前導(dǎo)知識(shí)felx-flow屬性是flex-direction和flex-wrap這兩個(gè)屬性的簡(jiǎn)寫(xiě)。flex-direction屬性決定item的排列方向flex-wrap決定了item單行還是多行排列彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-direction屬性.container{display:flex;flex-direction:row|row-reverse|column|column-reverse;}彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-wrap屬性.container{display:flex;flex-wrap:nowrap|wrap|wrap-reverse;}彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-flow屬性.container{display:flex;flex-flow:<flex-direction>||<flex-wrap>;}felx-flow屬性是flex-direction和flex-wrap這兩個(gè)屬性的簡(jiǎn)寫(xiě)。彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-3】在例9-3中增加了item的寬度，由于flex-wrap的默認(rèn)值是nowrap，子元素會(huì)進(jìn)行縮放以適應(yīng)容器，所以在第13行調(diào)整flex-wrap的值為wrap之后，會(huì)讓每個(gè)item多行排列。彈性盒布局9.2.29.2前導(dǎo)知識(shí)justify-content屬性.container{ justify-content:flex-start|flex-end|center|space-between|space-around;}justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，也就是說(shuō)，瀏覽器如何分配順著父容器主軸的彈性元素之間及其周?chē)目臻g。彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-4】例9-4是一個(gè)響應(yīng)式的導(dǎo)航條，在瀏覽器寬度在800px以上的大屏幕時(shí)候，導(dǎo)航條靠右對(duì)齊，所以在第15行設(shè)置justify-content:flex-end;導(dǎo)航條在中等大小的屏幕上居中顯示彈性盒布局9.2.29.2前導(dǎo)知識(shí)align-items屬性.container{ align-items:flex-start|flex-end|center|baseline|stretch;}align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。align-items屬性將所有直接子節(jié)點(diǎn)上的align-self值設(shè)置為一個(gè)組，align-self屬性設(shè)置項(xiàng)目在其包含塊中在垂直方向上的對(duì)齊方式。彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-5】在例9-5中，第12-13行的justify-content和align-items屬性設(shè)置了子元素水平和垂直方向的排列方式彈性盒布局9.2.29.2前導(dǎo)知識(shí)order屬性.item{ order:<integer>;}默認(rèn)情況下，彈性布局中，子元素按照文檔流出現(xiàn)的先后順序排列。order屬性可以控制在伸縮容器內(nèi)的顯示順序。order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-6】例9-6實(shí)現(xiàn)了一種常用的頁(yè)面布局，當(dāng)大屏幕的媒體查詢時(shí)，重新設(shè)置導(dǎo)航、文章和側(cè)邊欄、頁(yè)腳的order屬性值大小，重排側(cè)邊欄和文章的順序彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex屬性.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}flex屬性是flex-grow,flex-shrink

和flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為01auto。后兩個(gè)屬性可選，該屬性有兩個(gè)快捷值：auto(11auto)和none(00auto)。彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-grow屬性如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。.item{ flex-grow:<number>;/*default0*/}彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-shrink屬性flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)該屬性無(wú)效。.item{ flex-shrink:<number>;/*default1*/}彈性盒布局9.2.29.2前導(dǎo)知識(shí)flex-basis屬性flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。它可以設(shè)為跟width或height屬性一樣的值，則項(xiàng)目將占據(jù)固定空間。.item{ flex-basis:<length>;|auto;/*defaultauto*/}彈性盒布局9.2.29.2前導(dǎo)知識(shí)【例9-7】例9-7實(shí)現(xiàn)了另一種常用的頁(yè)面布局，當(dāng)大屏幕的媒體查詢時(shí)，重新設(shè)置側(cè)邊欄1、文章、側(cè)邊欄2、頁(yè)腳的order屬性值大小，重排項(xiàng)目順序，本例中用到了flex屬性來(lái)分配項(xiàng)目大小彈性盒布局9.2.29.2前導(dǎo)知識(shí)align-self屬性.item{ 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屬性，如果沒(méi)有父元素，則等同于stretch。頁(yè)面結(jié)構(gòu)分析9.3.19.3項(xiàng)目分析個(gè)人信息頁(yè)面結(jié)構(gòu)圖樣式分析9.3.29.3項(xiàng)目分析1.整個(gè)section在頁(yè)面中應(yīng)該設(shè)置為100%，并加上視口meta_viewport。2.使用彈性盒對(duì)頁(yè)面進(jìn)行布局，設(shè)置容器row的布局為flex，分別對(duì)應(yīng)項(xiàng)目#aside1、#aside2、#aside3作為該容器的三個(gè)子元素。3.初始狀態(tài)可以從小屏幕開(kāi)始，#aside1、#aside2、#aside3都是flex：1100%，三個(gè)項(xiàng)目垂直排列。當(dāng)屏幕放大到中等屏幕時(shí)，設(shè)置媒體查詢，讓#aside1在第一行，#aside2和#aside3在第二行排列。當(dāng)屏幕放大到大屏幕時(shí)，設(shè)置媒體查詢，讓三個(gè)aside在一行排列。樣式分析9.3.29.3項(xiàng)目分析4．在每個(gè)aside內(nèi)部還可以使用flex布局，比如第一個(gè)aside里div.contact的每個(gè)item又可以設(shè)置成flex進(jìn)行橫向布局。5.#aside2部分表單里面加上非空校驗(yàn)和郵箱格式校驗(yàn)。6.給#aside3部分的ul設(shè)置點(diǎn)擊樣式修改。制作頁(yè)面結(jié)構(gòu)9.4.19.4項(xiàng)目實(shí)踐學(xué)習(xí)完前面的內(nèi)容，下面來(lái)動(dòng)手實(shí)踐一下