英语培训机构官网搭建教程04课程总览

1 创建页面

点击创建页面的图标

输入页面的名称，选择顶部导航布局

切换到页面布局，选择顶部导航布局，点击添加平级菜单

选择我们的课程总览页面

2 第一部分搭建

第一部分相当于一个口号宣传，口号后边有个背景图。像这种我们一般是通过样式的定位去做。先在列里添加一个普通容器，里边添加一个图片组件

设置图片的布局模式为裁剪填满

设置图片的宽度和高度，宽设置为100%表示占满横向的屏幕宽度，高设置384px

从素材库里选择我们的背景图片

图片下边添加两个文本组件

现在要修改文本的样式，设置定位让文本和图片组件叠加在一起。先设置普通容器的定位为相对定位

然后设置文本的定位为绝对定位

为了让文本水平居中，我们需要设置一下文本的样式，点击CSS with AI

:root {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  line-height: 48px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  top: 143px;
}

第二个文本也按照同样的设置方法

:root {
  position: absolute;
  top: 214px;
  font-size: 20px;
  line-height: 28px;
  color: rgb(255, 255, 255);
  font-weight: normal;
  left: 50%;
  transform: translateX(-50%);
}

我们的图片有一点亮，加一些滤镜的效果

:root {
  width: 100%;
  height: 384px;
  opacity: 100%;
  filter: brightness(60%) blur(3px) grayscale(50%);
}

3 第二部分搭建

第二部分涉及到一个课程体系的介绍，通常这个需要用制图软件将课程绘制成图片，我们直接添加素材就可以，我们这一部分用一行一列布局来实现

里边添加一个普通容器，设置普通容器的背景色为灰色

里边添加一个文本组件和一个图片组件

设置普通容器的布局为纵向排列，水平垂直居中

设置文本组件的样式

其余部分和我们首页的第一部分样式是雷同的，可以从首页复制组件过来，修改内容即可