移動(dòng)端頁(yè)面布局

第7章移動(dòng)端頁(yè)面布局布局是前端開(kāi)發(fā)最基礎(chǔ)的技能之一，從拿到設(shè)計(jì)稿的那一刻，布局的思考就已經(jīng)開(kāi)始了。是左右結(jié)構(gòu)布局，還是左中右結(jié)構(gòu)布局？是左邊導(dǎo)航右邊內(nèi)容，還是主要內(nèi)容在中間，次要內(nèi)容放兩邊？可以用來(lái)作頁(yè)面布局的技術(shù)有很多，上一章學(xué)習(xí)的浮動(dòng)和定位都可以作為一種布局方式。本章學(xué)習(xí)移動(dòng)端頁(yè)面布局常用的flex彈性布局、grid網(wǎng)格布局和瀑布流布局。了解網(wǎng)頁(yè)布局的常用方法和手段理解彈性布局、網(wǎng)格布局和瀑布流的基本原理掌握彈性布局、網(wǎng)格布局和瀑布流的實(shí)現(xiàn)機(jī)制能運(yùn)用彈性布局、網(wǎng)格布局和分欄布局進(jìn)行移動(dòng)端頁(yè)面制作內(nèi)容安排Flex彈性盒子布局7.1grid網(wǎng)格布局7.2分欄布局實(shí)現(xiàn)瀑布流7.3小試牛刀7.47.1Flex彈性盒子布局Flex是FlexibleBox的縮寫(xiě)，意為“彈性盒子布局”，用來(lái)為盒狀模型提供最大的靈活性。彈性盒子布局由彈性容器(flexcontainer)和彈性項(xiàng)目(flexitem)兩部分組成。頁(yè)面中任何一個(gè)元素只要設(shè)置了display:flex屬性，就成為彈性容器。彈性容器的所有子元素就成為容器成員，即彈性項(xiàng)目。Flex彈性盒子布局7.1在彈性容器中，通過(guò)屬性規(guī)定水平/垂直方向?yàn)橹鬏S(mainaxis),起點(diǎn)為mainstart,終點(diǎn)為mainend；與主軸垂直的另一方向稱為交叉軸(crossaxis)，起點(diǎn)crossstart,終點(diǎn)為crossend。在彈性項(xiàng)目中，元素的寬度稱為mainsize，高度稱為crosssize。Flex彈性盒子布局7.17.1.1Flex作用在容器上的屬性Flex作用在容器上的屬性主要有下面5個(gè)屬性：方向?qū)傩詅lex-direction、換行屬性flex-wrap、方向與換行屬性flex-flow、主軸對(duì)齊方式屬性justify-content和交叉軸項(xiàng)目對(duì)齊方式屬性align-items。1.方向?qū)傩詅lex-direction格式：row|row-reverse|column|column-reverse取值：row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。row-reverse：主軸為水平方向，起點(diǎn)在右端。column：主軸為垂直方向，起點(diǎn)在上沿。column-reverse：主軸為垂直方向，起點(diǎn)在下沿。功能：flex-direction屬性作用在容器上，決定項(xiàng)目的排列方向。Flex彈性盒子布局7.12.換行屬性flex-wrap格式：flex-wrap：nowrap|wrap|wrap-reverse;取值：nowrap（默認(rèn)）：不換行wrap：按從上到下?lián)Q行wrap-reverse：按從下到上反向換行功能：flex-wrap屬性作用在容器上，它定義如果一條軸線排不下，如何換行。3.方向與換行屬性flex-flow格式：<flex-direction><flex-wrap>功能：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為rownowrap。Flex彈性盒子布局7.14.主軸對(duì)齊方式屬性justify-content格式：flex-start|flex-end|center|space-between|space-around;取值：flex-start（默認(rèn)值）：左對(duì)齊flex-end：右對(duì)齊center：居中space-between：兩端對(duì)齊space-around：分散對(duì)齊功能：justify-content屬性作用在容器上，它定義了項(xiàng)目在主軸上的對(duì)齊方式。5.交叉軸項(xiàng)目對(duì)齊方式屬性align-items格式：flex-start|flex-end|center|baseline|stretch;取值：flex-start：交叉軸的起點(diǎn)對(duì)齊flex-end：交叉軸的終點(diǎn)對(duì)齊center：交叉軸的中間對(duì)齊baseline:以項(xiàng)目的第一行文字作基線對(duì)齊stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度功能：align-items屬性作用在容器上，它定義項(xiàng)目在交叉軸上如何對(duì)齊。Flex彈性盒子布局7.17.1.2Flex作用在項(xiàng)目上的屬性Flex作用在項(xiàng)目上的屬性主要有下面6個(gè)屬性：項(xiàng)目順序order屬性、項(xiàng)目放大比例屬性flex-grow、項(xiàng)目縮小比例屬性flex-shrink、項(xiàng)目大小基準(zhǔn)屬性flex-basis、flex屬性、項(xiàng)目私有對(duì)齊屬性align-self。1.項(xiàng)目順序order屬性格式：order：<n>取值：整數(shù)值功能：order屬性作用在項(xiàng)目上，定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0，可以為負(fù)數(shù)。2.項(xiàng)目放大比例屬性flex-grow格式：flex-grow：<number>取值：數(shù)值功能：flex-grow屬性作用在項(xiàng)目上，定義項(xiàng)目的放大比例，默認(rèn)值為0，即如果存在剩余空間，也不放大。如果所有項(xiàng)目的flex-grow屬性值都相同，例如都為1，則它們將等分可能的剩余空間。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。3.項(xiàng)目縮小比例屬性flex-shrink格式：flex-shrink：<number>取值：數(shù)值功能：flex-shrink屬性作用在項(xiàng)目上，定義了項(xiàng)目的縮小比例。默認(rèn)值為1，即如果空間不足，該項(xiàng)目將縮小。如果所有項(xiàng)目的flex-shrink屬性值都相同，例如都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性值為0，則空間不足時(shí)，該項(xiàng)目不縮小。Flex彈性盒子布局7.14.項(xiàng)目大小基準(zhǔn)屬性flex-basis格式：數(shù)值|auto;取值：數(shù)值：希望達(dá)到的項(xiàng)目的實(shí)際寬度或高度大小，會(huì)覆蓋項(xiàng)目的本來(lái)大小auto：采用項(xiàng)目的本來(lái)大小功能：flex-basis定義了元素在分配剩余空間之前的默認(rèn)大小。默認(rèn)值是auto，即自動(dòng)。以主軸為水平方向?yàn)槔?，如果有設(shè)置width，占用空間就是width；如果沒(méi)有設(shè)置，按照內(nèi)容寬度。若flex-basis為數(shù)值，并且同時(shí)設(shè)置width和flex-basis，則會(huì)忽略width，此時(shí)flex-basis屬性的優(yōu)先級(jí)大于width，將覆蓋項(xiàng)目的本來(lái)的寬度。5.flex屬性格式：<flex-grow><flex-shrink><flex-basis>取值：01auto（默認(rèn)值）：當(dāng)容器有剩余空間時(shí)不放大，當(dāng)容器空間不足時(shí)會(huì)縮??；00auto（flex:none）：元素既不放大也不縮小，尺寸由內(nèi)容決定，不具彈性；010%（flex:0）：元素既不放大但空間不足時(shí)會(huì)縮小，尺寸為最小內(nèi)容寬度；110%（flex:1）：元素會(huì)放大，也可以縮小，在尺寸不足時(shí)為最小內(nèi)容寬度；11auto（flex:auto）：元素會(huì)放大，也可以縮小，尺寸由內(nèi)容決定；功能：flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫(xiě)，后兩個(gè)屬性可選。使用時(shí)建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)分開(kāi)寫(xiě)三個(gè)分離的屬性。Flex彈性盒子布局7.16.項(xiàng)目私有對(duì)齊屬性align-self格式：auto|flex-start|flex-end|center|baseline|stretch;取值：該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。功能：align-self屬性作用在項(xiàng)目上，允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。7.1.3彈性盒子布局案例7.1案例7-1：制作如圖7-4所示的效果，將彈性盒子相關(guān)屬性效果進(jìn)行展示。首先將最外層container設(shè)置為彈性盒子，div.container里面在垂直方向放置5個(gè)彈性項(xiàng)目box1、box2、box3、box4、box5，其中box1和box5固定高度，其余三個(gè)等分剩余的高度（都設(shè)置為flex:1）。box1、box2、box3、box4、box5作為container容器項(xiàng)目的同時(shí)，又通過(guò)設(shè)置display:flex;成為彈性盒子，里面分別放置若干子元素作為彈性項(xiàng)目。box1內(nèi)有6個(gè)項(xiàng)目，水平等分box1容器的橫向空間，反向排列，并靠box1底部對(duì)齊；box2內(nèi)有3個(gè)項(xiàng)目，寬度設(shè)置為300px，水平方向分散對(duì)齊，垂直方向居中對(duì)齊，第三個(gè)項(xiàng)目靠box2底部對(duì)齊；box3內(nèi)有3個(gè)項(xiàng)目，大小為項(xiàng)目原本尺寸，不采用彈性大小，將第三個(gè)項(xiàng)目排在前面；box4內(nèi)有3個(gè)項(xiàng)目，水平方向居中對(duì)齊，垂直方向以項(xiàng)目的第一行文字作基線對(duì)齊；box5內(nèi)有3個(gè)項(xiàng)目，分別在水平方向以20%、50%、30%的比例設(shè)置寬度；7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.11.任務(wù)描述使用flex彈性布局制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面。頁(yè)面包括頭部、“關(guān)于你的網(wǎng)站”標(biāo)題及文字內(nèi)容、“你的團(tuán)隊(duì)”標(biāo)題及人員列表和頁(yè)腳。效果如圖7-5所示。2.任務(wù)要求使用flex彈性布局完成整個(gè)頁(yè)面的制作。通過(guò)本任務(wù)的練習(xí)，要掌握f(shuō)lex彈性布局的制作技巧；掌握相關(guān)屬性的基本設(shè)置；理解彈性布局的基本原理和實(shí)現(xiàn)機(jī)制。3.任務(wù)分析本任務(wù)首先設(shè)置最外層.container為彈性盒子，主軸方向?yàn)榇怪狈较颍^部、文字標(biāo)題、文字內(nèi)容、團(tuán)隊(duì)標(biāo)題、人員列表和頁(yè)腳共六個(gè)彈性項(xiàng)目。頭部和頁(yè)腳采用圖像作背景，其高度固定。頭部用flex布局在水平方向分為宣傳文字和logo圖像兩個(gè)彈性項(xiàng)目；文字內(nèi)容的圖標(biāo)和鏈接部分通過(guò)flex水平對(duì)齊；人員列表部分使用flex將人員介紹分成三個(gè)彈性項(xiàng)目，在水平方向分散對(duì)齊。7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.14.工作過(guò)程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁(yè)，設(shè)置<title>為“任務(wù)7-1”；將網(wǎng)頁(yè)命名為task7-1.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁(yè)的基本結(jié)構(gòu)網(wǎng)頁(yè)task7-1.html最外層為div.container，網(wǎng)頁(yè)基本代碼如下：<body> <divclass="container"> <header>頭部</header> <h2><span>關(guān)于</span>你的網(wǎng)站</h2> <divid="about_us">網(wǎng)站介紹</div> <h2><span>你的</span>團(tuán)隊(duì)</h2> <divid="fresh_news">團(tuán)隊(duì)介紹</div> <footer>頁(yè)腳</footer> </div></body>7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.1步驟3整體布局設(shè)置最外層div.container為彈性容器，里面包含6個(gè)彈性項(xiàng)目，主軸方向?yàn)榇怪狈较?。頭部和頁(yè)腳采用圖像作背景，其高度固定。網(wǎng)頁(yè)樣式代碼如下，效果如圖7-6所示。.container{ width:1080px;height:1920px;font-size:42px; display:flex; flex-flow:columnnowrap;/*主軸方向?yàn)榇怪狈较?/ }.container>div{ border:#9991pxsolid;}header{ flex:none;height:392px;/*高度固定*/ background:url(images/header-bg.jpg)no-repeattop;}h2{ flex:none;} #about_us{ flex:1;} #fresh_news{ flex:1;}footer{ flex:none;height:127px;/*高度固定*/ background:url(images/footer-bg.jpg)repeat-xbottom;} 7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.1步驟4設(shè)置頭部及標(biāo)題樣式（1）頭部插入兩個(gè)div，其中div.logo-box放置宣傳文字,div.logo-pic用logo圖像作背景；（2）設(shè)置header為彈性容器，里面的項(xiàng)目水平方向兩端對(duì)齊。頭部元素div.logo-pic用圖像做背景，寬度固定；頭部元素div.logo-box設(shè)置為flex：1，寬度彈性伸縮。頭部樣式效果如圖7-7所示。7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.1步驟5設(shè)置文字內(nèi)容的樣式（1）在div#about_us插入文字內(nèi)容，中間插入div.img-box,包含圖片和鏈接兩部分；（2）設(shè)置div.img-box為彈性容器，里面的圖像和鏈接在水平方向和垂直方向都居中。效果如圖7-8所示。7.1.4任務(wù)7-1：使用flex制作“公司簡(jiǎn)介”移動(dòng)端頁(yè)面7.1步驟6設(shè)置“團(tuán)隊(duì)介紹”樣式（1）在div#fresh_news中插入3個(gè)section元素，每一個(gè)都包含圖像和文字介紹；（2）設(shè)置頭部樣式設(shè)置div#fresh_news為彈性容器，里面的3個(gè)section元素在水平方向平均分配空間。效果如圖7-9所示。步驟7輸入頁(yè)腳的內(nèi)容，并設(shè)置頁(yè)腳的樣式。步驟8保存文件，完成頁(yè)面的制作。7.2grid網(wǎng)格布局Grid布局通過(guò)CSS構(gòu)建了一個(gè)強(qiáng)大的二維網(wǎng)格布局系統(tǒng)。當(dāng)一個(gè)塊元素的樣式設(shè)置了display:grid屬性，該塊元素即被定義成網(wǎng)格容器，容器內(nèi)的直系子元素即成為項(xiàng)目。容器和項(xiàng)目都是HTML的元素，而布局是在CSS層面實(shí)現(xiàn)的。grid網(wǎng)格布局7.2CSS將容器劃分成“行"和“列”，產(chǎn)生單元格，然后指定項(xiàng)目所占用的單元格區(qū)域，從而實(shí)現(xiàn)網(wǎng)格布局排版。Grid網(wǎng)格的相關(guān)概念如圖7-10所示。grid網(wǎng)格布局7.27.2.1Grid作用在容器上的屬性Grid主要通過(guò)下面7個(gè)屬性作用在容器上來(lái)構(gòu)建網(wǎng)格：grid-template-columns/grid-template-rows設(shè)置列或行的屬性、grid-gap設(shè)置列/行間距的屬性、grid-template-areas設(shè)置單元格區(qū)域的屬性、grid-auto-flow設(shè)置單元格方向的屬性、align-items設(shè)置項(xiàng)目對(duì)齊垂直方式屬性、justify-items設(shè)置項(xiàng)目水平對(duì)齊方式屬性、place-items設(shè)置單元格內(nèi)內(nèi)容排列位置的屬性。1.列或行屬性grid-template-columns/grid-template-rows格式：grid-template-columns：<列寬1，列寬2，列寬3…> grid-template-rows：<行高1,行高2,行高3…>取值：絕對(duì)單位：使用px等大小絕對(duì)單位；百分比%：用百分比作為大小單位；repeat(n,m)方法：n是重復(fù)的次數(shù)，m是所要重復(fù)的大小值fr關(guān)鍵字：大小比例，2fr是1fr的兩倍；minmax(min,max)方法：根據(jù)剩余空間自動(dòng)分配空間，大小在最小值和最大值長(zhǎng)度范圍內(nèi)；auto關(guān)鍵字：瀏覽器自己決定長(zhǎng)度；網(wǎng)格線的名稱：網(wǎng)格線是虛擬的線，可以給每一根網(wǎng)格線加上名字以方便引用。名網(wǎng)格線名字用方括號(hào)括起來(lái)。功能：

