光合 LightLab 自由摄影师约拍预约主页 HTML 单页源码

光合 LightLab 是一间专注人像与生活方式的小型摄影工作室，整页用墨绿主色搭配玫瑰金点缀，营造克制又有温度的氛围。首页 Hero 直接给出服务承诺与 860+ 交付数据的信任背书，让潜在客户在三秒内就能感受到工作室的专业度与亲和力。

页面采用 3×2 作品瀑布流 + 3 列服务定价 + 深色行动召唤块的结构，视觉层级清晰；从浏览作品、了解价格到预约拍摄形成一条完整转化路径。所有色块与文字皆以设计留白为基调，避免装饰喧宾夺主，把注意力集中在作品本身。

适合作为自由摄影师、人像写真工作室、婚纱摄影与品牌静物工作室的官网模板；也可作为约拍小程序落地页或独立设计师个人主页的高品质起点。整站单文件、内嵌 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>光合 LightLab · 自由摄影师约拍预约主页</title>
<style>
  :root{
    --gold:#c79a4b; --green:#1f3d34; --cream:#f6f1e7; --ink:#23201b;
    --muted:#7a7367; --line:rgba(31,61,52,.15);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--cream);color:var(--ink);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
  header{position:sticky;top:0;z-index:20;background:rgba(246,241,231,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px}
  .logo span{color:var(--gold)}
  .nav a{margin-left:26px;font-size:14px;color:var(--muted);transition:.2s}
  .nav a:hover{color:var(--green)}
  .hero{background:linear-gradient(135deg,var(--green) 0%,#2c5546 100%);color:var(--cream);padding:96px 0 110px;position:relative;overflow:hidden}
  .hero::after{content:"";position:absolute;right:-120px;top:-80px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(199,154,75,.35),transparent 70%)}
  .hero h1{font-size:52px;line-height:1.15;font-weight:800;max-width:620px;position:relative;z-index:2}
  .hero h1 em{color:var(--gold);font-style:normal}
  .hero p{margin-top:22px;max-width:540px;color:rgba(246,241,231,.82);font-size:17px;position:relative;z-index:2}
  .btn{display:inline-block;margin-top:34px;background:var(--gold);color:#1c1a15;padding:14px 34px;border-radius:40px;font-weight:700;font-size:15px;transition:.25s;z-index:2;position:relative}
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(199,154,75,.4)}
  .stats{display:flex;gap:48px;margin-top:54px;position:relative;z-index:2}
  .stats b{font-size:30px;color:var(--gold);display:block}
  .stats span{font-size:13px;color:rgba(246,241,231,.7)}
  section{padding:84px 0}
  .lead{text-align:center;max-width:640px;margin:0 auto 52px}
  .lead h2{font-size:34px;color:var(--green)}
  .lead p{color:var(--muted);margin-top:12px}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .gallery .card{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3/4;background:#e7e0d2}
  .gallery .card .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;color:#fff;font-weight:600;font-size:15px;background:linear-gradient(160deg,#3a5a4d,#8a6d34)}
  .gallery .card:nth-child(2) .ph{background:linear-gradient(160deg,#26463b,#b08a3f)}
  .gallery .card:nth-child(3) .ph{background:linear-gradient(160deg,#1f3d34,#c79a4b)}
  .gallery .card:nth-child(4) .ph{background:linear-gradient(160deg,#33493f,#9c7c3a)}
  .gallery .card:nth-child(5) .ph{background:linear-gradient(160deg,#2c5546,#a8853c)}
  .gallery .card:nth-child(6) .ph{background:linear-gradient(160deg,#244a3e,#caa44e)}
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .svc .item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:.25s}
  .svc .item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(31,61,52,.12)}
  .svc .item h3{color:var(--green);font-size:19px;margin-bottom:10px}
  .svc .item p{color:var(--muted);font-size:14px}
  .svc .item .price{margin-top:16px;color:var(--gold);font-weight:800;font-size:22px}
  .svc .item .price small{font-size:13px;color:var(--muted);font-weight:400}
  .book{background:var(--green);color:var(--cream);border-radius:24px;padding:56px;text-align:center}
  .book h2{font-size:30px}
  .book p{color:rgba(246,241,231,.78);margin:14px auto 28px;max-width:480px}
  .book a{background:var(--gold);color:#1c1a15;padding:14px 38px;border-radius:40px;font-weight:700}
  footer{background:#1a2c25;color:rgba(246,241,231,.6);text-align:center;padding:34px 0;font-size:13px}
  @media(max-width:760px){.hero h1{font-size:36px}.gallery,.svc{grid-template-columns:1fr 1fr}.stats{gap:28px}.book{padding:40px 24px}.nav a{margin-left:16px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">光合<span>LightLab</span></div>
  <nav><a href="#works">作品</a><a href="#service">服务</a><a href="#book">预约</a></nav>
</div></header>

<section class="hero">
  <div class="wrap">
    <h1>用<em>光影</em>记录你<br>最松弛的瞬间</h1>
    <p>光合 LightLab 是一间专注人像与生活方式的自由摄影工作室。我们相信最好的照片来自真实的状态，而非刻意的摆拍。</p>
    <a class="btn" href="#book">预约拍摄</a>
    <div class="stats">
      <div><b>860+</b><span>已交付成片</span></div>
      <div><b>6 年</b><span>拍摄经验</span></div>
      <div><b>4.9</b><span>客户评分</span></div>
    </div>
  </div>
</section>

<section id="works"><div class="wrap">
  <div class="lead"><h2>近期作品</h2><p>从清晨到黄昏，不同光线下的真实故事。</p></div>
  <div class="gallery">
    <div class="card"><div class="ph">晨间人像</div></div>
    <div class="card"><div class="ph">城市街拍</div></div>
    <div class="card"><div class="ph">校园纪念</div></div>
    <div class="card"><div class="ph">家庭纪实</div></div>
    <div class="card"><div class="ph">情侣写真</div></div>
    <div class="card"><div class="ph">品牌静物</div></div>
  </div>
</div></section>

<section id="service" style="background:#fff"><div class="wrap">
  <div class="lead"><h2>拍摄服务</h2><p>透明价格，无隐形消费，含精修与版权。</p></div>
  <div class="svc">
    <div class="item"><h3>个人写真</h3><p>1 小时外景或棚拍，15 张精修，原片全送。</p><div class="price">¥599 <small>/ 起</small></div></div>
    <div class="item"><h3>情侣 / 闺蜜</h3><p>1.5 小时双人人像，25 张精修，含约会式拍摄。</p><div class="price">¥899 <small>/ 起</small></div></div>
    <div class="item"><h3>品牌产品</h3><p>静物与场景拍摄，适合电商与社交宣传。</p><div class="price">¥1299 <small>/ 起</small></div></div>
  </div>
</div></section>

<section id="book"><div class="wrap">
  <div class="book">
    <h2>想留下一组属于你的照片？</h2>
    <p>填写预约表单，我会在一个工作日内回复你档期与拍摄方案。</p>
    <a href="#">立即预约</a>
  </div>
</div></section>

<footer>© 2026 光合 LightLab 摄影工作室 · 用光影记录生活</footer>
</body>
</html>

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