用提示词生成着陆页
beginner~10 分钟0/4 步骤
打造你的第一个 Hero 区块
Hero 区块是作品集着陆页中最重要的部分——它是访客看到的第一眼。在本课中，你将创建一个专业的 Hero 区块，抓住访客的注意力，让他们想进一步了解你。
你将从基础 HTML 开始，用 Tailwind CSS 添加样式，打造一个带渐变背景的现代 Hero 区块，包含吸引人的主标题、副标题和行动号召（CTA）按钮。这是每一个出色作品集网站的基石。
操作说明
1
添加一个 Hero 容器 div，带 min-h-screen、渐变背景（from-purple-900 到 gray-900）和 flex 居中
提示： 使用：`<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` —— 这会创建一个带渐变背景的全屏高度区块
2
在 Hero 内部添加一个 h1 主标题写上你的名字，再加一个 p 副标题写上你的头衔/角色
3
添加一段描述性文字（p 标签），写一句关于你所做工作的标语（最多 300 字符）
4
添加一个带渐变样式和悬停效果的 CTA 按钮
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：添加一个 Hero 容器 div，带 min-h-screen、渐变背景（from-purple-900 到 gray-900）和 flex 居中
实时预览
实时预览