1. 小蓝资源网首页
  2. 网站源码

巷子里 LANE Space 共享办公空间招租 HTML 单页源码

小蓝IT • • 网站源码

老厂房改造风格的共享办公空间招租页，水泥灰与芥末黄配色，含三种空间与租金方案。

巷子里 LANE Space 是一栋由 1987 年印刷厂房改造而成的共享办公空间招租页，目标客群是自由职业者、小型创业团队与独立工作室。页面强调的不是豪华装修，而是「有生活的巷子」——老建筑、低租金、真社区。

设计上采用水泥灰、米白与芥末黄的工业配色，保留大量留白与网格分割；首屏信息密度低但关键数据突出，空间类型、价格方案、配套设施与交通位置分块呈现，信息层级非常清晰。

适合联合办公空间、创意园区、老厂房改造项目，也适合任何需要展示「房源 + 价格 + 预约」的 B 端服务类落地页。

巷子里 LANE Space 共享办公空间招租 HTML 单页源码

使用教程

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">
<title>巷子里 LANE Space · 共享办公空间招租</title>
<style>
:root{
  --concrete:#e8e6e1;
  --concrete-d:#d6d3cc;
  --ink:#22201d;
  --gray:#6f6b64;
  --mustard:#d9a521;
  --mustard-l:#f0cf72;
  --white:#faf9f7;
  --line:#c9c5bd;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;background:var(--white);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.mono{font-family:"SFMono-Regular",Consolas,Menlo,monospace;letter-spacing:.5px}

/* 导航 */
header{position:sticky;top:0;z-index:40;background:rgba(250,249,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.3px}
.brand i{width:30px;height:30px;background:var(--ink);display:block;position:relative}
.brand i::after{content:"";position:absolute;width:12px;height:12px;background:var(--mustard);right:-5px;bottom:-5px}
.menu{display:flex;gap:32px;font-size:14.5px;color:var(--gray)}
.menu a:hover{color:var(--ink)}
.cta{padding:11px 22px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700;border-radius:2px}
.cta:hover{background:var(--mustard);color:var(--ink)}

/* 首屏 */
.hero{padding:70px 0 0;background:var(--concrete);border-bottom:1px solid var(--line)}
.hero-top{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;padding-bottom:56px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:3px;color:var(--gray);text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:56px;line-height:1.1;font-weight:800;letter-spacing:-2px;margin-bottom:22px}
.hero h1 span{color:var(--mustard)}
.hero p{font-size:17px;color:var(--gray);max-width:430px;margin-bottom:30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-o{padding:13px 26px;border:1.5px solid var(--ink);font-size:14.5px;font-weight:700;border-radius:2px}
.btn-o:hover{background:var(--ink);color:var(--white)}
.btn-f{padding:13px 26px;background:var(--mustard);font-size:14.5px;font-weight:700;border-radius:2px;border:1.5px solid var(--mustard)}
.btn-f:hover{background:var(--mustard-l)}
.spec{border-left:3px solid var(--mustard);padding-left:22px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14.5px}
.spec dt{color:var(--gray)}
.spec dd{font-weight:700}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.strip-cell{height:190px;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:44px}
.strip-cell:last-child{border-right:none}
.s1{background:linear-gradient(150deg,#cfcbc2,#b9b4aa)}
.s2{background:linear-gradient(150deg,var(--mustard-l),var(--mustard))}
.s3{background:linear-gradient(150deg,#dedad2,#c6c1b7)}
.s4{background:linear-gradient(150deg,#3c3934,#22201d);color:var(--mustard-l)}

/* 通用 section */
.sec{padding:86px 0}
.sec-alt{background:var(--concrete);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:620px;margin-bottom:52px}
.head .num{font-size:12.5px;font-weight:700;letter-spacing:2px;color:var(--mustard);margin-bottom:12px}
.head h2{font-size:36px;font-weight:800;letter-spacing:-1px;margin-bottom:13px}
.head p{color:var(--gray);font-size:16px}

/* 空间类型 */
.spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.space{background:var(--white);padding:34px 28px}
.space .ic{width:46px;height:46px;background:var(--concrete);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:18px}
.space h3{font-size:20px;font-weight:800;margin-bottom:9px}
.space p{font-size:14.5px;color:var(--gray);margin-bottom:16px}
.space ul{list-style:none;font-size:14px}
.space li{padding-left:16px;position:relative;margin-bottom:6px;color:var(--gray)}
.space li::before{content:"—";position:absolute;left:0;color:var(--mustard)}

/* 价格表 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{background:var(--white);border:1.5px solid var(--line);padding:34px 28px;position:relative}
.plan.hot{border-color:var(--ink);box-shadow:8px 8px 0 var(--mustard)}
.plan .badge{position:absolute;top:-13px;left:28px;background:var(--ink);color:var(--mustard);font-size:11.5px;font-weight:800;padding:5px 13px;letter-spacing:1px}
.plan h4{font-size:17px;font-weight:800;letter-spacing:1px;margin-bottom:6px}
.plan .sub{font-size:13.5px;color:var(--gray);margin-bottom:20px}
.plan .price{font-size:42px;font-weight:800;letter-spacing:-2px;line-height:1}
.plan .price small{font-size:14px;font-weight:600;color:var(--gray);letter-spacing:0}
.plan .divider{height:1px;background:var(--line);margin:22px 0}
.plan ul{list-style:none;font-size:14.5px;margin-bottom:26px}
.plan li{padding-left:22px;position:relative;margin-bottom:10px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--mustard);font-weight:800}
.plan .go{display:block;text-align:center;padding:13px;border:1.5px solid var(--ink);font-weight:700;font-size:14.5px}
.plan.hot .go{background:var(--ink);color:var(--white)}
.plan .go:hover{background:var(--mustard);color:var(--ink);border-color:var(--mustard)}

/* 配套 */
.amen{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.am{background:var(--white);padding:26px 14px;text-align:center}
.am .e{font-size:26px;display:block;margin-bottom:8px}
.am span{font-size:13.5px;color:var(--gray)}

/* 位置 */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.map{height:330px;background:
  repeating-linear-gradient(0deg,transparent,transparent 32px,rgba(34,32,29,.09) 32px,rgba(34,32,29,.09) 33px),
  repeating-linear-gradient(90deg,transparent,transparent 32px,rgba(34,32,29,.09) 32px,rgba(34,32,29,.09) 33px),
  var(--concrete-d);
  border:1.5px solid var(--ink);position:relative;display:flex;align-items:center;justify-content:center}
.pin{width:52px;height:52px;border-radius:50% 50% 50% 4px;background:var(--mustard);border:2px solid var(--ink);transform:rotate(-45deg);display:flex;align-items:center;justify-content:center}
.pin span{transform:rotate(45deg);font-size:22px}
.loc h3{font-size:28px;font-weight:800;letter-spacing:-.8px;margin-bottom:16px}
.loc p{color:var(--gray);margin-bottom:16px}
.loc-list{list-style:none;font-size:15px}
.loc-list li{padding:11px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between}
.loc-list li b{font-weight:700}

/* 预约 */
.book{background:var(--ink);color:var(--white);padding:78px 0}
.book-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.book h2{font-size:36px;font-weight:800;letter-spacing:-1px;margin-bottom:14px}
.book p{color:#a8a39a;margin-bottom:8px}
.form{background:#2c2924;padding:30px;border:1px solid #45413a}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#a8a39a;margin-bottom:6px;letter-spacing:1px}
.field input,.field select{width:100%;padding:12px 14px;background:var(--ink);border:1px solid #45413a;color:var(--white);font-size:14.5px;font-family:inherit;outline:none}
.field input:focus,.field select:focus{border-color:var(--mustard)}
.submit{width:100%;padding:14px;background:var(--mustard);color:var(--ink);font-weight:800;font-size:15px;border:none;cursor:pointer;font-family:inherit}
.submit:hover{background:var(--mustard-l)}

footer{background:var(--concrete);border-top:1px solid var(--line);padding:44px 0 26px;font-size:14px;color:var(--gray)}
.f-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:26px}
.f-row a{margin-right:20px}
.f-row a:hover{color:var(--ink)}
.cp{border-top:1px solid var(--line);padding-top:20px;font-size:13px}

@media(max-width:980px){
  .hero-top,.loc,.book-in{grid-template-columns:1fr}
  .spaces,.plans{grid-template-columns:1fr}
  .amen{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:40px}
  .hero-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .menu{display:none}
  .hero h1{font-size:32px}
  .head h2{font-size:27px}
  .amen{grid-template-columns:repeat(2,1fr)}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="brand"><i></i>巷子里 LANE Space</div>
    <nav class="menu">
      <a href="#space">空间类型</a>
      <a href="#price">租金方案</a>
      <a href="#amen">配套设施</a>
      <a href="#loc">交通位置</a>
    </nav>
    <a href="#book" class="cta">预约看场</a>
  </div>
</header>

<section class="hero">
  <div class="wrap hero-top">
    <div>
      <div class="eyebrow">CO-WORKING SPACE / 老厂房改造</div>
      <h1>把办公室<br>搬进一条<span>有生活的巷子</span></h1>
      <p>巷子里由一栋 1987 年的印刷厂房改造而成，保留原始水磨石地面与钢窗结构。5.2 米层高、南北通透，日租工位到 30 人独立团队房型全覆盖。</p>
      <div class="hero-btns">
        <a href="#book" class="btn-f">预约实地看场</a>
        <a href="#price" class="btn-o">查看租金方案</a>
      </div>
    </div>
    <div class="spec">
      <dl>
        <dt>建筑年代</dt><dd>1987 年印刷厂房</dd>
        <dt>可租面积</dt><dd>3,200 ㎡ / 4 层</dd>
        <dt>层高</dt><dd>5.2 米（含夹层）</dd>
        <dt>工位总数</dt><dd>280 个</dd>
        <dt>当前空置</dt><dd class="mono" style="color:var(--mustard)">41 个工位 · 6 间房</dd>
      </dl>
    </div>
  </div>
  <div class="wrap" style="padding:0">
    <div class="hero-strip">
      <div class="strip-cell s1">🪟</div>
      <div class="strip-cell s2">☕</div>
      <div class="strip-cell s3">📚</div>
      <div class="strip-cell s4">🌙</div>
    </div>
  </div>
</section>

<section class="sec" id="space">
  <div class="wrap">
    <div class="head">
      <div class="num">01 / SPACE TYPES</div>
      <h2>三种空间，对应三种工作节奏</h2>
      <p>无论是一个人写代码，还是一支十人小队做项目冲刺，都能找到合适的尺度。</p>
    </div>
    <div class="spaces">
      <div class="space">
        <div class="ic">💻</div>
        <h3>自由工位</h3>
        <p>不固定座位，先到先坐。适合自由职业者与远程办公者。</p>
        <ul>
          <li>营业时间 08:00–22:00</li>
          <li>含储物柜与显示器外借</li>
          <li>支持日租 / 周租</li>
        </ul>
      </div>
      <div class="space">
        <div class="ic">🪑</div>
        <h3>固定工位</h3>
        <p>专属工位与柜体，24 小时门禁刷卡，可放置个人设备。</p>
        <ul>
          <li>1.4m 升降桌 + 人体工学椅</li>
          <li>独立插座与网口</li>
          <li>可登记为通信地址</li>
        </ul>
      </div>
      <div class="space">
        <div class="ic">🚪</div>
        <h3>独立团队房</h3>
        <p>4 至 30 人封闭房型，带钢窗采光，可定制隔断与门牌。</p>
        <ul>
          <li>房内独立空调与新风</li>
          <li>免费会议室时长 20h/月</li>
          <li>支持工商注册地址</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="sec sec-alt" id="price">
  <div class="wrap">
    <div class="head">
      <div class="num">02 / PRICING</div>
      <h2>租金透明，不收服务费差价</h2>
      <p>水电网、清洁、前台代收快递均已含在月租内，签约满一年可免押金。</p>
    </div>
    <div class="plans">
      <div class="plan">
        <h4>DAY PASS</h4>
        <div class="sub">自由工位 · 按日计费</div>
        <div class="price">¥68<small> /天</small></div>
        <div class="divider"></div>
        <ul>
          <li>任意空闲工位</li>
          <li>无限量手冲咖啡</li>
          <li>千兆网络与打印额度 20 页</li>
          <li>公共休息区与电话亭</li>
        </ul>
        <a href="#book" class="go">买张日票试试</a>
      </div>
      <div class="plan hot">
        <span class="badge">最受欢迎</span>
        <h4>FIXED DESK</h4>
        <div class="sub">固定工位 · 月付</div>
        <div class="price">¥1,280<small> /月</small></div>
        <div class="divider"></div>
        <ul>
          <li>专属升降桌与储物柜</li>
          <li>24 小时刷卡进出</li>
          <li>会议室 8 小时/月</li>
          <li>通信地址登记</li>
          <li>季付 9 折 / 年付 8 折</li>
        </ul>
        <a href="#book" class="go">锁定一个工位</a>
      </div>
      <div class="plan">
        <h4>TEAM ROOM</h4>
        <div class="sub">独立团队房 · 按工位月付</div>
        <div class="price">¥1,050<small> /工位·月</small></div>
        <div class="divider"></div>
        <ul>
          <li>4–30 人封闭房型</li>
          <li>房内独立空调与新风</li>
          <li>会议室 20 小时/月</li>
          <li>工商注册地址支持</li>
          <li>可定制门牌与隔断</li>
        </ul>
        <a href="#book" class="go">获取房型图</a>
      </div>
    </div>
  </div>
</section>

<section class="sec" id="amen">
  <div class="wrap">
    <div class="head">
      <div class="num">03 / AMENITIES</div>
      <h2>该有的都有，多余的没有</h2>
      <p>我们把预算花在网络、座椅与隔音上，而不是花在网红打卡墙上。</p>
    </div>
    <div class="amen">
      <div class="am"><span class="e">🛜</span><span>千兆双线宽带</span></div>
      <div class="am"><span class="e">🖨️</span><span>免费打印复印</span></div>
      <div class="am"><span class="e">☕</span><span>手冲咖啡吧</span></div>
      <div class="am"><span class="e">📞</span><span>独立电话亭</span></div>
      <div class="am"><span class="e">🚿</span><span>淋浴与更衣室</span></div>
      <div class="am"><span class="e">🚲</span><span>室内自行车位</span></div>
      <div class="am"><span class="e">📦</span><span>前台代收快递</span></div>
      <div class="am"><span class="e">🎤</span><span>60 人分享厅</span></div>
      <div class="am"><span class="e">🌿</span><span>屋顶花园露台</span></div>
      <div class="am"><span class="e">🔒</span><span>人脸门禁系统</span></div>
      <div class="am"><span class="e">🧹</span><span>每日两次清洁</span></div>
      <div class="am"><span class="e">🐶</span><span>宠物友好</span></div>
    </div>
  </div>
</section>

<section class="sec sec-alt" id="loc">
  <div class="wrap loc">
    <div class="map"><div class="pin"><span>📍</span></div></div>
    <div>
      <h3>老城区中段，出巷口就是地铁</h3>
      <p>园区位于城市旧印刷片区，周边保留了菜市场、修表铺与两家开了二十年的面馆。安静但不偏，热闹但不吵。</p>
      <ul class="loc-list">
        <li><span>地铁 2 号线 · 印刷厂站</span><b>步行 4 分钟</b></li>
        <li><span>公交枢纽 · 巷口首末站</span><b>步行 2 分钟</b></li>
        <li><span>地下停车场</span><b>52 个车位 · ¥300/月</b></li>
        <li><span>周边餐饮</span><b>60+ 家 · 人均 ¥25</b></li>
        <li><span>最近连锁便利店</span><b>步行 1 分钟</b></li>
      </ul>
    </div>
  </div>
</section>

<section class="book" id="book">
  <div class="wrap book-in">
    <div>
      <h2>先来看看，再谈价格</h2>
      <p>留下联系方式，我们会在 1 个工作日内联系你安排看场，可指定工作日晚间或周末时段。</p>
      <p>看场无需预付任何费用，也不会有电话轰炸——这是我们对自己空间的自信。</p>
    </div>
    <form class="form" onsubmit="return false">
      <div class="field">
        <label>你的称呼</label>
        <input type="text" placeholder="怎么称呼你">
      </div>
      <div class="field">
        <label>联系电话</label>
        <input type="tel" placeholder="用于确认看场时间">
      </div>
      <div class="field">
        <label>意向空间</label>
        <select>
          <option>自由工位（日票 / 周票）</option>
          <option>固定工位（1–3 人）</option>
          <option>独立团队房（4–10 人）</option>
          <option>独立团队房（10 人以上）</option>
        </select>
      </div>
      <div class="field">
        <label>希望看场时间</label>
        <input type="text" placeholder="例如：本周六下午">
      </div>
      <button class="submit" type="submit">提交看场申请</button>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-row">
      <div>
        <div style="font-weight:800;color:var(--ink);font-size:16px;margin-bottom:6px">巷子里 LANE Space</div>
        <div>老印刷厂片区 · 巷子里 3 号楼 1–4 层</div>
      </div>
      <div>
        <a href="#space">空间类型</a><a href="#price">租金方案</a><a href="#amen">配套设施</a><a href="#book">预约看场</a>
      </div>
    </div>
    <div class="cp">© 2026 巷子里 LANE Space · 本页为演示用 HTML 单页模板</div>
  </div>
</footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
盒星球 BOXPLANET 潮玩盲盒商城 HTML 单页源码
上一篇 55分钟前
雪岭 SNOWRIDGE 雪季通票预订 HTML 单页源码
下一篇 46分钟前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服