鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?【课程入口】

目录:
1.Grid简介
2.使用Grid布局实现的效果
3.grid-row-gap和grid-colunm-gap属性
4.《鸿蒙的js开发模式》系列文章合集

1.目前鸿蒙css布局方案中,除了Flex布局 ,网格布局Grid可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。

容器里面的水平区域称为“行”,垂直区域称为“列”,行列重叠出来的空间组成单元格

划分网格的线,称为”网格线“

黄色的代表是列的网格线,绿色代表的是行的网格线。Grid和flex类似,布局的属性都是分为两类,一类定义在容器上,称为容器属性,一类定义在项目上,称为项目属性。

display属性
display:grid指定一个容器为网格布局,

<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%; }

布局效果如下:

特别注意

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

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一的更多相关文章

  1. 鸿蒙的js开发部模式18:鸿蒙的文件上传到python服务器端

    1.首先鸿蒙的js文件上传,设置目录路径为: 构建路径在工程主目录下: 该目录的说明见下面描述: 视图构建如下: 界面代码: <div class="container"&g ...

  2. 鸿蒙的js开发模式19:鸿蒙手机下载python服务器端文件的实现

    目录:1.承接上篇鸿蒙客户端上传文件2.域名通过内网穿透工具3.python服务器端代码4.鸿蒙手机的界面和业务逻辑5.<鸿蒙的js开发模式>系列文章合集 1.承接上篇鸿蒙客户端上传文件, ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  5. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  6. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  7. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

随机推荐

  1. php之魔术方法 __set(),__get(),__isset(),__unset()

    __set()与__get() 当一个类里面,属性被设置为私有属性时,这个属性是不能在外部被访问的.那么当我们又想在外部访问时该怎么办呢,我们可以用方法来实现.举例如下: 1 class Test 2 ...

  2. 零基础如何使用python处理字符串?

    摘要:Python的普遍使用场景是自动化测试.爬取网页数据.科学分析之类,这其中都涉及到了对数据的处理,而数据的表现形式很多,今天我们来讲讲字符串的操作.   字符串是作为任意一门编程语言的基础,在P ...

  3. Java常用类库2

    1.java.util.Date类 package LESSON9; import java.util.Date; public class demo1 { public static void ma ...

  4. 从零开始教你安装Oracle数据库

    1.数据库安装 1.1下载 根据自己的操作系统位数,到oracle官网下载(以oracle 11g 为例) 之后把两个压缩包解压到同一个文件夹内(需要注意的是,这个文件夹路径名称中最好不要出现中文.空 ...

  5. UVA 796 - Critical Links 无向图字典序输出桥

    题目:传送门 题意:给你一个无向图,你需要找出里面的桥,并把所有桥按字典序输出 这一道题就是用无向图求桥的模板就可以了. 我一直错就是因为我在输入路径的时候少考虑一点 错误代码+原因: 1 #incl ...

  6. 2015ACM/ICPC亚洲区沈阳站-重现赛 D - Pagodas

    题意:有\(n\)个数,开始给你两个数\(a\)和\(b\),每次找一个没出现过的数\(i\),要求满足\(i=j+k\)或\(i=j-k\),当某个人没有数可以选的时候判他输,问谁赢. 题解:对于\ ...

  7. Zabbix 微信监控报警

    Zabbix-Server 设置 # 使脚本目录生效 [root@zabbix ~]# grep 'script' /etc/zabbix/zabbix_server.conf # AlertScri ...

  8. Django的settings配置文件

    一.邮件配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = 'smtp.qq.com' EMAI ...

  9. Microsoft Office Excel 2010 常用操作

    1.添加下拉菜单 (1)选中单元格 (2)数据--数据有效性--数据有效性 (3)在"有效性条件"的"允许"处,选择"序列",并在新出现的& ...

  10. Linux系统诊断必备技能之二:日志查询常用命令详解

    一.概述 日常运维工作中,排查线上环境问题,少不了去线上查日志.而使用什么命令,能快速准确地查到我们需要查找地日志信息,也是我们需要掌握的一项技能.下面介绍一下日常工作常用到的查看日志命令:tail, ...