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

家装设计公司 HTML 单页源码（莫兰迪灰 + 橡木色，含案例 + 在线估价器 + 服务流程）

小蓝IT • • 网站源码 • 阅读 22

全屋定制与整装设计公司官网，含精选案例、服务类型、在线估价器、团队介绍与四大承诺。

本源码是一款为室内设计公司、全屋定制品牌、装修公司打造的「品牌官网 + 获客落地页」单页模板，采用莫兰迪灰 + 橡木色 + 深炭字主调，视觉上克制、高级，非常契合强调审美与质感的设计服务类企业。首屏用大面积几何色块与「让空间安静下来，再谈风格」的品牌主张建立专业调性，并展示 12 年 / 1,860 户 / 0 增项等关键信任数据。

页面结构按客户决策链路展开：精选案例用六种不同风格的渐变卡片展示户型、造价与周期；服务内容区分纯设计、整装、软装三类；在线估价器支持面积、户型、服务类型与装修档次联动，实时输出预算明细；六步服务流程与设计师团队介绍进一步降低咨询门槛；最后以「报价即决算、工地日报、五年质保、主材可溯源」四大承诺收尾，强化转化率。

适合室内设计工作室、整装公司、全屋定制门店作为官网或广告投放落地页。替换公司名、案例、价格参数、团队与联系方式后即可上线，也可作为设计 / 装修行业作品集或招投标展示页面。

家装设计公司 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.0">
<title>叁合设计 · 全屋定制与整装</title>
<style>
:root{
  --bg:#f6f5f2;
  --card:#ffffff;
  --ink:#26262a;
  --gray:#8b8a88;
  --oak:#b99a6b;
  --oak-d:#93764c;
  --slate:#5a6572;
  --line:#e6e4df;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.8}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
a{text-decoration:none;color:inherit}
.btn{display:inline-block;padding:13px 30px;font-size:14px;letter-spacing:1px;transition:.26s;
  border:none;cursor:pointer;font-family:inherit;border-radius:2px}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:var(--oak-d)}