grid-template-columns屬性用來(lái)構(gòu)建網(wǎng)格容器的列；grid-template-rows用來(lái)構(gòu)建網(wǎng)格容器的行。grid網(wǎng)格布局7.22.列/行間距屬性grid-gap格式：grid-gap：<行間距值><列間距值>功能：grid-gap屬性用來(lái)設(shè)置行/列的間距，是grid-row-gap屬性、grid-column-gap屬性的合并簡(jiǎn)寫(xiě)。這3個(gè)屬性最新標(biāo)準(zhǔn)也可不寫(xiě)前綴，寫(xiě)為：row-gap、column-gap、gap。3.網(wǎng)格區(qū)域?qū)傩詆rid-template-areas格式：grid-template-areas：<網(wǎng)格區(qū)域>取值：區(qū)域單元格用字母代表，各行分別用引號(hào)進(jìn)行標(biāo)識(shí)，；將單元格寫(xiě)成相同的字母就可以合并區(qū)域；如果某些區(qū)域不需要利用，則使用小數(shù)點(diǎn)來(lái)表示；功能：有別于grid-template-columns和grid-template-rows通過(guò)設(shè)置列和行定義網(wǎng)格，該屬性以直觀的方式定義區(qū)域形成網(wǎng)格。4.排列方向?qū)傩詆rid-auto-flow格式：grid-auto-flow：row|column取值：row：默認(rèn)值，按單元格行排列，即先填滿第一行，再開(kāi)始放入第二行；column：項(xiàng)目按單元格列排列，即先填滿第一列，再開(kāi)始放入第二列；功能：該屬性設(shè)置容器的子元素(項(xiàng)目）的排列方向。grid網(wǎng)格布局7.25.項(xiàng)目水平對(duì)齊方式屬性justify-items格式：justify-items：<水平位置>取值：start：對(duì)齊單元格的起始邊緣。end：對(duì)齊單元格的結(jié)束邊緣。center：?jiǎn)卧駜?nèi)部居中。stretch：拉伸，項(xiàng)目大小沒(méi)有指定時(shí)會(huì)占滿單元格的整個(gè)空間（默認(rèn)值）。功能：該屬性決定項(xiàng)目在單元格的水平位置。6.項(xiàng)目對(duì)齊垂直方式屬性align-items格式：align-items：<垂直位置>取值：與justify-items取值相同功能：該屬性決定項(xiàng)目在單元格的垂直位置。7.項(xiàng)目對(duì)齊方式屬性place-items格式：place-items：<align-items><justify-items>取值：justify-items取值相同align-items：項(xiàng)目垂直對(duì)齊方式j(luò)ustify-items：項(xiàng)目垂直水平方式如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等。功能：該屬性決定項(xiàng)目在單元格的水平和垂直位置，是align-items（垂直位置）屬性與justify-items（水平位置）屬性的合并縮寫(xiě)。grid網(wǎng)格布局7.27.2.2Grid作用在項(xiàng)目上的屬性Grid在容器上定義了網(wǎng)格是如何布局的，而要把內(nèi)容呈現(xiàn)出來(lái)，則需要設(shè)置容器內(nèi)的項(xiàng)目的樣式。作用在項(xiàng)目上的屬性，主要有下面5個(gè)：grid-column/grid-row按列/行設(shè)置項(xiàng)目位置、grid-area按區(qū)域設(shè)置項(xiàng)目區(qū)域、align-self設(shè)置項(xiàng)目垂直私有位置屬性、justify-self設(shè)置項(xiàng)目水平私有位置屬性、place-self設(shè)置項(xiàng)目在單元格內(nèi)的私有位置。1.項(xiàng)目占用列/行屬性grid-column/grid-row格式：grid-column：<開(kāi)始位置>/<結(jié)束位置>grid-row：<開(kāi)始位置>/<結(jié)束位置>取值：數(shù)字：可以通過(guò)數(shù)字指定第幾根網(wǎng)格線；網(wǎng)格線名字：事先通過(guò)grid-template-columns/rows設(shè)置的網(wǎng)格線名字；span:表示跨越多少個(gè)網(wǎng)格。功能：按列/行設(shè)置項(xiàng)目在容器中的位置。grid-column是grid-column-start（左邊框所在的垂直網(wǎng)格線）、grid-column-end（右邊框所在的垂直網(wǎng)格線）的縮寫(xiě)。grid-row是grid-row-start（上邊框所在的水平網(wǎng)格線）、grid-row-end（下邊框所在的水平網(wǎng)格線）的縮寫(xiě)。grid網(wǎng)格布局7.22.項(xiàng)目占用區(qū)域?qū)傩詆rid-area格式：grid-area：區(qū)域字母代號(hào)取值：grid-template-areas屬性所設(shè)置的代表區(qū)域的字母代號(hào)功能：該屬性按區(qū)域設(shè)置項(xiàng)目在容器中的區(qū)域位置。該區(qū)域用字母代號(hào)表示，對(duì)應(yīng)字母在grid-template-areas屬性所設(shè)置的位置。3.項(xiàng)目垂直私有位置屬性align-self格式：align-self：<垂直位置>取值：與align-items取值相同功能：該屬性只作用于單個(gè)項(xiàng)目,能覆蓋align-items的值，用于設(shè)置單個(gè)單元格內(nèi)容的垂直位置。4.項(xiàng)目水平私有位置屬性justify-self格式：justify-self：<水平位置>取值：與justify-items取值相同功能：該屬性只作用于單個(gè)項(xiàng)目,能覆蓋justify-items的值，設(shè)置單元格內(nèi)容的水平位置。5.項(xiàng)目私有位置屬性place-self格式：place-self：<垂直位置><水平位置>取值：與place-items取值相同功能：該屬性只作用于單個(gè)項(xiàng)目,能覆蓋place-items的值。是justify-self屬性、align-self屬性的合并縮寫(xiě)。7.2.3網(wǎng)格布局案例7.2案例7-2：運(yùn)用網(wǎng)格進(jìn)行頁(yè)面布局，案例效果如圖7-12所示。本案例將div#container設(shè)置為網(wǎng)格容器，通過(guò)grid-template-areas屬性定義5個(gè)網(wǎng)格區(qū)域，分別用a,b,c,d,e表示；網(wǎng)格之間有10px的間隙。在div#container容器內(nèi)放置了5個(gè)div元素作為項(xiàng)目。每個(gè)項(xiàng)目用grid-area屬性通過(guò)字母區(qū)域代號(hào)指定在容器中的位置。參考代碼如下：<!doctypehtml><html><head><metacharset="utf-8"><title>案例7-2</title> <style> #container{width:400px;height:300px; display:grid; grid-template-areas:

