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

留白 ATELIER 是一间关注光线、材料与尺度的小型建筑事务所作品集官网，核心定位是”空间的留白，是生活的余裕”，用极简语言传达克制比繁复更耐看的设计哲学。

视觉采用米白纸张底色搭配细灰分割线，项目网格以渐变占位图区分明暗节奏；关于页用 12 年实践、40+ 建成项目的大数字收束，留白与版面呼吸感极强，高级且安静，非常契合建筑行业的气质。

它适合需要展示建成作品与团队实力的建筑、室内设计工作室，也适合任何追求素雅高级感的品牌官网需求方。作为作品集类单页，结构（首屏主张→项目网格→关于→联系）可直接套用到不同行业。

使用教程

1. 下载与保存

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

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 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/2019.html