陈墨创意作品集 HTML 单页源码（马赛克拼贴墙）

这是一款杂志式马赛克作品墙单页源码。用 CSS Grid 排出 12 个大小交错的渐变色块，有的占两格、有的占两行，像一面可以无限延展的创意墙。非常适合插画师、摄影师、视觉设计师展示作品集。

设计上靠 grid-column / grid-row 的 span 实现错落拼贴，每块都是独立渐变，hover 轻微放大，节奏感强。响应式会从四列逐级折叠到单列，手机上也能优雅浏览。

单文件、零依赖。把每一格的标题和说明换成你的作品，再给色块贴上缩略图（或保持渐变占位），一面属于你的作品墙就完成了。

使用教程

1. 下载与保存

复制代码保存为 index.html。

2. 本地预览

双击打开，或运行 python -m http.server 预览。

3. 自定义修改

改文案：替换每个 .tile 的 <h3> 与 <p>。改拼贴：给某个 .tile 加 .a/.d/.g/.j 类即可让它占两格或两行。换配色：修改 .a~.l 的 linear-gradient。贴图：把 .tile 的背景改成 background-image:url(你的图)。

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:#1f2937;--muted:#7c8698;--radius:18px}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    background:#fbfcfe;color:var(--ink);line-height:1.7}
  header{max-width:1140px;margin:0 auto;padding:70px 24px 30px}
  header .eyebrow{color:#f97316;font-weight:700;font-size:13px;letter-spacing:2px}
  header h1{font-size:40px;font-weight:800;margin:8px 0;letter-spacing:-1px}
  header p{color:var(--muted);max-width:540px}
  .mosaic{max-width:1140px;margin:0 auto;padding:10px 24px 80px;
    display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:16px}
  .tile{border-radius:var(--radius);padding:20px;color:#fff;position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:flex-end;transition:.25s}
  .tile:hover{transform:scale(1.02)}
  .tile h3{font-size:17px}
  .tile p{font-size:12px;opacity:.9}
  .a{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#6366f1,#22d3ee)}
  .b{background:linear-gradient(135deg,#f97316,#ef4444)}
  .c{background:linear-gradient(135deg,#10b981,#3b82f6)}
  .d{grid-column:span 2;background:linear-gradient(135deg,#ec4899,#8b5cf6)}
  .e{background:linear-gradient(135deg,#14b8a6,#0ea5e9)}
  .f{background:linear-gradient(135deg,#f59e0b,#f43f5e)}
  .g{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#8b5cf6,#6366f1)}
  .h{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
  .i{background:linear-gradient(135deg,#84cc16,#10b981)}
  .j{grid-column:span 2;background:linear-gradient(135deg,#f43f5e,#fb923c)}
  .k{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
  .l{background:linear-gradient(135deg,#a855f7,#ec4899)}
  @media(max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr)}.a,.d,.g,.j{grid-column:span 2}}
  @media(max-width:520px){.mosaic{grid-template-columns:1fr}.a,.d,.g,.j,.tile{grid-column:span 1 !important}}
</style>
</head>
<body>
  <header>
    <div class="eyebrow">CREATIVE PORTFOLIO</div>
    <h1>陈墨的作品墙</h1>
    <p>视觉设计 / 插画 / 品牌。这是一面可以无限延展的马赛克墙，点开任意一格都是一段创作。</p>
  </header>
  <main class="mosaic">
    <article class="tile a"><h3>城市光影系列</h3><p>12 张夜景街拍 · 摄影</p></article>
    <article class="tile b"><h3>极简图标</h3><p>线性图标集</p></article>
    <article class="tile c"><h3>品牌 VI</h3><p>茶饮品牌全案</p></article>
    <article class="tile d"><h3>插画故事 · 海</h3><p>系列数字绘画</p></article>
    <article class="tile e"><h3>字体实验</h3><p>可变字体海报</p></article>
    <article class="tile f"><h3>包装设计</h3><p>咖啡礼盒</p></article>
    <article class="tile g"><h3>动态视觉</h3><p>生成艺术 · 代码绘画</p></article>
    <article class="tile h"><h3>UI 概念</h3><p>音乐播放器</p></article>
    <article class="tile i"><h3>插画 · 森</h3><p>治愈系小景</p></article>
    <article class="tile j"><h3>展览主视觉</h3><p>美术馆年度展</p></article>
    <article class="tile k"><h3>3D 渲染</h3><p>产品静物</p></article>
    <article class="tile l"><h3>动效探索</h3><p>Loading 动画合集</p></article>
  </main>
</body>
</html>

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