鴻蒙入門指南,小白速來!從萌新到高手,怎樣快速掌握鴻蒙開發?【課程入口】css
目錄:
1.Grid簡介
2.使用Grid佈局實現的效果
3.grid-row-gap和grid-colunm-gap屬性
4.《鴻蒙的js開發模式》系列文章合集小程序
1.目前鴻蒙css佈局方案中,除了Flex佈局 ,網格佈局Grid能夠算得上是最強大的佈局方案了。它能夠將網頁分爲一個個網格,而後利用這些網格組合作出各類各樣的佈局。佈局
容器裏面的水平區域稱爲「行」,垂直區域稱爲「列」,行列重疊出來的空間組成單元格post
劃分網格的線,稱爲」網格線「flex
黃色的表明是列的網格線,綠色表明的是行的網格線。Grid和flex相似,佈局的屬性都是分爲兩類,一類定義在容器上,稱爲容器屬性,一類定義在項目上,稱爲項目屬性。url
display屬性
display:grid指定一個容器爲網格佈局,.net
<div class="container"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div>
.container { width: 100%; display: grid; /**採用grid佈局**/ background-color: palevioletred; /** grid-template-columns: 100px 200px 300px; grid-template-rows: 200px 200px;**/ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 300px ; } .item { border: 5px solid white; width: 100%; height: 100%; }
佈局效果以下:code
特別注意blog
grid-template-columns和 grid-template-rows
grid-template-columns:用來指定行的寬度開發
grid-template-rows:用來指定行的高度
1.1也能夠使用百分比來表示
1.2 網格提供了fr關鍵字(fraction的縮寫,意爲「片斷」),若是兩列的寬度分別爲1fr和2fr,就表示後者是前者的2倍
1.3 能夠使用具體的像素單位。
2.使用Grid佈局構建底部菜單欄和總體頁面的分割控制,實現的效果以下:
2.1頁面視圖部分代碼:
<div class="container"> <div class="contentview"> </div> <div class="bottomview"> <block for="{{menus}}"> <div class="box"> <div class="boximg"> <image class="topimg" src="{{$item.path}}"></image> </div> <div class="boxtxt"> <text>{{$item.name}}</text> </div> </div> </block> </div> </div>
2.2 業務邏輯js代碼,數據構建
export default { data: { title: 'World', menus:[{"name":"首頁","path":"common/fs.png"},{"name":"分類","path":"common/cs.png"}, {"name":"旅遊","path":"common/ls.png"},{"name":"個人","path":"common/ms.png"}] } }
2.3 css採用 Grid佈局,
.container { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 88% 12%; } .contentview{ width: 100%; height: 100%; border: 5px solid powderblue; } .bottomview{ width: 100%; height: 100%; border: 5px solid cadetblue; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100%; } .box{ width: 100%; height: 100%; border: 8px solid green; display: grid; grid-template-columns: 1fr; grid-template-rows: 70% 30%; } .boximg{ width: 80%; height: 100%; /** border:2px solid red;**/ display: flex; justify-content: center; align-items: center; } .boxtxt{ width: 100%; height: 100%; /** border:2px solid blue;**/ display: flex; justify-content: center; } .topimg{ width: 65px; height: 65px; }
這個是Grid佈局構建底部菜單欄的具體實現,能夠和Flex佈局作個技術的對比。
3.grid-row-gap和grid-colunm-gap屬性
grid-row-gap:設置行與行之間的間隔
grid-colunm-gap:設置列於列之間的間隔
grid-row-gap和grid-colunms-gap合併簡寫的話,格式爲grid-gap
<div class="container"> <div class="item1"> <text>1</text> </div> <div class="item1"> <text>2</text> </div> <div class="item1"> <text>3</text> </div> <div class="item1"> <text>4</text> </div> <div class="item1"> <text>5</text> </div> <div class="item1"> <text>6</text> </div> </div>
.container { width:100%; background-color: #f3f3f3; display: grid; grid-template-columns: 33% 33% 33%; grid-template-rows: 200px 300px ; grid-columns-gap: 20px; grid-rows-gap: 20px; } .item1{ width: 100%; height: 100%; border:1px solid #fff; color:#fff; font-weight: bold; background-color: powderblue; display: flex; justify-content: center; align-items: center; }
設置間隔效果以下:
Grid佈局和Flex佈局在鴻蒙,PC,小程序都有很是普遍的應用,也是佈局標準,入門的同窗,能夠選擇從這裏起步,可以夠好的掌握鴻蒙的應用開發,而後在切入到鴻蒙的Java開發。
做者:六合李欣
想了解更多內容,請訪問: 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com