构建课程落地页
中级~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
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容,我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤:添加一个带渐变背景的 header 区域,在 h1 中写上课程标题,并加一行副标题。
实时预览
实时预览