.btn-o{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-oak{background:var(--oak);color:#fff}
.btn-oak:hover{background:var(--oak-d)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(246,245,242,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hin{max-width:1160px;margin:0 auto;padding:18px 26px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:22px;letter-spacing:7px;font-weight:300}
.logo b{font-weight:700}
header nav{display:flex;gap:34px;font-size:13px;letter-spacing:2px;color:var(--gray)}
header nav a{position:relative;padding-bottom:3px}
header nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--oak);transition:.3s}
header nav a:hover{color:var(--ink)}
header nav a:hover:after{width:100%}
.tel{font-size:13px;letter-spacing:1px;color:var(--gray)}
.tel b{color:var(--ink);font-size:16px;letter-spacing:0}

/* hero */
.hero{padding:0 0 70px}
.hbig{height:420px;position:relative;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(115deg,#d9d5cd 0%,#c4bfb5 42%,#a89f92 100%)}
.hbig:before{content:"";position:absolute;right:0;top:0;bottom:0;width:46%;
  background:linear-gradient(160deg,#efe9df,#d3c4ac 55%,#b99a6b)}
.hbig:after{content:"";position:absolute;right:9%;top:16%;width:230px;height:290px;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6)}
.hbox{position:relative;z-index:3;max-width:1160px;margin:0 auto;padding:0 26px;width:100%}
.hbox em{font-style:normal;font-size:12px;letter-spacing:8px;color:#6a6357}
.hbox h1{font-size:56px;font-weight:200;letter-spacing:6px;line-height:1.28;margin:16px 0 8px;color:#33312c}
.hbox h1 b{font-weight:700}
.hbox p{max-width:400px;color:#5b564d;font-size:15px;margin-bottom:30px}
.hbox .hb{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  background:#fff;margin-top:-46px;position:relative;z-index:5}
.stats div{padding:26px 20px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border:none}
.stats b{display:block;font-size:32px;font-weight:300;color:var(--oak-d);line-height:1.2}
.stats span{font-size:12px;color:var(--gray);letter-spacing:2px}

/* section */
section{padding:76px 0}
.stt{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px;border-bottom:1px solid var(--line);padding-bottom:18px}
.stt em{font-style:normal;font-size:11px;letter-spacing:6px;color:var(--oak);display:block}
.stt h2{font-size:30px;font-weight:300;letter-spacing:5px;margin-top:8px}
.stt h2 b{font-weight:700}
.stt a{font-size:13px;color:var(--gray);letter-spacing:1px}
.stt a:hover{color:var(--oak-d)}

/* cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{background:#fff;border:1px solid var(--line);overflow:hidden;transition:.32s}
.case:hover{box-shadow:0 20px 46px rgba(60,50,35,.12);transform:translateY(-6px)}
.case .im{height:210px;position:relative;display:flex;align-items:flex-end;padding:16px}
.case .im span{position:relative;z-index:2;background:rgba(255,255,255,.92);font-size:11px;
  padding:5px 12px;letter-spacing:2px;color:var(--ink)}
.k1{background:linear-gradient(150deg,#e3ded4,#c2b7a4 60%,#9d8f79)}
.k2{background:linear-gradient(150deg,#dfe3e6,#b6bfc7 60%,#8b96a1)}
.k3{background:linear-gradient(150deg,#e8e0d6,#cbb79c 60%,#a68a63)}
.k4{background:linear-gradient(150deg,#dde3dd,#b2c0b1 60%,#8a9a89)}
.k5{background:linear-gradient(150deg,#eae4e6,#c9bcc0 60%,#a0919a)}
.k6{background:linear-gradient(150deg,#e5e2dc,#bfb8ab 60%,#968e7e)}
.case .cb{padding:20px 22px}
.case h4{font-size:18px;letter-spacing:1px;font-weight:600;margin-bottom:6px}
.case .meta{font-size:13px;color:var(--gray);display:flex;gap:14px;flex-wrap:wrap}
.case .meta i{font-style:normal}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:#fff;padding:34px 30px;transition:.3s}
.svc:hover{background:#fbfaf7}
.svc .n{font-size:12px;letter-spacing:3px;color:var(--oak);margin-bottom:14px}
.svc h4{font-size:20px;font-weight:600;letter-spacing:1px;margin-bottom:10px}
.svc p{font-size:14px;color:var(--gray);margin-bottom:16px}
.svc ul{list-style:none;font-size:13px;color:#5d5b57}
.svc li{padding:5px 0;padding-left:16px;position:relative}
.svc li:before{content:"—";position:absolute;left:0;color:var(--oak)}

/* calculator */
.calcbox{background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:1fr 380px}
.cleft{padding:44px 42px}
.cleft h3{font-size:26px;font-weight:300;letter-spacing:3px;margin-bottom:8px}
.cleft h3 b{font-weight:700}
.cleft>p{color:var(--gray);font-size:14px;margin-bottom:28px}
.frow{margin-bottom:20px}
.frow label{display:block;font-size:12px;letter-spacing:2px;color:var(--gray);margin-bottom:8px}
.frow input{width:100%;padding:12px 14px;border:1px solid var(--line);font-size:15px;outline:none;font-family:inherit;background:#fbfaf7}
.frow input:focus{border-color:var(--oak)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:9px 20px;border:1px solid var(--line);font-size:13px;cursor:pointer;transition:.22s;background:#fbfaf7}
.chip:hover{border-color:var(--oak)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cright{background:linear-gradient(165deg,#3a3a3e,#26262a);color:#fff;padding:44px 36px;display:flex;flex-direction:column;justify-content:center}
.cright em{font-style:normal;font-size:11px;letter-spacing:5px;color:#a89a80}
.cright .big{font-size:44px;font-weight:300;margin:12px 0 4px;color:var(--oak)}
.cright .big b{font-weight:700}
.cright .note{font-size:12px;color:#9b988f;margin-bottom:26px}
.cline{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.cline:last-of-type{border:none}
.cline span{color:#9b988f}
.cright .btn{margin-top:24px;width:100%;text-align:center}

/* process */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.fstep{text-align:center;padding:0 8px;position:relative}
.fstep:not(:last-child):after{content:"";position:absolute;top:22px;right:-50%;width:100%;height:1px;background:var(--line)}
.fstep i{font-style:normal;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:50%;
  display:grid;place-items:center;margin:0 auto 14px;font-size:15px;color:var(--oak-d);position:relative;z-index:2}
.fstep h5{font-size:15px;letter-spacing:1px;margin-bottom:5px}
.fstep p{font-size:12px;color:var(--gray);line-height:1.7}

/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mem{background:#fff;border:1px solid var(--line);transition:.3s}
.mem:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(60,50,35,.1)}
.mem .av{height:190px;display:grid;place-items:center;font-size:42px;color:rgba(255,255,255,.85)}
.m1{background:linear-gradient(150deg,#b0a894,#8d846e)}
.m2{background:linear-gradient(150deg,#a3aeb8,#79848f)}
.m3{background:linear-gradient(150deg,#bfae96,#9c8a6e)}
.m4{background:linear-gradient(150deg,#a8b3a6,#7f8b7d)}
.mem .mb{padding:20px}
.mem h4{font-size:17px;margin-bottom:3px}
.mem .role{font-size:12px;color:var(--oak-d);letter-spacing:2px;margin-bottom:10px}
.mem p{font-size:13px;color:var(--gray)}

/* promise */
.prom{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pcard{border:1px solid var(--line);background:#fff;padding:28px 24px}
.pcard .pi{font-size:26px;margin-bottom:12px}
.pcard h5{font-size:16px;margin-bottom:8px}
.pcard p{font-size:13px;color:var(--gray)}

.bottom{background:linear-gradient(150deg,#2f2f33,#26262a);color:#fff;padding:66px 0;text-align:center}
.bottom h2{font-size:34px;font-weight:200;letter-spacing:6px;margin-bottom:10px}
.bottom h2 b{font-weight:700;color:var(--oak)}
.bottom p{color:#9b988f;margin-bottom:30px;font-size:15px}

footer{background:#1e1e21;color:#8f8d89;padding:44px 0 26px;font-size:13px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
footer b{color:#fff;display:block;margin-bottom:12px;letter-spacing:3px;font-size:14px}
footer p,footer a{display:block;line-height:2.1;color:#8f8d89;font-size:13px}
footer a:hover{color:var(--oak)}
.fc{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:18px;font-size:12px;color:#6e6c69;text-align:center}

@media(max-width:900px){
  .hbig{height:320px}
  .hbig:before,.hbig:after{display:none}
  .hbox h1{font-size:32px;letter-spacing:3px}
  .stats{grid-template-columns:1fr 1fr;margin-top:0}
  .stats div:nth-child(2){border-right:none}
  .cases,.svcs,.team,.prom{grid-template-columns:1fr}
  .calcbox{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr;gap:26px 0}
  .fstep:after{display:none}
  header nav,.tel{display:none}
}
</style>
</head>
<body>

<header>
  <div class="hin">
    <div class="logo">叁<b>合</b>设计</div>
    <nav>
      <a href="#case">案例作品</a><a href="#svc">服务内容</a><a href="#calc">在线估价</a><a href="#team">设计团队</a><a href="#flow">服务流程</a>
    </nav>
    <div class="tel">预约看样板间 <b>400-668-3399</b></div>
  </div>
</header>

<div class="hero">
  <div class="hbig">
    <div class="hbox">
      <em>I N T E R I O R &nbsp; D E S I G N &nbsp; S T U D I O</em>
      <h1>让空间<b>安静</b>下来<br>再谈风格</h1>
      <p>我们不追潮流色卡，只研究你一天 24 小时怎么用这个家。十二年，1,860 户，从量房到软装落位，全程一个团队负责到底。</p>
      <div class="hb">
        <a href="#calc" class="btn btn-p">免费获取装修报价</a>
        <a href="#case" class="btn btn-o">看看我们做过什么</a>
      </div>
    </div>
  </div>
  <div class="wrap">
    <div class="stats">
      <div><b>12</b><span>年 · 专注住宅设计</span></div>
      <div><b>1,860</b><span>户 · 已交付家庭</span></div>
      <div><b>98.2%</b><span>业主验收满意度</span></div>
      <div><b>0</b><span>增项 · 报价即决算</span></div>
    </div>
  </div>
</div>

<div class="wrap">

  <section id="case">
    <div class="stt">
      <div><em>S E L E C T E D &nbsp; W O R K S</em><h2>精选<b>案例</b></h2></div>
      <a href="#">查看全部 128 套 →</a>
    </div>
    <div class="cases">
      <div class="case">
        <div class="im k1"><span>现代侘寂</span></div>
        <div class="cb"><h4>南山壹号 · 三室两厅</h4><div class="meta"><i>建面 128㎡</i><i>造价 38 万</i><i>周期 105 天</i></div></div>
      </div>
      <div class="case">
        <div class="im k2"><span>极简灰调</span></div>
        <div class="cb"><h4>云庭花园 · 两室一厅</h4><div class="meta"><i>建面 89㎡</i><i>造价 26 万</i><i>周期 82 天</i></div></div>
      </div>
      <div class="case">
        <div class="im k3"><span>日式原木</span></div>
        <div class="cb"><h4>翠湖天地 · 四室两卫</h4><div class="meta"><i>建面 156㎡</i><i>造价 52 万</i><i>周期 132 天</i></div></div>
      </div>
      <div class="case">
        <div class="im k4"><span>自然疗愈</span></div>
        <div class="cb"><h4>桂语兰庭 · 亲子三居</h4><div class="meta"><i>建面 118㎡</i><i>造价 34 万</i><i>周期 96 天</i></div></div>
      </div>
      <div class="case">
        <div class="im k5"><span>轻法式</span></div>
        <div class="cb"><h4>锦华里 · 两代同堂</h4><div class="meta"><i>建面 142㎡</i><i>造价 46 万</i><i>周期 118 天</i></div></div>
      </div>
      <div class="case">
        <div class="im k6"><span>老房改造</span></div>
        <div class="cb"><h4>建设巷 · 90 年代砖房</h4><div class="meta"><i>建面 76㎡</i><i>造价 29 万</i><i>周期 124 天</i></div></div>
      </div>
    </div>
  </section>

  <section id="svc">
    <div class="stt">
      <div><em>W H A T &nbsp; W E &nbsp; D O</em><h2>服务<b>内容</b></h2></div>
      <a href="#calc">不确定选哪种？在线估价 →</a>
    </div>
    <div class="svcs">
      <div class="svc">
        <div class="n">0 1</div>
        <h4>纯设计</h4>
        <p>只出方案与图纸，施工由你自己找队伍，我们做技术交底与阶段验收。</p>
        <ul>
          <li>上门量房与需求访谈</li>
          <li>平面布局 3 稿 + 全屋效果图</li>
          <li>水电点位图、施工节点图</li>
          <li>主材清单与采购建议</li>
        </ul>
      </div>
      <div class="svc">
        <div class="n">0 2</div>
        <h4>整装（最受欢迎）</h4>
        <p>设计 + 施工 + 主材 + 定制柜一体交付，一个报价包到底，杜绝中途加钱。</p>
        <ul>
          <li>含设计全套图纸与工地管理</li>
          <li>基础施工与水电改造</li>
          <li>瓷砖、地板、门窗、洁具主材</li>
          <li>全屋定制柜体与五金</li>
        </ul>
      </div>
      <div class="svc">
        <div class="n">0 3</div>
        <h4>软装陈设</h4>
        <p>硬装完成后接手，从家具灯具到挂画绿植，一次性落位到家。</p>
        <ul>
          <li>软装方案与色彩体系</li>
          <li>家具、灯具、窗帘选品</li>
          <li>饰品陈设与绿植搭配</li>
          <li>入住日现场摆场</li>
        </ul>
      </div>
    </div>
  </section>

  <section id="calc">
    <div class="stt"><div><em>Q U I C K &nbsp; Q U O T E</em><h2>在线<b>估价</b></h2></div></div>
    <div class="calcbox">
      <div class="cleft">
        <h3>30 秒算出<b>你家大概要花多少</b></h3>
        <p>估价基于本地 2026 年主材与人工均价，误差通常在 ±8% 以内，实际以量房后报价为准。</p>
        <div class="frow">
          <label>建筑面积（㎡）</label>
          <input type="text" value="118">
        </div>
        <div class="frow">
          <label>户型结构</label>
          <div class="chips"><span class="chip">一室</span><span class="chip">两室</span><span class="chip on">三室</span><span class="chip">四室及以上</span></div>
        </div>
        <div class="frow">
          <label>服务类型</label>
          <div class="chips"><span class="chip">纯设计</span><span class="chip on">整装</span><span class="chip">软装陈设</span></div>
        </div>
        <div class="frow" style="margin-bottom:0">
          <label>装修档次</label>
          <div class="chips"><span class="chip">简装实用</span><span class="chip on">品质舒适</span><span class="chip">高端定制</span></div>
        </div>
      </div>
      <div class="cright">
        <em>E S T I M A T E D &nbsp; C O S T</em>
        <div class="big">¥ 33.6<b>万</b></div>
        <div class="note">参考区间 ¥30.9 万 – ¥36.4 万</div>
        <div class="cline"><span>基础施工</span><b>¥ 9.4 万</b></div>
        <div class="cline"><span>水电改造</span><b>¥ 3.2 万</b></div>
        <div class="cline"><span>主材包（瓷砖/地板/门窗/洁具）</span><b>¥ 11.8 万</b></div>
        <div class="cline"><span>全屋定制柜体</span><b>¥ 6.6 万</b></div>
        <div class="cline"><span>设计与工地管理</span><b>¥ 2.6 万</b></div>
        <a href="#" class="btn btn-oak">获取详细报价单</a>
      </div>
    </div>
  </section>

  <section id="flow">
    <div class="stt"><div><em>P R O C E S S</em><h2>服务<b>流程</b></h2></div></div>
    <div class="flow">
      <div class="fstep"><i>01</i><h5>免费量房</h5><p>上门实测，记录承重墙与管道走位</p></div>
      <div class="fstep"><i>02</i><h5>需求沟通</h5><p>一次两小时的生活习惯访谈</p></div>
      <div class="fstep"><i>03</i><h5>方案设计</h5><p>平面 3 稿 + 效果图确认</p></div>
      <div class="fstep"><i>04</i><h5>报价签约</h5><p>逐项列明，签约即锁价</p></div>
      <div class="fstep"><i>05</i><h5>施工管理</h5><p>七大节点验收，工地每日拍照</p></div>
      <div class="fstep"><i>06</i><h5>软装入住</h5><p>摆场落位，两年质保回访</p></div>
    </div>
  </section>

  <section id="team">
    <div class="stt"><div><em>O U R &nbsp; D E S I G N E R S</em><h2>设计<b>团队</b></h2></div><a href="#">预约你想合作的设计师 →</a></div>
    <div class="team">
      <div class="mem"><div class="av m1">👤</div><div class="mb"><h4>沈墨</h4><div class="role">主创设计师 · 12 年</div><p>擅长侘寂与东方极简，作品多次入选年度住宅设计奖。</p></div></div>
      <div class="mem"><div class="av m2">👤</div><div class="mb"><h4>陆晴</h4><div class="role">空间规划师 · 9 年</div><p>专注小户型改造，擅长在 60–90㎡ 内挖出额外收纳。</p></div></div>
      <div class="mem"><div class="av m3">👤</div><div class="mb"><h4>周叙</h4><div class="role">软装陈设师 · 7 年</div><p>色彩与材质控，负责全案软装选品与现场落位。</p></div></div>
      <div class="mem"><div class="av m4">👤</div><div class="mb"><h4>顾南</h4><div class="role">工程总监 · 15 年</div><p>把关全部工地节点，水电与防水标准执行者。</p></div></div>
    </div>
  </section>

  <section>
    <div class="stt"><div><em>O U R &nbsp; P R O M I S E</em><h2>我们的<b>承诺</b></h2></div></div>
    <div class="prom">
      <div class="pcard"><div class="pi">📋</div><h5>报价即决算</h5><p>合同外增项由我方承担，不玩「先低报后加钱」的套路。</p></div>
      <div class="pcard"><div class="pi">📷</div><h5>工地日报</h5><p>每日现场照片同步到微信群，业主远程也能盯工地。</p></div>
      <div class="pcard"><div class="pi">🛡</div><h5>隐蔽工程五年保</h5><p>水电防水质保五年，其余部位两年，终身维护响应。</p></div>
      <div class="pcard"><div class="pi">🧾</div><h5>主材可溯源</h5><p>所有主材品牌型号写进合同，进场验货扫码可查。</p></div>
    </div>
  </section>

</div>

<div class="bottom">
  <div class="wrap">
    <h2>先聊聊你的<b>家</b></h2>
    <p>留个电话，设计师会在 24 小时内联系你，免费上门量房出初步方案。</p>
    <a href="#calc" class="btn btn-oak" style="padding:15px 46px;font-size:15px">预约免费量房</a>
  </div>
</div>

<footer>
  <div class="wrap fg">
    <div><b>叁 合 设 计</b><p>专注住宅室内设计与整装交付十二年<br>设计中心：城市大道 66 号创意园 A 座 5F<br>材料展厅：家居 MALL 三层 3-08</p></div>
    <div><b>服务</b><a href="#">纯设计</a><a href="#">整装交付</a><a href="#">软装陈设</a><a href="#">老房改造</a></div>
    <div><b>作品</b><a href="#">现代侘寂</a><a href="#">日式原木</a><a href="#">极简灰调</a><a href="#">轻法式</a></div>
    <div><b>联系</b><a href="#">咨询电话 400-668-3399</a><a href="#">微信 sanhe_design</a><a href="#">营业时间 09:30–19:00</a></div>
  </div>
  <div class="wrap fc">© 2026 叁合设计 · 本页面为演示模板，公司信息、案例与报价均为虚构示例</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

440 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
公益募捐项目页 HTML 单页源码（暖橙 + 米白，含进度条 + 资金用途 + 透明公示）
上一篇 9小时前
独立书店「纸间书屋」HTML 单页源码（米黄纸张 + 苔绿 + 铁锈橙，含荐读书架 + 分类 + 活动日历 + 会员 + 到店地图）
下一篇 5小时前

相关推荐

发表回复

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