苏晚极简个人主页 HTML 单页源码（纯白居中）

这是一款极简风格的个人主页单页源码。纯白背景、内容垂直居中：头像、姓名、一句简介、几个兴趣标签、两个行动按钮，再加一排社交链接。没有多余装饰，靠留白和排版取胜，非常适合博主、创作者、KOL。

设计上全程黑白灰，圆角头像与胶囊标签点缀，移动端自动满宽，怎么看都干净。它证明了「不堆图也能很高级」——新手也能轻松读懂每一行。

单文件、零依赖，开箱即用。把文字换成你自己的，就是一张能发出去的个人名片页。

使用教程

1. 下载与保存

复制代码保存为 index.html。

2. 本地预览

双击打开预览。

3. 自定义修改

换头像：把 .avatar 里的字母换成你的姓氏，或改成 <img src="你的图">。改文案：替换 <h1> 与 .bio。改标签：增删 .chips span。改按钮链接：把 .actions a 的 href 指向你的订阅/作品页。

4. 上线部署

传到静态托管即拥有个人主页网址。

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{--ink:#111827;--muted:#6b7280;--line:#eceef1;--brand:#111827}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    background:#ffffff;color:var(--ink);line-height:1.8;
    display:flex;justify-content:center;padding:60px 20px}
  .card{width:100%;max-width:560px;text-align:center}
  .avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 24px;
    background:#f3f4f6;display:flex;align-items:center;justify-content:center;
    font-size:40px;color:var(--muted)}
  h1{font-size:30px;font-weight:800;letter-spacing:-.5px}
  .bio{color:var(--muted);font-size:15px;margin:14px auto 28px;max-width:420px}
  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
  .chips span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px}
  .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .actions a{text-decoration:none;padding:11px 22px;border-radius:12px;font-size:14px;
    font-weight:600;transition:.2s}
  .primary{background:var(--brand);color:#fff}
  .primary:hover{opacity:.85}
  .ghost{border:1px solid var(--line);color:var(--ink)}
  .ghost:hover{background:#f9fafb}
  .links{display:flex;gap:22px;justify-content:center;font-size:14px}
  .links a{color:var(--muted);text-decoration:none}
  .links a:hover{color:var(--ink)}
  .divider{height:1px;background:var(--line);margin:34px 0}
  footer{color:var(--muted);font-size:13px}
</style>
</head>
<body>
  <div class="card">
    <div class="avatar">苏</div>
    <h1>苏晚 Su Wan</h1>
    <p class="bio">自由撰稿人 / 生活方式博主。写关于旅行、咖啡与慢生活的故事。相信「少即是多」。</p>
    <div class="chips">
      <span>✍️ 写作</span><span>📷 摄影</span><span>☕ 咖啡</span><span>🌿 生活</span>
    </div>
    <div class="actions">
      <a class="primary" href="#subscribe">订阅专栏</a>
      <a class="ghost" href="#work">查看作品</a>
    </div>
    <div class="links">
      <a href="#">微博</a><a href="#">小红书</a><a href="#">公众号</a><a href="#">邮箱</a>
    </div>
    <div class="divider"></div>
    <footer id="subscribe">© 2026 苏晚 · 用纯 HTML + CSS 搭建</footer>
  </div>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1722.html