本源码是一款 Newsletter/周刊/邮件订阅的落地页模板，整体采用薄荷绿、奶油白与柔焦渐变 Blob 背景，传递轻松、有品质的阅读气质。首屏即放置邮箱订阅表单，并辅以订阅人数、打开率等社会认同数据，降低用户的决策门槛。
设计上突出「一封信」的仪式感：主标题下方的下划线高亮、悬浮卡片的柔阴影、往期精选的期号色块、底部的读者引言卡片，都围绕「慢下来阅读」的氛围展开。响应式布局确保手机端也能舒适地填写邮箱并浏览历史内容。
适合独立博主、知识创作者、产品团队上线内容订阅页；也适合企业市场部门用作活动报名或白皮书下载的获客落地页。替换文案与邮件收集后端即可投入使用。
使用教程
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>周五来信 · 邮件订阅落地页</title>
<style>
:root{
--bg:#f3faf6;
--card:#ffffff;
--line:#dcece4;
--mint:#10a37f;
--mint-d:#0b7d61;
--mint-l:#e4f6ef;
--text:#152922;
--muted:#5f7a71;
--ink:#0d1f1a;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
background:var(--bg);color:var(--text);line-height:1.8;-webkit-font-smoothing:antialiased;
position:relative;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
/* 背景装饰 */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;pointer-events:none}
.blob.a{width:420px;height:420px;background:#b9ecd8;top:-140px;left:-110px}
.blob.b{width:340px;height:340px;background:#cfe8ff;top:220px;right:-120px}
.blob.c{width:300px;height:300px;background:#ffe6c2;bottom:120px;left:-90px}
/* 顶栏 */
header{padding:26px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px}
.logo i{
width:32px;height:32px;border-radius:10px;background:var(--mint);color:#fff;font-style:normal;
display:grid;place-items:center;font-size:15px;
}
.nav .lk{font-size:14px;color:var(--muted)}
.nav .lk:hover{color:var(--mint)}
/* Hero */
.hero{text-align:center;padding:52px 0 44px}
.pill{
display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:99px;font-size:13px;
background:var(--mint-l);color:var(--mint-d);font-weight:600;margin-bottom:26px;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:bl 1.6s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
h1{font-size:clamp(32px,5.6vw,54px);line-height:1.16;font-weight:900;letter-spacing:-.02em;margin-bottom:18px}
h1 em{font-style:normal;position:relative;color:var(--mint-d);white-space:nowrap}
h1 em::after{
content:"";position:absolute;left:0;right:0;bottom:6px;height:11px;border-radius:6px;
background:rgba(16,163,127,.2);z-index:-1;
}
.lead{font-size:clamp(15px,2.2vw,18px);color:var(--muted);max-width:560px;margin:0 auto 34px}
/* 订阅表单 */
.sub{max-width:520px;margin:0 auto}
.sub form{display:flex;gap:10px;background:var(--card);padding:8px;border-radius:16px;box-shadow:0 14px 40px rgba(16,163,127,.13);border:1px solid var(--line)}
.sub input{
flex:1;border:none;outline:none;padding:14px 16px;font-size:15px;background:transparent;
font-family:inherit;color:var(--text);min-width:0;
}
.sub input::placeholder{color:#93a9a2}
.sub button{
border:none;cursor:pointer;padding:14px 28px;border-radius:11px;font-size:15px;font-weight:700;
background:var(--mint);color:#fff;transition:.25s;white-space:nowrap;font-family:inherit;
}
.sub button:hover{background:var(--mint-d);transform:translateY(-1px)}
.trust{margin-top:16px;font-size:13px;color:var(--muted);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.trust span::before{content:"✓ ";color:var(--mint);font-weight:900}
/* 社会认同 */
.proof{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.avs{display:flex}
.avs i{
width:36px;height:36px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-11px;
font-style:normal;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
}
.avs i:first-child{margin-left:0}
.avs i:nth-child(1){background:#10a37f}.avs i:nth-child(2){background:#f0a12e}
.avs i:nth-child(3){background:#5b7cf0}.avs i:nth-child(4){background:#e15b6a}
.avs i:nth-child(5){background:#8b5cf6}
.proof p{font-size:14px;color:var(--muted)}
.proof b{color:var(--text)}
/* 内容板块 */
section{padding:56px 0}
.sec-h{text-align:center;margin-bottom:38px}
.sec-h h2{font-size:clamp(23px,3.6vw,32px);font-weight:900;margin-bottom:9px}
.sec-h p{color:var(--muted);font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.c{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 24px;transition:.3s}
.c:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(21,41,34,.09)}
.c .ic{
width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;
background:var(--mint-l);color:var(--mint-d);margin-bottom:15px;
}
.c:nth-child(2) .ic{background:#fff2dd;color:#c17d16}
.c:nth-child(3) .ic{background:#e8eeff;color:#3f5bd0}
.c h4{font-size:16.5px;margin-bottom:7px}
.c p{font-size:14px;color:var(--muted)}
/* 往期精选 */
.issues{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.iss{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);transition:.24s}
.iss:last-child{border-bottom:none}
.iss:hover{background:#f8fdfb}
.iss .no{
width:58px;height:58px;border-radius:14px;background:linear-gradient(150deg,var(--mint),#3fcfa5);
color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;line-height:1.1;text-align:center;
}
.iss .no small{display:block;font-size:10px;font-weight:600;opacity:.85}
.iss h4{font-size:16px;margin-bottom:4px}
.iss p{font-size:13.5px;color:var(--muted)}
.iss .rd{font-size:13px;color:var(--mint-d);font-weight:600;white-space:nowrap}
/* 引言 */
.quote{
margin-top:56px;background:linear-gradient(140deg,var(--ink),#123c31);color:#e9f6f1;
border-radius:22px;padding:46px 40px;text-align:center;
}
.quote .qm{font-size:44px;line-height:1;color:var(--mint);margin-bottom:12px}
.quote p{font-size:clamp(16px,2.4vw,20px);max-width:620px;margin:0 auto 20px;line-height:1.8}
.quote .who{font-size:13.5px;opacity:.7}
/* 底部 CTA */
.foot-cta{text-align:center;padding:62px 0 20px}
.foot-cta h3{font-size:clamp(22px,3.4vw,30px);font-weight:900;margin-bottom:10px}
.foot-cta p{color:var(--muted);margin-bottom:26px}
footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--muted);font-size:13px;margin-top:36px}
footer .fl{display:flex;gap:20px;justify-content:center;margin-bottom:12px}
footer .fl a:hover{color:var(--mint)}
@media(max-width:640px){
.sub form{flex-direction:column}
.sub button{width:100%}
.iss{grid-template-columns:58px 1fr;gap:14px;padding:18px}
.iss .rd{display:none}
section{padding:40px 0}
}
</style>
</head>
<body>
<div class="blob a"></div>
<div class="blob b"></div>
<div class="blob c"></div>
<div class="wrap">
<header class="nav">
<div class="logo"><i>信</i>周五来信</div>
<a href="#archive" class="lk">往期归档 →</a>
</header>
<div class="hero">
<div class="pill"><span class="dot"></span>每周五早八点，准时抵达</div>
<h1>每周一封信<br>让你的思考<em>慢下来</em></h1>
<p class="lead">一份关于产品、设计与独立创造的中文周刊。没有热点追逐，只有值得反复咀嚼的观察与实践笔记。</p>
<div class="sub">
<form onsubmit="event.preventDefault();var b=this.querySelector('button');b.textContent='订阅成功 ✓';b.style.background='#0b7d61';">
<input type="email" placeholder="输入你的邮箱地址" required>
<button type="submit">免费订阅</button>
</form>
<div class="trust"><span>完全免费</span><span>无广告插入</span><span>一键退订</span></div>
</div>
<div class="proof">
<div class="avs"><i>沈</i><i>柏</i><i>宋</i><i>阮</i><i>+</i></div>
<p>已有 <b>18,420</b> 位创造者在读，平均打开率 <b>62%</b></p>
</div>
</div>
</div>
<section>
<div class="wrap">
<div class="sec-h"><h2>你会收到什么</h2><p>每封信约 2000 字，10 分钟读完，结构固定不啰嗦</p></div>
<div class="cards">
<div class="c"><div class="ic">✎</div><h4>一篇主文</h4><p>围绕一个具体问题展开的深度思考，通常来自本周真实遇到的项目困境与解法。</p></div>
<div class="c"><div class="ic">◈</div><h4>五个发现</h4><p>本周淘到的好工具、好文章、好设计，每条附一句为什么值得看的理由。</p></div>
<div class="c"><div class="ic">♁</div><h4>一句摘抄</h4><p>从正在读的书里挑一段话，配上当下的处境与体会，留白给你自己填。</p></div>
</div>
</div>
</section>
<section id="archive">
<div class="wrap">
<div class="sec-h"><h2>往期精选</h2><p>先读几封，再决定要不要留下</p></div>
<div class="issues">
<div class="iss">
<div class="no">#42<small>07-25</small></div>
<div><h4>做减法的勇气：我删掉了产品里 60% 的功能</h4><p>用户说想要更多，数据却告诉我完全相反的答案。</p></div>
<div class="rd">阅读 →</div>
</div>
<div class="iss">
<div class="no">#41<small>07-18</small></div>
<div><h4>关于「审美」这件事，能不能被训练出来</h4><p>三年临摹了 800 个界面之后，我得出的一点结论。</p></div>
<div class="rd">阅读 →</div>
</div>
<div class="iss">
<div class="no">#40<small>07-11</small></div>
<div><h4>独立开发第 500 天：钱、孤独与自由</h4><p>一份坦诚到有点尴尬的年度复盘，包括真实收入数字。</p></div>
<div class="rd">阅读 →</div>
</div>
<div class="iss">
<div class="no">#39<small>07-04</small></div>
<div><h4>为什么好的文档比好的代码更稀缺</h4><p>写文档的人在替未来所有人节省时间，可惜没人给他鼓掌。</p></div>
<div class="rd">阅读 →</div>
</div>
</div>
<div class="quote">
<div class="qm">“</div>
<p>这是我唯一一份会在收到当天就点开读完的中文周刊。它不制造焦虑，反而让我确认自己走的路没那么孤单。</p>
<div class="who">—— 一位订阅了 37 期的读者</div>
</div>
<div class="foot-cta">
<h3>下一封信，周五早八点</h3>
<p>现在订阅，还能收到过往 10 期的精选合集</p>
<div class="sub">
<form onsubmit="event.preventDefault();var b=this.querySelector('button');b.textContent='订阅成功 ✓';b.style.background='#0b7d61';">
<input type="email" placeholder="输入你的邮箱地址" required>
<button type="submit">加入 18,420 位读者</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap">
<div class="fl"><a href="#">关于作者</a><a href="#">投稿合作</a><a href="#">RSS 订阅</a><a href="#">隐私政策</a></div>
<div>© 2026 周五来信 · 本页面为演示模板</div>
</div>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1768.html
微信扫一扫 
支付宝扫一扫 
