在线预约小程序搭建教程5-科目导航页的制作

上一节我们介绍了底部导航条的制作方法，本节我们介绍一下科目导航功能的制作。

切换到科目导航页面

在这里插入图片描述

页面中增加一个普通容器，并设置一下样式

在这里插入图片描述

padding-bottom: 120px;
    background: rgb(244, 244, 244)

为了好看一点，我们增加一个广告位，先增加个普通容器里边放置一个图片组件

在这里插入图片描述

普通容器增加如下样式

width: 100%;
    height: 360px;
    background: rgb(255, 255, 255)

图片组件增加如下样式

width: 100%;
    height: 360px

然后找个在线作图的软件，制作一个封面图片，并且上传到素材库中

在这里插入图片描述

将图片设置为刚才的素材

在这里插入图片描述

在图片的下边增加个普通容器来放置我们的科目导航图标

在这里插入图片描述

给容器设置如下样式

height: 160px;
    margin: 1.5rem 0.5rem 0px

让容器有一定的外边距并且设置容器的高度

接着在容器里增加一个网格布局

在这里插入图片描述

我们希望每一个插槽里的结构是上下结构，上边是图标，下边是文字，具体的结构如下

在这里插入图片描述

要实现这种垂直布局，可以设置外层容器布局的样式

在这里插入图片描述

布局样式选择flex布局，按照垂直居中的样式排列元素。高度和宽度都可以设置为100%充满容器

在这里插入图片描述

内层的容器我们先让它水平居中

在这里插入图片描述

宽高都设置成120

在这里插入图片描述

给它一个白色的背景色

在这里插入图片描述

边框设置成100就变成了圆形

在这里插入图片描述

最后加个阴影显得立体一点

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

图片呢我们先设置为内联块布局，并且设置宽和高

在这里插入图片描述

同样的道路我们还是从iconfont里下载图标并且上传到素材库中

在这里插入图片描述

这样就把图标设置到图片组件上即可

在这里插入图片描述

科目导航弄好之后，同样的底部也增加一个导航栏，直接粘贴我们上一节制作的即可，不过选中值要设置成我们科目导航页的ID

在这里插入图片描述

这样我们的页面就搭建好了，当然了还需要点击图标能跳转到教师列表页，事件和页面传参我们放到下一节讲解。