Nova Studio 作品集 HTML 单页源码（深色网格风）

这是一款深色风格的作品集展示单页源码。顶部是带渐变标题文字的 Hero 区，下方是 6 个渐变色块缩略图组成的网格，每个色块带项目名、一句话说明和标签。很适合设计工作室、接单 freelancer 或任何想把项目漂亮地摆出来的场景。

设计上用深色背景 #0f1117 配纯白卡片与渐变文字，hover 时卡片轻微上浮、边框点亮主色，细节有质感但不浮夸。所有渐变、阴影都用 CSS 变量统一管理，改色只动一处。

同样零依赖单文件实现，响应式从三列自动降到两列再到单列。你可以把它当成作品集首页，点任意卡片再跳转到详情页，也可以直接把卡片换成自己的项目。

使用教程

1. 下载与保存

将下方代码复制保存为 index.html。

2. 本地预览

双击打开，或在文件目录运行 python -m http.server 后访问 localhost。

3. 自定义修改

换项目：修改每个 .item 里的标题、说明文字和 .k 标签。换配色：调整 .t1~.t6 的 linear-gradient。加项目：复制一个 <article class="item"> 块即可。改数量布局：.grid 的 grid-template-columns 控制列数。

4. 上线部署

把 index.html 传到任意静态托管即可上线。

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>Nova Studio · 作品集</title>
<style>
  :root{--bg:#0f1117;--card:#171a23;--ink:#e8eaf0;--muted:#9aa3b2;
    --brand:#7c5cff;--brand2:#22d3ee;--line:#262b36;--radius:16px}
  *{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}
  .hero{max-width:1100px;margin:0 auto;padding:80px 24px 40px;text-align:center}
  .hero .badge{display:inline-block;padding:6px 16px;border:1px solid var(--line);
    border-radius:999px;color:var(--muted);font-size:13px;margin-bottom:20px}
  .hero h1{font-size:44px;font-weight:800;letter-spacing:-1px;
    background:linear-gradient(90deg,var(--brand),var(--brand2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p{color:var(--muted);max-width:560px;margin:16px auto 0}
  .grid{max-width:1100px;margin:0 auto;padding:20px 24px 80px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;transition:.25s;cursor:pointer}
  .item:hover{transform:translateY(-6px);border-color:var(--brand)}
  .thumb{height:160px;display:flex;align-items:center;justify-content:center;
    font-size:36px;font-weight:800;color:#fff}
  .t1{background:linear-gradient(135deg,#7c5cff,#22d3ee)}
  .t2{background:linear-gradient(135deg,#f97316,#ef4444)}
  .t3{background:linear-gradient(135deg,#10b981,#3b82f6)}
  .t4{background:linear-gradient(135deg,#ec4899,#8b5cf6)}
  .t5{background:linear-gradient(135deg,#f59e0b,#84cc16)}
  .t6{background:linear-gradient(135deg,#06b6d4,#6366f1)}
  .meta{padding:18px}
  .meta h3{font-size:16px}
  .meta p{color:var(--muted);font-size:13px;margin-top:6px}
  .meta .k{display:inline-block;margin-top:12px;font-size:12px;color:var(--brand2)}
  footer{text-align:center;color:var(--muted);font-size:13px;padding:0 0 50px}
  @media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.hero h1{font-size:34px}}
  @media(max-width:560px){.grid{grid-template-columns:1fr}}
</style>
</head>
<body>
  <header class="hero">
    <span class="badge">DESIGN × CODE STUDIO</span>
    <h1>Nova Studio</h1>
    <p>我们是一支专注品牌与数字产品的独立设计小队，下面是我们最近一年最骄傲的六个项目。</p>
  </header>
  <main class="grid">
    <article class="item"><div class="thumb t1">A</div>
      <div class="meta"><h3>Aurora 品牌官网</h3><p>为新能源品牌打造的 immersive 官网，含 3D 滚动叙事。</p><span class="k">Web · 3D</span></div></article>
    <article class="item"><div class="thumb t2">B</div>
      <div class="meta"><h3>Blaze 外卖 App</h3><p>重设计外卖下单流程，转化提升 23%。</p><span class="k">UI · 移动端</span></div></article>
    <article class="item"><div class="thumb t3">C</div>
      <div class="meta"><h3>Cedar 数据看板</h3><p>实时可视化后台，服务 500+ 企业客户。</p><span class="k">Dashboard</span></div></article>
    <article class="item"><div class="thumb t4">D</div>
      <div class="meta"><h3>Dew 美妆电商</h3><p>温柔女性向购物体验，首月 GMV 破百万。</p><span class="k">电商 · 品牌</span></div></article>
    <article class="item"><div class="thumb t5">E</div>
      <div class="meta"><h3>Ember 播客平台</h3><p>极简音频社区，支持 AI 自动生成字幕。</p><span class="k">产品 · AI</span></div></article>
    <article class="item"><div class="thumb t6">F</div>
      <div class="meta"><h3>Flux 设计系统</h3><p>跨端统一组件库，覆盖 200+ 组件。</p><span class="k">Design System</span></div></article>
  </main>
  <footer>© 2026 Nova Studio · 用 HTML + CSS 即可复刻此布局</footer>
</body>
</html>

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