'aab'

'aac' 'dec'; gap:10px; } .tt1{background-color:#F33;grid-area:a;} .tt2{background-color:#069;grid-area:b;} .tt3{background-color:#FC0;grid-area:c;} .tt4{background-color:#939;grid-area:d;} .tt5{background-color:#6C6;grid-area:e;}</style></head><body> <divid="container"> <divclass="tt1">1</div> <divclass="tt2">2</div> <divclass="tt3">3</div> <divclass="tt4">4</div> <divclass="tt5">5</div> </div></body></html>7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.21.任務(wù)描述使用grid布局制作“聯(lián)系我們”移動(dòng)端頁(yè)面。頁(yè)面包括頭部、四個(gè)“聯(lián)系人”、“個(gè)人信息”及頁(yè)腳。效果如圖7-13所示。2.任務(wù)要求使用grid布局完成整個(gè)頁(yè)面的制作。通過(guò)本任務(wù)的練習(xí)，要掌握grid布局的制作技巧以及相關(guān)屬性的基本設(shè)置，理解grid布局的基本原理和實(shí)現(xiàn)機(jī)制。3.任務(wù)分析本任務(wù)的關(guān)鍵是用grid進(jìn)行整體布局。首先設(shè)置最外層div.container為6行2列的網(wǎng)格容器。第1行兩個(gè)單元格合并成一個(gè)區(qū)域，對(duì)應(yīng)頭部項(xiàng)目，第6行兩個(gè)單元格合并成一個(gè)區(qū)域?qū)?yīng)頁(yè)腳，第2列從第2行到第5行單元格合并成一個(gè)區(qū)域，對(duì)應(yīng)“個(gè)人信息”項(xiàng)目，左側(cè)是四個(gè)聯(lián)系人項(xiàng)目。整體布局設(shè)計(jì)如圖7-14所示。做好整體布局后，再分別制作頭部、左側(cè)四個(gè)聯(lián)系人項(xiàng)目、右側(cè)“個(gè)人信息”以及頁(yè)腳的樣式，最后完成整個(gè)頁(yè)面的制作。7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.24.工作過(guò)程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁(yè)，設(shè)置<title>為“任務(wù)7-2”；將網(wǎng)頁(yè)命名為task7-2.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁(yè)的基本結(jié)構(gòu)網(wǎng)頁(yè)task7-2.html最外層為div.container，包含頭部、四個(gè)聯(lián)系人信息、個(gè)人信息以及頁(yè)腳7個(gè)部分。根據(jù)圖7-14整體布局設(shè)計(jì)，按從上到下、從左到右的順序安排項(xiàng)目先后次序。<body> <divclass="container"> <header>頭部</header> <divclass="Contact">聯(lián)系人1</div> <divclass="info"><h2>個(gè)人信息</h2></div> <divclass="Contact">聯(lián)系人2</div> <divclass="Contact">聯(lián)系人3</div> <divclass="Contact">聯(lián)系人4</div> <footer>頁(yè)腳</footer> </div></body>7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.2步驟3整體布局（1）設(shè)置最外層div.container為網(wǎng)格容器。容器先按6行2列劃分區(qū)域。第2列寬度是第1列寬度的兩倍；第1行和第6行按背景圖的高度設(shè)置為固定高度，其余各行高度平均分配。（2）設(shè)置頭部樣式：加入頭部背景圖，并設(shè)置頭部所在位置橫跨2個(gè)單元格；（3）設(shè)置頁(yè)腳樣式：加入頁(yè)腳背景圖，并設(shè)置頁(yè)腳所在位置橫跨2個(gè)單元格；（4）設(shè)置個(gè)人信息的樣式：加入頁(yè)腳背景圖，并設(shè)置個(gè)人信息所在位置向下跨4個(gè)單元格，從第2行網(wǎng)格線到第6行網(wǎng)格線，同時(shí)需設(shè)置所占用列的位置為第2列網(wǎng)格線到第3列網(wǎng)格線，所構(gòu)成一個(gè)網(wǎng)格區(qū)域；整體布局的頁(yè)面效果如圖7-15所示，參考代碼如下：.container{font-size:42px;width:1080px;height:1920px; display:grid; grid-template-columns:1fr2fr;/*第2列寬度是第1列寬度的兩倍*/ grid-template-rows:[r1]363px[r2]1fr[r3]1fr[r4]1fr[r5]1fr[r6]127px[r7]; } header{background:url(images/header-bg.jpg)no-repeattop; grid-column-start:1; grid-column-end:span2;/*采用關(guān)鍵字span表示跨2個(gè)單元格*/ } footer{background:url(images/footer-bg.jpg)repeat-xbottom; grid-column:1/3; /*采用<開(kāi)始位置>/<結(jié)束位置>簡(jiǎn)寫(xiě)形式*/ } .info{ background:url(images/box-bg.gif); grid-row-start:r2; grid-row-end:r6; /*采用grid-template-rows屬性定義的網(wǎng)格線名字*/ grid-column-start:2; grid-column-end:3; }7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.2步驟4頭部的制作（1）參照任務(wù)7-1步驟4的頭部基本HTML代碼，在頭部插入兩個(gè)div，其中div.logo-box放置宣傳文字,div.logo-pic用logo圖像作背景。（2）將頭部設(shè)置為1行2列的網(wǎng)格容器，內(nèi)部?jī)蓚€(gè)項(xiàng)目平均分配寬度，效果如圖7-16所示。7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.2步驟5“聯(lián)系人”的制作（1）在div.Contact中分別插入四個(gè)聯(lián)系人的照片、姓名以及聯(lián)系方式三個(gè)項(xiàng)目；（2）將div.Contact設(shè)置為2行2列的網(wǎng)格容器，第1行的兩個(gè)單元格分別是聯(lián)系人照片和名字，第2行兩個(gè)單元格合并為一個(gè)區(qū)域，用于顯示聯(lián)系方式。效果如圖7-17所示。.Contact{font-size:36px; display:grid; grid-template-columns:100px1fr; grid-template-rows:100px1fr;}.Contactimg{grid-column:1/2;}.Contact.tel{grid-column:1/3;color:#999;}.Contact.name{grid-column:2/3;color:#690;}7.2.4任務(wù)7-2：使用grid制作“聯(lián)系我們”移動(dòng)端頁(yè)面7.2步驟6“個(gè)人信息”的制作（1）在中插入表單，輸入表單內(nèi)容；（2）將設(shè)置為2行1列的網(wǎng)格容器，第1行是標(biāo)題，第2行是form表單，兩個(gè)項(xiàng)目的對(duì)齊方式設(shè)置為垂直靠上、水平居中。又將form的私有對(duì)齊方式設(shè)置為垂直居中，效果如圖7-18所示。步驟7制作頁(yè)腳輸入頁(yè)腳的內(nèi)容，并設(shè)置頁(yè)腳的樣式。步驟8保存文件，完成頁(yè)面的制作。7.3分欄布局實(shí)現(xiàn)瀑布流分欄也被稱為多列布局、多欄布局，這種布局可以將內(nèi)容布局到多個(gè)列框中，類似報(bào)紙上的排版。在一些文字內(nèi)容較多的網(wǎng)站中，通常會(huì)采用多列布局的顯示方式。CSS3.0新增column屬性來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的多列布局。分欄布局將子元素在內(nèi)的所有內(nèi)容拆分為列，這與打印網(wǎng)頁(yè)的時(shí)候?qū)⒕W(wǎng)頁(yè)內(nèi)容分成多個(gè)頁(yè)面的方式類似。分欄布局主要針對(duì)圖文排版布局，應(yīng)用在橫向排版場(chǎng)景中，文檔流是倒N方向。隨著移動(dòng)端電子商務(wù)的發(fā)展，分欄布局也應(yīng)用于移動(dòng)端商品列表等頁(yè)面之中，特別體現(xiàn)在瀑布流的實(shí)現(xiàn)。分欄布局實(shí)現(xiàn)瀑布流7.3

最早采用瀑布流的網(wǎng)站是Pinterest網(wǎng)站，它將圖像分布在寬度相等的若干列上，里面放置高度不等的圖像，像瀑布一樣從上到下排列。如圖7-19所示是一種典型的瀑布流布局，圖像能根據(jù)頁(yè)面的整體高度自適應(yīng)其位置，添加一個(gè)圖像或刪除一個(gè)圖像，都不會(huì)影響頁(yè)面的整體布局。瀑布流布局其核心是每行包含的項(xiàng)目列表高度是隨機(jī)的，對(duì)于移動(dòng)設(shè)備上通過(guò)滑動(dòng)手勢(shì)來(lái)動(dòng)態(tài)加載結(jié)果是非常直觀的。另外，相較于桌面端，移動(dòng)設(shè)備的屏幕面積往往更小，因此一次性顯示的內(nèi)容不多，信息顯示更加清晰。所以對(duì)于移動(dòng)端來(lái)說(shuō)，“瀑布流”看起來(lái)是個(gè)明智的選擇。實(shí)現(xiàn)瀑布流可以通過(guò)JavaScript腳本來(lái)實(shí)現(xiàn)，也可以通過(guò)CSS來(lái)實(shí)現(xiàn)。其中，分欄是其中一種用CSS實(shí)現(xiàn)瀑布流的方法。7.3.1分欄及相關(guān)屬性7.3

1.分欄寬度屬性column-width格式：column-width：auto|length取值：auto：取計(jì)算機(jī)值length：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。不可為負(fù)值。功能：該屬性用于設(shè)置欄寬。2.分欄數(shù)量屬性column-count格式：column-count：auto|<n>取值：auto：取計(jì)算機(jī)值n：整數(shù)值功能：該屬性定義欄目的數(shù)目。3.分欄排版屬性columns格式：columns：<column-width><column-count> 取值：column-width: 欄目寬度column-count：欄目數(shù)量功能：該屬性是欄目寬度屬性column-width和欄目數(shù)量屬性column-count的簡(jiǎn)寫(xiě)，可以同時(shí)定義多欄的數(shù)目和每欄的寬度。如果欄目寬度小于屏幕則按欄目數(shù)量的均分值，欄目寬度失效，實(shí)際寬度為屏幕按欄目數(shù)量的均分值；如果欄目寬度大于屏幕，則欄目數(shù)量失效，其實(shí)際分欄數(shù)目為屏幕寬度除以每欄寬度。

分欄布局實(shí)現(xiàn)瀑布流7.3

4.欄間框線粗細(xì)屬性column-rule-width格式：column-rule-width:<length>取值：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。不可為負(fù)值。功能：該屬性定義每欄之間框線的寬度。5.欄間框線樣式屬性column-rule-style格式：column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset取值：與border-style取值相同功能：該屬性定義每欄之間框線的樣式。6.欄間框線顏色屬性column-rule-color格式：column-rule-color：<color>取值：指定顏色。功能：該屬性定義每欄之間框線的顏色。分欄布局實(shí)現(xiàn)瀑布流7.3

7.欄間框線屬性column-rule格式：column-rule:<column-rule-width><column-rule-style><column-rule-color>取值：column-rule-width：定義每欄之間邊框的寬度column-rule-style：定義每欄之間邊框的樣式column-rule-color：定義每欄之間邊框的顏色功能：該屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，定義每欄之間框線的寬度、樣式和顏色。8.欄間距屬性column-gap格式：column-gap：normal|length取值：normal：normal的值為1emlength：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。不可為負(fù)值功能：該屬性定義兩欄之間的間距距離。9.分欄填充方式屬性column-fill格式：column-fill：auto|balance取值：auto：各欄目?jī)?nèi)容填充的高度隨著其內(nèi)容的多少而自動(dòng)變化balance：各欄目?jī)?nèi)容填充的高度均衡分布功能：該屬性定義欄目的高度是否統(tǒng)一均衡分布。Firefox瀏覽器默認(rèn)是均衡填充，而其他瀏覽器默認(rèn)是自動(dòng)填充。分欄布局實(shí)現(xiàn)瀑布流7.3

