跳转到正文

构建课程落地页

中级~15 分钟0/4 步骤

与学校分享

这是压轴项目。你已经为内容添加了游戏化元素、追踪了学习进度、构建了自适应路径——现在,你将把这一切打包成一个课程落地页,分享给家长、同事和整所学校。

一个出色的落地页要完成四项任务:一个点明课程名称并吸引读者的 header、一个展示课程内容的课时列表、一个让报名轻松无阻的行动号召按钮,以及一个收尾整页的 footer。你将按顺序组装每个部分。

当有人问"你的学生在做什么?"时,这就是你要发出去的页面。认真构建它,让它为你的班级发声。

操作说明

1

添加一个带渐变背景的 header 区域,在 h1 中写上课程标题,并加一行副标题。

提示: 使用 `<header class="bg-gradient-to-br from-indigo-900 via-gray-900 to-gray-900 py-20 px-6 text-center">`,并在其中放置 `<h1>`。

这段代码写在哪里?

<!-- Assemble your course landing page here -->

写在第 11 行——在那条注释下方,接在你已经写好的代码后面。

2

添加课时列表:一个"你将学到什么"标题,以及一个由圆角列表项组成的 ul。

3

添加报名行动号召:一个高亮显示的区域,包含一个"立即报名"按钮。

4

最后添加一个 footer,为页面收尾并注明课程来源。

你的代码

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

实时预览

实时预览