优学教育官网搭建01首页-CSDN博客

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

1 创建应用

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

2 创建页面

点击创建页面的图标，创建首页
在这里插入图片描述

2 配置导航栏

对于网站类的应用，我们先配置顶部的导航栏。选择布局设计，选择顶部导航栏
在这里插入图片描述
点击菜单旁边的魔术棒图标，根据页面一键生成菜单

点击添加平级菜单，依次添加关于我们、课程中心、师资力量、成功案例、新闻动态、联系我们

回到首页，选择顶部导航布局

3 配置第一部分内容

先给第一行设置背景色
在这里插入图片描述
在第一列里添加普通容器，里边添加三个文本组件

第一个文本组件，修改文本内容为点亮未来，字体设置为48px

设置第二个文本的内容为成就梦想，48px，蓝色

设置第三个文本内容为专业教育团队，个性化教学方案，助力每一位学员实现学习目标，开启美好未来。20px，灰色字体
在这里插入图片描述
下边继续添加普通容器，里边放两个按钮

按钮内容修改为免费试听，设置字体18px，一定的内边距和圆角

按照同样的方法修改第二个按钮，第二列添加一个图片组件，从素材里选择图片，设置好的效果是
在这里插入图片描述

4 配置第二部分内容

第二部分包括标题和内容，为了H5可以直接适配，我们拆分成两部分，第一部分只是一行一列，用来显示标题，里边放一个普通容器放置两个文本组件
在这里插入图片描述
设置普通容器为纵向排列，水平垂直居中

然后设置文本内容和样式

下边的行设置为4列

先按照下图的层级我们搭建一下图标的样式

这样搭建的目的是为了给图标给一个圆形的背景色，选中图标的父容器，设置背景色，圆角