本源码是一款为知识付费、线上训练营、职业技能课程打造的「转化型落地页」单页模板。采用翡翠绿与金色搭配，视觉上既有成长的活力，又不失知识产品的专业感。首屏直接给出核心卖点「21 天，把脑里的想法写成影响力」，并用早鸟价、限额提示营造紧迫感，配合右侧「你能带走什么」权益卡片，快速建立报名动机。
页面内容按用户决策路径设计：「为什么是这门课」用三张卡片讲清楚结构先行、刻意练习、真实场景三大差异化；「学习路径」以四步递进展示从找方向到出成果的过程；「课程大纲」按三周模块详细列出每周主题与内容。最后的深色报名区再次强调价格与退款保障，降低决策门槛。
适合知识付费课程、职场训练营、考研/公考/技能课程的宣传页，也适合作为市场营销、前端开发的项目案例。替换课程名、价格、大纲与客服信息后即可上线投放。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>21 天写作训练营 · 把想法写成影响力</title>
<style>
:root{
--bg:#f3faf6; --ink:#1f2d28; --muted:#5f6f67;
--emerald:#1f9d6b; --emerald-d:#157a52; --gold:#e0a93b;
--card:#ffffff; --line:#dcebe3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
background:var(--bg);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font-weight:800;font-size:19px}
.logo span{color:var(--emerald)}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--emerald)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;padding:80px 0 70px}
.badge{display:inline-block;background:#e7f6ee;color:var(--emerald-d);font-size:13px;font-weight:600;
padding:6px 14px;border-radius:30px;margin-bottom:18px}
.hero h1{font-size:44px;line-height:1.25;letter-spacing:.5px;margin-bottom:18px}
.hero h1 em{color:var(--emerald);font-style:normal}
.hero p.lead{color:var(--muted);font-size:16px;max-width:440px;margin-bottom:26px}
.hero .btns{display:flex;gap:14px;align-items:center}
.btn{display:inline-block;background:var(--emerald);color:#fff;padding:14px 32px;border-radius:40px;
font-weight:600;font-size:15px;transition:.25s}
.btn:hover{background:var(--emerald-d);transform:translateY(-2px)}
.price-now{font-size:15px;color:var(--muted)}
.price-now b{color:var(--emerald-d);font-size:26px}
.price-now s{opacity:.6;margin-left:6px}
.hero-card{background:linear-gradient(160deg,#1f9d6b,#157a52);color:#fff;border-radius:24px;
padding:34px;box-shadow:0 24px 50px rgba(31,157,107,.25)}
.hero-card h3{font-size:20px;margin-bottom:16px}
.hero-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px}
.hero-card li{display:flex;gap:10px;align-items:flex-start}
.hero-card li::before{content:"✓";background:rgba(255,255,255,.2);width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}
section{padding:68px 0}
.sec-title{font-size:30px;text-align:center;margin-bottom:10px}
.sec-sub{color:var(--muted);text-align:center;margin-bottom:42px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(31,157,107,.12)}
.card .ic{font-size:26px;margin-bottom:12px}
.card h4{font-size:18px;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative}
.step .num{width:38px;height:38px;border-radius:11px;background:var(--emerald);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px}
.step h4{font-size:16px;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}
.curri{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px;max-width:760px;margin:0 auto}
.curri .row{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.curri .row:last-child{border-bottom:none}
.curri .wk{background:#e7f6ee;color:var(--emerald-d);font-weight:700;font-size:13px;
padding:4px 12px;border-radius:8px;height:fit-content;white-space:nowrap}
.curri .row b{display:block;font-size:15px}
.curri .row span{color:var(--muted);font-size:13px}
.final{background:linear-gradient(135deg,#1f2d28,#22463a);color:#fff;border-radius:26px;
padding:54px;text-align:center;margin-bottom:70px}
.final h2{font-size:30px;margin-bottom:14px}
.final p{color:#cfe6db;margin-bottom:26px}
.final .btn{background:var(--gold)}
.final .btn:hover{background:#c9952f}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:820px){
.hero{grid-template-columns:1fr;padding:50px 0 56px}
.hero h1{font-size:32px}
.grid3,.steps{grid-template-columns:1fr}
.nav-links{display:none}
}
</style>
</head>
<body>
<header>
<div class="wrap nav">
<div class="logo">写力<span>·</span>训练营</div>
<nav class="nav-links">
<a href="#why">为什么学</a>
<a href="#path">学习路径</a>
<a href="#curri">课程大纲</a>
<a href="#join">报名</a>
</nav>
</div>
</header>
<div class="wrap">
<section class="hero">
<div>
<span class="badge">🔥 第 12 期 · 限额 200 人</span>
<h1>21 天，把脑里的想法<br><em>写成影响力</em>。</h1>
<p class="lead">专为职场人、自媒体新手设计的写作训练营。每天 20 分钟，从不会写到能稳定输出，让你用文字拿到结果。</p>
<div class="btns">
<a href="#join" class="btn">立即报名 →</a>
<div class="price-now">早鸟价 <b>¥299</b> <s>¥599</s></div>
</div>
</div>
<div class="hero-card">
<h3>你能带走什么</h3>
<ul>
<li>一套可复用的选题与结构方法论</li>
<li>21 篇带点评的作业与 1 篇成品长文</li>
<li>专属社群 + 3 场直播答疑</li>
<li>结业证书与优秀作品推荐位</li>
</ul>
</div>
</section>
<section id="why">
<h2 class="sec-title">为什么是这门课</h2>
<p class="sec-sub">不教你华丽辞藻，只教你「写得清楚、有人看、能转化」。</p>
<div class="grid3">
<div class="card"><div class="ic">🧭</div><h4>结构先行</h4><p>先搭骨架再填肉，告别写到一半卡住，让每篇文章都有清晰主线。</p></div>
<div class="card"><div class="ic">✍️</div><h4>刻意练习</h4><p>21 天每天一个小任务，配合点评，把方法练成肌肉记忆。</p></div>
<div class="card"><div class="ic">📈</div><h4>真实场景</h4><p>覆盖公众号、小红书、工作报告等高频场景，学完就能用。</p></div>
</div>
</section>
<section id="path">
<h2 class="sec-title">学习路径</h2>
<p class="sec-sub">四步走，从下笔困难到稳定产出。</p>
<div class="steps">
<div class="step"><div class="num">1</div><h4>找方向</h4><p>定位你的写作赛道与读者画像。</p></div>
<div class="step"><div class="num">2</div><h4>学方法</h4><p>掌握选题、标题、开头与结构。</p></div>
<div class="step"><div class="num">3</div><h4>勤输出</h4><p>每日练习 + 导师点评纠偏。</p></div>
<div class="step"><div class="num">4</div><h4>出成果</h4><p>打磨一篇代表作，形成个人风格。</p></div>
</div>
</section>
<section id="curri">
<h2 class="sec-title">课程大纲</h2>
<p class="sec-sub">三大模块，循序渐进。</p>
<div class="curri">
<div class="row"><span class="wk">第 1 周</span><div><b>地基篇 · 写清楚</b><span>选题公式、标题技巧、开头三秒法则、段落节奏</span></div></div>
<div class="row"><span class="wk">第 2 周</span><div><b>表达篇 · 写动人</b><span>故事化叙事、金句打磨、情绪曲线、案例拆解</span></div></div>
<div class="row"><span class="wk">第 3 周</span><div><b>实战篇 · 写结果</b><span>多平台适配、爆款复盘、个人 IP 沉淀、结业长文</span></div></div>
</div>
</section>
<section id="join">
<div class="final">
<h2>名额有限，下一期涨价</h2>
<p>现在报名锁定 ¥299 早鸟价，开营前可全额退。</p>
<a href="#" class="btn">微信支付报名</a>
</div>
</section>
</div>
<footer class="wrap">
<span>© 2026 写力训练营</span>
<span>客服微信：xieli_camp · 工作日 10:00–19:00</span>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1928.html
微信扫一扫 
支付宝扫一扫 
