极简作品集 Portfolio HTML 单页源码

简约清爽的作品集展示页 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>极简作品集 · Portfolio</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",PingFang SC,"Microsoft YaHei",sans-serif;background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 100%);color:#1e293b;min-height:100vh}
  .wrap{max-width:900px;margin:0 auto;padding:60px 24px}
  header{text-align:center;margin-bottom:50px}
  header h1{font-size:34px;margin-bottom:10px;letter-spacing:-.5px}
  header p{color:#64748b;font-size:16px;max-width:480px;margin:0 auto;line-height:1.7}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
  .item{background:#fff;border-radius:18px;padding:22px;box-shadow:0 10px 35px rgba(30,41,59,.08);transition:.25s;border:1px solid rgba(226,232,240,.8)}
  .item:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(30,41,59,.14)}
  .thumb{height:130px;border-radius:12px;margin-bottom:16px;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:600}
  .item h3{font-size:18px;margin-bottom:8px}
  .item p{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:14px}
  .tag{font-size:12px;color:#4f46e5;background:#eef2ff;padding:4px 10px;border-radius:999px;display:inline-block}
  footer{text-align:center;margin-top:50px;color:#94a3b8;font-size:14px}
</style>
</head>
<body>
  <div class="wrap">
    <header>
      <h1>我的精选作品</h1>
      <p>一组风格简约、适配多端的前端页面与小工具，每个项目都追求干净结构与清晰体验。</p>
    </header>
    <div class="grid">
      <div class="item">
        <div class="thumb" style="--c1:#38bdf8;--c2:#6366f1">个人主页模板</div>
        <h3>星蓝主页</h3>
        <p>深色玻璃拟态风格的个人主页，适合开发者与设计师展示个人品牌。</p>
        <span class="tag">HTML / CSS</span>
      </div>
      <div class="item">
        <div class="thumb" style="--c1:#f472b6;--c2:#db2777">活动落地页</div>
        <h3>新品发布页</h3>
        <p>高转化活动落地页模板，包含首屏焦点、特性介绍与行动号召模块。</p>
        <span class="tag">营销页面</span>
      </div>
      <div class="item">
        <div class="thumb" style="--c1:#fbbf24;--c2:#f59e0b">仪表盘界面</div>
        <h3>数据看板</h3>
        <p>轻量后台仪表盘，包含数据卡片、图表区域与响应式侧边栏布局。</p>
        <span class="tag">后台 UI</span>
      </div>
      <div class="item">
        <div class="thumb" style="--c1:#34d399;--c2:#10b981">工具箱</div>
        <h3>在线工具集</h3>
        <p>常用小工具集合页面，包含单位换算、密码生成与二维码生成等。</p>
        <span class="tag">工具类</span>
      </div>
    </div>
    <footer>© 2026 极简作品集 · 设计与前端 by 小蓝</footer>
  </div>
</body>
</html>

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