移動端頁面布局

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

grid-template-columns屬性用來構(gòu)建網(wǎng)格容器的列；grid-template-rows用來構(gòu)建網(wǎng)格容器的行。grid網(wǎng)格布局7.22.列/行間距屬性grid-gap格式：grid-gap：<行間距值><列間距值>功能：grid-gap屬性用來設置行/列的間距，是grid-row-gap屬性、grid-column-gap屬性的合并簡寫。這3個屬性最新標準也可不寫前綴，寫為：row-gap、column-gap、gap。3.網(wǎng)格區(qū)域?qū)傩詆rid-template-areas格式：grid-template-areas：<網(wǎng)格區(qū)域>取值：區(qū)域單元格用字母代表，各行分別用引號進行標識，；將單元格寫成相同的字母就可以合并區(qū)域；如果某些區(qū)域不需要利用，則使用小數(shù)點來表示；功能：有別于grid-template-columns和grid-template-rows通過設置列和行定義網(wǎng)格，該屬性以直觀的方式定義區(qū)域形成網(wǎng)格。4.排列方向?qū)傩詆rid-auto-flow格式：grid-auto-flow：row|column取值：row：默認值，按單元格行排列，即先填滿第一行，再開始放入第二行；column：項目按單元格列排列，即先填滿第一列，再開始放入第二列；功能：該屬性設置容器的子元素(項目）的排列方向。grid網(wǎng)格布局7.25.項目水平對齊方式屬性justify-items格式：justify-items：<水平位置>取值：start：對齊單元格的起始邊緣。end：對齊單元格的結(jié)束邊緣。center：單元格內(nèi)部居中。stretch：拉伸，項目大小沒有指定時會占滿單元格的整個空間（默認值）。功能：該屬性決定項目在單元格的水平位置。6.項目對齊垂直方式屬性align-items格式：align-items：<垂直位置>取值：與justify-items取值相同功能：該屬性決定項目在單元格的垂直位置。7.項目對齊方式屬性place-items格式：place-items：<align-items><justify-items>取值：justify-items取值相同align-items：項目垂直對齊方式justify-items：項目垂直水平方式如果省略第二個值，則瀏覽器認為與第一個值相等。功能：該屬性決定項目在單元格的水平和垂直位置，是align-items（垂直位置）屬性與justify-items（水平位置）屬性的合并縮寫。grid網(wǎng)格布局7.27.2.2Grid作用在項目上的屬性Grid在容器上定義了網(wǎng)格是如何布局的，而要把內(nèi)容呈現(xiàn)出來，則需要設置容器內(nèi)的項目的樣式。作用在項目上的屬性，主要有下面5個：grid-column/grid-row按列/行設置項目位置、grid-area按區(qū)域設置項目區(qū)域、align-self設置項目垂直私有位置屬性、justify-self設置項目水平私有位置屬性、place-self設置項目在單元格內(nèi)的私有位置。1.項目占用列/行屬性grid-column/grid-row格式：grid-column：<開始位置>/<結(jié)束位置>grid-row：<開始位置>/<結(jié)束位置>取值：數(shù)字：可以通過數(shù)字指定第幾根網(wǎng)格線；網(wǎng)格線名字：事先通過grid-template-columns/rows設置的網(wǎng)格線名字；span:表示跨越多少個網(wǎng)格。功能：按列/行設置項目在容器中的位置。grid-column是grid-column-start（左邊框所在的垂直網(wǎng)格線）、grid-column-end（右邊框所在的垂直網(wǎng)格線）的縮寫。grid-row是grid-row-start（上邊框所在的水平網(wǎng)格線）、grid-row-end（下邊框所在的水平網(wǎng)格線）的縮寫。grid網(wǎng)格布局7.22.項目占用區(qū)域?qū)傩詆rid-area格式：grid-area：區(qū)域字母代號取值：grid-template-areas屬性所設置的代表區(qū)域的字母代號功能：該屬性按區(qū)域設置項目在容器中的區(qū)域位置。該區(qū)域用字母代號表示，對應字母在grid-template-areas屬性所設置的位置。3.項目垂直私有位置屬性align-self格式：align-self：<垂直位置>取值：與align-items取值相同功能：該屬性只作用于單個項目,能覆蓋align-items的值，用于設置單個單元格內(nèi)容的垂直位置。4.項目水平私有位置屬性justify-self格式：justify-self：<水平位置>取值：與justify-items取值相同功能：該屬性只作用于單個項目,能覆蓋justify-items的值，設置單元格內(nèi)容的水平位置。5.項目私有位置屬性place-self格式：place-self：<垂直位置><水平位置>取值：與place-items取值相同功能：該屬性只作用于單個項目,能覆蓋place-items的值。是justify-self屬性、align-self屬性的合并縮寫。7.2.3網(wǎng)格布局案例7.2案例7-2：運用網(wǎng)格進行頁面布局，案例效果如圖7-12所示。本案例將div#container設置為網(wǎng)格容器，通過grid-template-areas屬性定義5個網(wǎng)格區(qū)域，分別用a,b,c,d,e表示；網(wǎng)格之間有10px的間隙。在div#container容器內(nèi)放置了5個div元素作為項目。每個項目用grid-area屬性通過字母區(qū)域代號指定在容器中的位置。參考代碼如下：<!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任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.21.任務描述使用grid布局制作“聯(lián)系我們”移動端頁面。頁面包括頭部、四個“聯(lián)系人”、“個人信息”及頁腳。效果如圖7-13所示。2.任務要求使用grid布局完成整個頁面的制作。通過本任務的練習，要掌握grid布局的制作技巧以及相關(guān)屬性的基本設置，理解grid布局的基本原理和實現(xiàn)機制。3.任務分析本任務的關(guān)鍵是用grid進行整體布局。首先設置最外層div.container為6行2列的網(wǎng)格容器。第1行兩個單元格合并成一個區(qū)域，對應頭部項目，第6行兩個單元格合并成一個區(qū)域?qū)撃_，第2列從第2行到第5行單元格合并成一個區(qū)域，對應“個人信息”項目，左側(cè)是四個聯(lián)系人項目。整體布局設計如圖7-14所示。做好整體布局后，再分別制作頭部、左側(cè)四個聯(lián)系人項目、右側(cè)“個人信息”以及頁腳的樣式，最后完成整個頁面的制作。7.2.4任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.24.工作過程步驟1站點規(guī)劃（1）新建文件夾作為站點，站點內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設置<title>為“任務7-2”；將網(wǎng)頁命名為task7-2.html保存在站點所在的目錄。步驟2建立網(wǎng)頁的基本結(jié)構(gòu)網(wǎng)頁task7-2.html最外層為div.container，包含頭部、四個聯(lián)系人信息、個人信息以及頁腳7個部分。根據(jù)圖7-14整體布局設計，按從上到下、從左到右的順序安排項目先后次序。<body> <divclass="container"> <header>頭部</header> <divclass="Contact">聯(lián)系人1</div> <divclass="info"><h2>個人信息</h2></div> <divclass="Contact">聯(lián)系人2</div> <divclass="Contact">聯(lián)系人3</div> <divclass="Contact">聯(lián)系人4</div> <footer>頁腳</footer> </div></body>7.2.4任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.2步驟3整體布局（1）設置最外層div.container為網(wǎng)格容器。容器先按6行2列劃分區(qū)域。第2列寬度是第1列寬度的兩倍；第1行和第6行按背景圖的高度設置為固定高度，其余各行高度平均分配。（2）設置頭部樣式：加入頭部背景圖，并設置頭部所在位置橫跨2個單元格；（3）設置頁腳樣式：加入頁腳背景圖，并設置頁腳所在位置橫跨2個單元格；（4）設置個人信息的樣式：加入頁腳背景圖，并設置個人信息所在位置向下跨4個單元格，從第2行網(wǎng)格線到第6行網(wǎng)格線，同時需設置所占用列的位置為第2列網(wǎng)格線到第3列網(wǎng)格線，所構(gòu)成一個網(wǎng)格區(qū)域；整體布局的頁面效果如圖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個單元格*/ } footer{background:url(images/footer-bg.jpg)repeat-xbottom; grid-column:1/3; /*采用<開始位置>/<結(jié)束位置>簡寫形式*/ } .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任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.2步驟4頭部的制作（1）參照任務7-1步驟4的頭部基本HTML代碼，在頭部插入兩個div，其中div.logo-box放置宣傳文字,div.logo-pic用logo圖像作背景。（2）將頭部設置為1行2列的網(wǎng)格容器，內(nèi)部兩個項目平均分配寬度，效果如圖7-16所示。7.2.4任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.2步驟5“聯(lián)系人”的制作（1）在div.Contact中分別插入四個聯(lián)系人的照片、姓名以及聯(lián)系方式三個項目；（2）將div.Contact設置為2行2列的網(wǎng)格容器，第1行的兩個單元格分別是聯(lián)系人照片和名字，第2行兩個單元格合并為一個區(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任務7-2：使用grid制作“聯(lián)系我們”移動端頁面7.2步驟6“個人信息”的制作（1）在中插入表單，輸入表單內(nèi)容；（2）將設置為2行1列的網(wǎng)格容器，第1行是標題，第2行是form表單，兩個項目的對齊方式設置為垂直靠上、水平居中。又將form的私有對齊方式設置為垂直居中，效果如圖7-18所示。步驟7制作頁腳輸入頁腳的內(nèi)容，并設置頁腳的樣式。步驟8保存文件，完成頁面的制作。7.3分欄布局實現(xiàn)瀑布流分欄也被稱為多列布局、多欄布局，這種布局可以將內(nèi)容布局到多個列框中，類似報紙上的排版。在一些文字內(nèi)容較多的網(wǎng)站中，通常會采用多列布局的顯示方式。CSS3.0新增column屬性來實現(xiàn)網(wǎng)頁的多列布局。分欄布局將子元素在內(nèi)的所有內(nèi)容拆分為列，這與打印網(wǎng)頁的時候?qū)⒕W(wǎng)頁內(nèi)容分成多個頁面的方式類似。分欄布局主要針對圖文排版布局，應用在橫向排版場景中，文檔流是倒N方向。隨著移動端電子商務的發(fā)展，分欄布局也應用于移動端商品列表等頁面之中，特別體現(xiàn)在瀑布流的實現(xiàn)。分欄布局實現(xiàn)瀑布流7.3

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

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

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

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

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

案例7-3：使用分欄布局實現(xiàn)瀑布流頁面展示，案例效果如圖7-20所示。第2個塊、第6個塊、第8個塊內(nèi)部發(fā)生中斷（換了一欄）以保持整體高度的統(tǒng)一。最外層為div#container，里面包含10個寬度相等、高度不等的div塊。設置div#container寬度為650px，分為5欄，欄間距為20px，欄框線為灰色單線，欄高平衡分布，實現(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