英语培训机构官网搭建教程02首页搭建-CSDN博客

本文链接：https://blog.csdn.net/u012877217/article/details/149560280

上一篇我们搭建了官网的后台，录入基础数据之后就可以搭建官网的首页了。首页我们一共包含八个部分的内容，低代码的搭建思路是先创建应用，接着创建页面，然后选择合适的布局组件搭建每一部分的内容，本篇我们介绍一下具体的开发过程。

1 创建应用

选择可视化低代码，从空白创建应用
在这里插入图片描述
输入应用的名称，点击创建应用

2 创建页面

点击页面设计进入设计视图
在这里插入图片描述
点击创建页面的图标

输入标题和页面ID

切换到页面布局

选择根据页面一键生成菜单

可以用figma自己做一个图标，选中图标组件，替换成我们自己的素材

在这里插入图片描述
然后修改文本内容，改为你自己的品牌名称

3 页面布局搭建

3.1 第一部分

页面布局搭建的时候要考虑多终端适配的问题，网站要既能在电脑端正常浏览，也可以在手机端正常浏览。通常我们可以使用网格布局来实现，网格布局的列可以在不同的终端显示的宽度不一样。

先用网格标出我们布局的行和列来
在这里插入图片描述
布局拆分好之后就可以给组件设置具体的属性，选中第一行，设置背景色

列里添加一个普通容器，设置内边距上下80，左右120

普通容器里添加一个文本组件，设置字体大小、行高

继续添加文本组件，设置字体大小、行高、颜色
在这里插入图片描述
第二行先将列的数量修改为3

修改行的内边距和背景色

第一列里添加一个普通容器，设置背景色为白色，高为204，纵向排列，左对齐、垂直居中

里边继续增加普通容器，设置宽和高各为64

里边添加图标组件，选择合适的图标
在这里插入图片描述
将做好的效果复制到第二列和第三列

3.2 第二部分

第二部分我们分为标题、图文列表和视频，在第三行我们搭建标题，搭建方法和第一部分的标题搭建方法一样
在这里插入图片描述
第四行设置为两列

第一列里放置普通容器，里边添加图片组件和文本组件

将搭建好的内容复制到第二列里

第五行也设置为一列布局，添加文本组件，设置具体的样式

下边添加一个视频播放组件

第二部分整体效果：
在这里插入图片描述