10.元素之前斷行屬性column-break-before格式：column-break-before：auto|always|avoid取值：auto：自動(dòng)斷行always：總是斷行avoid：總是不斷行功能：該屬性定義元素之前是否斷行。針對(duì)不同引擎類型的瀏覽器書(shū)寫(xiě)成不同的形式，Webkit(Chrome/Safari)內(nèi)核的瀏覽器寫(xiě)成：-webkit-column-break-before11.元素之后斷行屬性column-break-after格式：column-break-after：auto|always|avoid取值：與column-break-before取值相同功能：該屬性定義元素之后是否斷行。針對(duì)不同引擎類型的瀏覽器書(shū)寫(xiě)成不同的形式，Webkit(Chrome/Safari)內(nèi)核的瀏覽器寫(xiě)成：-webkit-column-break-after12.元素是否內(nèi)部中斷屬性break-inside格式：break-inside：auto|avoid取值：auto：元素中斷avoid：元素不中斷功能：該屬性定義頁(yè)面、列或區(qū)域發(fā)生中斷時(shí)候的元素該如何表現(xiàn)。如果沒(méi)有中斷，則忽略該屬性。7.3.2使用分欄布局實(shí)現(xiàn)瀑布流案例7.3

案例7-3：使用分欄布局實(shí)現(xiàn)瀑布流頁(yè)面展示，案例效果如圖7-20所示。第2個(gè)塊、第6個(gè)塊、第8個(gè)塊內(nèi)部發(fā)生中斷（換了一欄）以保持整體高度的統(tǒng)一。最外層為div#container，里面包含10個(gè)寬度相等、高度不等的div塊。設(shè)置div#container寬度為650px，分為5欄，欄間距為20px，欄框線為灰色單線，欄高平衡分布，實(shí)現(xiàn)瀑布流布局。<!doctypehtml><html><head> <metacharset="utf-8"> <title>案例7-3</title> <style> #container{width:650px;border:red2pxsolid; column-count:5; /*分為5欄*/ column-gap:20; /*欄間距為20px*/ column-rule:1pxsolid#CCC; /*欄框線為灰色單線*/ column-fill:balance; /*欄高平衡分布*/ } #container>div{margin:10px;} .t1{background-color:#0C9;width:100px;height:200px;} .t2{background-color:#990;width:100px;height:180px;} .t3{background-color:#6C9;width:100px;height:220px;} .t4{background-color:#069;width:100px;height:100px;} .t5{background-color:#FC6;width:100px;height:130px;} .t6{background-color:#0CC;width:100px;height:210px;} .t7{background-color:#66C;width:100px;height:100px;} .t8{background-color:#096;width:100px;height:180px;} .t9{background-color:#900;width:100px;height:100px;} .t10{background-color:#C99;width:100px;height:50px;} </style> </head> <body> <divid="container"> <divclass="t1">1</div> <divclass="t2">2</div> <divclass="t3">3</div> <divclass="t4">4</div