林知行个人主页 HTML 单页源码（浅色侧栏风）

这是一款浅色侧边栏布局的个人主页单页源码。左侧是一张固定的个人卡片（头像、姓名、职位、快捷导航、数据统计），右侧依次为「关于我 / 技能栈 / 代表作品 / 联系方式」四个内容模块，像一份清爽的在线简历。整体走干净通透的 SaaS 风，非常适合开发者、设计师、自由职业者作为个人品牌落地页。

设计上采用浅灰背景 + 纯白卡片 + 圆角阴影的轻盈质感，主色用靛蓝到天蓝的渐变作点缀，视觉统一又不抢内容。侧边栏使用了 sticky 定位，滚动时长留视线；在移动端会自动折叠到顶部，响应式体验顺滑。

全部用原生 HTML + CSS 实现，单文件即可运行，没有任何框架或外部依赖，加载极快、易于二次修改。你可以直接把它部署上线，也可以当作学习「卡片式布局 + 网格」的范例来拆解。

使用教程

1. 下载与保存

将下方代码全部复制，保存为 index.html 文件（注意后缀是 .html）。

2. 本地预览

直接双击 index.html 用浏览器打开即可看到效果；或在该文件夹下运行 python -m http.server 后访问 localhost 预览。

3. 自定义修改

改文字：直接替换 HTML 里的姓名、职位、简介、项目名。换主色：调整 <style> 中的 --brand / --brand2 两个变量。换头像：把 .avatar 里的字母换成你的姓氏，或改成 <img>。改技能条长度：修改 .bar i 的 width 百分比。

4. 上线部署

将整个 index.html 上传到任意静态托管（GitHub Pages / Vercel / 对象存储 / 虚拟主机）即可拥有独立网址。

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:#f5f7fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
    --brand:#4f46e5; --brand2:#0ea5e9; --line:#e5e7eb; --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.7}
  .wrap{max-width:1080px;margin:40px auto;padding:0 20px;display:grid;
    grid-template-columns:300px 1fr;gap:24px}
  .side{background:var(--card);border-radius:var(--radius);padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);position:sticky;top:30px;height:fit-content}
  .avatar{width:96px;height:96px;border-radius:50%;
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-size:34px;font-weight:700;margin:0 auto 16px}
  .name{text-align:center;font-size:22px;font-weight:700}
  .role{text-align:center;color:var(--muted);font-size:14px;margin:4px 0 18px}
  .links{display:flex;flex-direction:column;gap:8px}
  .links a{text-decoration:none;color:var(--ink);padding:10px 14px;border-radius:12px;
    background:#f3f4f6;font-size:14px;transition:.2s}
  .links a:hover{background:var(--brand);color:#fff}
  .stats{display:flex;justify-content:space-around;margin-top:22px;
    padding-top:18px;border-top:1px solid var(--line)}
  .stats div{text-align:center}
  .stats b{display:block;font-size:18px;color:var(--brand)}
  .stats span{font-size:12px;color:var(--muted)}
  .main{display:flex;flex-direction:column;gap:24px}
  .card{background:var(--card);border-radius:var(--radius);padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.05)}
  .card h2{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
  .card h2::before{content:"";width:4px;height:18px;border-radius:4px;background:var(--brand)}
  .tag{display:inline-block;background:#eef2ff;color:var(--brand);
    padding:4px 12px;border-radius:999px;font-size:13px;margin:0 8px 8px 0}
  .proj{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .proj div{background:#f9fafb;border-radius:12px;padding:14px;font-size:14px}
  .bar{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden;margin:6px 0 12px}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}
  .btn{display:inline-block;margin-top:10px;background:var(--brand);color:#fff;
    padding:11px 22px;border-radius:12px;text-decoration:none;font-size:14px}
  @media(max-width:760px){.wrap{grid-template-columns:1fr}.side{position:static}
    .proj{grid-template-columns:1fr}}
</style>
</head>
<body>
  <div class="wrap">
    <aside class="side">
      <div class="avatar">林</div>
      <div class="name">林知行</div>
      <div class="role">全栈工程师 · 独立开发者</div>
      <nav class="links">
        <a href="#about">关于我</a>
        <a href="#skills">技能栈</a>
        <a href="#works">代表作品</a>
        <a href="#contact">联系方式</a>
      </nav>
      <div class="stats">
        <div><b>6+</b><span>年经验</span></div>
        <div><b>48</b><span>项目</span></div>
        <div><b>12k</b><span>粉丝</span></div>
      </div>
    </aside>
    <main class="main">
      <section class="card" id="about">
        <h2>关于我</h2>
        <p>我是林知行，一名热爱把想法变成产品的人。擅长 Web 前后端、小程序与一点 AI。白天写代码，晚上做开源，相信「小而美」比「大而全」更有温度。这个页面用纯 HTML + CSS 写成，没有任何框架依赖。</p>
        <a class="btn" href="#contact">和我聊聊 →</a>
      </section>
      <section class="card" id="skills">
        <h2>技能栈</h2>
        <span class="tag">JavaScript</span><span class="tag">TypeScript</span>
        <span class="tag">React</span><span class="tag">Node.js</span>
        <span class="tag">Python</span><span class="tag">MySQL</span>
        <span class="tag">Docker</span><span class="tag">Figma</span>
        <div class="bar"><i style="width:92%"></i></div>
        <div class="bar"><i style="width:85%"></i></div>
        <div class="bar"><i style="width:78%"></i></div>
      </section>
      <section class="card" id="works">
        <h2>代表作品</h2>
        <div class="proj">
          <div><b>云笔记 Pro</b><br>多人协作笔记工具，日活 2w+</div>
          <div><b>极简记账</b><br>零广告记账小程序，下载 50w</div>
          <div><b>图床管家</b><br>开源图床客户端，GitHub 1.8k★</div>
          <div><b>日程小秘书</b><br>AI 日程整理浏览器插件</div>
        </div>
      </section>
      <section class="card" id="contact">
        <h2>联系方式</h2>
        <p>邮箱：hi@linzhixing.dev<br>微信：lin_dev<br>GitHub：github.com/linzhixing</p>
        <a class="btn" href="mailto:hi@linzhixing.dev">发邮件给我</a>
      </section>
    </main>
  </div>
</body>
</html>

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