留白 ATELIER 建筑事务所作品集 HTML 单页源码

留白 ATELIER 是一间关注光线、材料与尺度的小型建筑事务所的官网模板。整页使用纸白底+墨黑文字+细线分隔的极简画廊风排版，没有多余装饰，所有视觉重量都留给项目本身，体现「less is more」的克制美学。

页面结构以 Hero 大标题开场，2×2 项目网格展示代表作品，中段用事务所简介+12 年/40+ 项目数字建立信任，底部用深色 CTA 引导合作洽谈。卡片使用纯色渐变占位，便于设计师替换为真实建筑摄影。

适合建筑事务所、设计工作室、独立摄影师画廊、艺术品经销商与展览策划公司的官网；亦可作为极简风个人作品集的高品质起点。整页单文件、内嵌 CSS、响应式排版，可直接二次修改上线。

使用教程

1. 下载与保存

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

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果；也可在文件夹内运行 python -m http.server 8000，然后访问 http://localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等），即可获得独立访问网址。

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>留白 ATELIER · 建筑事务所作品集</title>
<style>
  :root{--ink:#161616;--paper:#f4f3f1;--grey:#8c8c8c;--line:#dcdad6}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1160px;margin:0 auto;padding:0 28px}
  header{border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{font-weight:800;letter-spacing:3px;font-size:18px}
  .nav a{margin-left:28px;font-size:13px;color:var(--grey);letter-spacing:1px;transition:.2s}
  .nav a:hover{color:var(--ink)}
  .hero{padding:120px 0 90px;text-align:center}
  .hero .k{font-size:12px;letter-spacing:4px;color:var(--grey);margin-bottom:20px}
  .hero h1{font-size:58px;font-weight:800;letter-spacing:-1px}
  .hero p{margin:24px auto 0;max-width:520px;color:var(--grey);font-size:16px}
  .works{padding:40px 0 90px}
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
  .proj{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.3s}
  .proj:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.08)}
  .proj .img{aspect-ratio:4/3;background:linear-gradient(135deg,#e9e7e3,#cfccc6)}
  .proj:nth-child(2) .img{background:linear-gradient(135deg,#1c1c1c,#4a4a4a)}
  .proj:nth-child(3) .img{background:linear-gradient(135deg,#d8d6d1,#b3b0a9)}
  .proj:nth-child(4) .img{background:linear-gradient(135deg,#2a2a2a,#6e6e6e)}
  .proj .meta{padding:22px 24px}
  .proj .meta h3{font-size:19px;font-weight:700}
  .proj .meta .sub{color:var(--grey);font-size:13px;margin-top:6px;display:flex;justify-content:space-between}
  .about{padding:90px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .about h2{font-size:34px;font-weight:800;margin-bottom:18px}
  .about p{color:var(--grey);font-size:15px;margin-bottom:14px}
  .about .num{font-size:46px;font-weight:800}
  footer{background:var(--ink);color:#9a9a9a;text-align:center;padding:36px 0;font-size:13px;letter-spacing:1px}
  @media(max-width:760px){.hero h1{font-size:38px}.grid{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:30px}.nav a{margin-left:16px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">留白 ATELIER</div>
  <nav><a href="#works">作品</a><a href="#about">关于</a><a href="#contact">联系</a></nav>
</div></header>

<section class="hero"><div class="wrap">
  <div class="k">ARCHITECTURE STUDIO</div>
  <h1>空间的留白<br>是生活的余裕</h1>
  <p>留白 ATELIER 是一间关注光线、材料与尺度的小型建筑事务所，相信克制比繁复更经得起时间。</p>
</div></section>

<section id="works" class="works"><div class="wrap">
  <div class="grid">
    <div class="proj"><div class="img"></div><div class="meta"><h3>屿山美术馆</h3><div class="sub"><span>文化建筑</span><span>2025</span></div></div></div>
    <div class="proj"><div class="img"></div><div class="meta"><h3>墨白宅</h3><div class="sub"><span>私宅</span><span>2024</span></div></div></div>
    <div class="proj"><div class="img"></div><div class="meta"><h3>折檐茶室</h3><div class="sub"><span>商业空间</span><span>2024</span></div></div></div>
    <div class="proj"><div class="img"></div><div class="meta"><h3>光巷书店</h3><div class="sub"><span>改造</span><span>2023</span></div></div></div>
  </div>
</div></section>

<section id="about" class="about"><div class="wrap" style="display:contents">
  <div>
    <h2>关于事务所</h2>
    <p>我们在城市与自然的边界工作，用最少的元素回应场地本身。每一道墙、每一束光，都试图为人留出停顿的余地。</p>
    <p>团队由 8 位建筑师与 3 位室内设计师组成，作品涵盖私宅、文化与商业空间。</p>
  </div>
  <div style="text-align:center">
    <div class="num">12</div><p style="color:var(--grey);margin-top:4px">年实践</p>
    <div class="num" style="margin-top:24px">40+</div><p style="color:var(--grey);margin-top:4px">建成项目</p>
  </div>
</div></section>

<section id="contact" class="works"><div class="wrap" style="text-align:center;padding-top:0">
  <h2 style="font-size:30px">开启一次合作</h2>
  <p style="color:var(--grey);margin:14px 0 26px">hello@liubai.studio · 上海 / 杭州</p>
  <a href="#" style="display:inline-block;background:var(--ink);color:#fff;padding:13px 36px;border-radius:40px;font-weight:700;font-size:15px">联系我们</a>
</div></section>

<footer>© 2026 留白 ATELIER 建筑事务所 · LESS IS MORE</footer>
</body>
</html>

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