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

花店鲜花订购 HTML 单页源码（樱花粉 + 奶油白，含订阅套餐 + 配送时段 + 按场景分类）

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

鲜花零售与订阅电商单页，含场景分类、热卖花束、订阅档位、配送时效与使用流程说明。

本源码是一款为鲜花店、鲜花订阅品牌、本地生活电商打造的「零售 + 订阅」单页模板，采用樱花粉 + 奶油白 + 鼠尾草绿主色，视觉上清新、浪漫，非常适合鲜花、烘焙、礼物类业态。首屏用插画感花束占据右侧，左侧突出「当日采摘 · 冷链直达」供应链优势与「3 小时送达」时效承诺，直接打消用户对鲜花新鲜度的顾虑。

页面内容覆盖鲜花电商的核心转化路径：按恋爱 / 生日 / 开业 / 探病 / 日常五大场景分类；四款热卖花束带原价/现价、评价数与一键加购；轻享 / 日常 / 臻品三档订阅满足持续用花需求；六步配送流程与时段选择器则把履约细节透明化。整体设计轻量但完整，单文件即可展示完整业务。

适合花店、鲜花订阅品牌、本地礼品电商作为官网或小程序落地页。替换店名、花束、价格、配送范围与联系方式后即可上线，也可作为电商运营面试作品或设计作品集展示。

花店鲜花订购 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{
  --cream:#fffaf7;
  --pink:#e8869b;
  --pink-d:#c96079;
  --pink-l:#fce8ec;
  --sage:#9cb39a;
  --ink:#3b2f33;
  --gray:#9a8b90;
  --line:#f2e4e6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--cream);color:var(--ink);line-height:1.75}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
.btn{display:inline-block;padding:12px 28px;border-radius:100px;font-size:14px;transition:.28s;border:none;cursor:pointer;font-family:inherit}
.btn-p{background:var(--pink);color:#fff;box-shadow:0 8px 22px rgba(232,134,155,.32)}
.btn-p:hover{background:var(--pink-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,134,155,.42)}
.btn-o{border:1px solid var(--pink);color:var(--pink-d);background:#fff}
.btn-o:hover{background:var(--pink-l)}

/* announce */
.ann{background:linear-gradient(90deg,var(--pink),#f0a6b6);color:#fff;text-align:center;font-size:13px;padding:9px;letter-spacing:1px}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(255,250,247,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hin{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px;font-size:21px;letter-spacing:4px;font-weight:700}
.logo i{font-style:normal;width:36px;height:36px;border-radius:12px;background:linear-gradient(140deg,var(--pink),#f5b9c5);display:grid;place-items:center;font-size:18px}
header nav{display:flex;gap:28px;font-size:14px;color:var(--gray)}
header nav a:hover{color:var(--pink-d)}
.cart{display:flex;align-items:center;gap:16px}
.cart .ic{position:relative;font-size:20px}
.cart .ic b{position:absolute;top:-4px;right:-8px;background:var(--pink);color:#fff;font-size:10px;
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-weight:600}

/* hero */
.hero{padding:60px 0 70px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-90px;top:-110px;
  background:radial-gradient(circle,rgba(232,134,155,.18),transparent 68%)}
.hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;left:-120px;bottom:-90px;
  background:radial-gradient(circle,rgba(156,179,154,.2),transparent 68%)}
.hgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hlabel{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:3px;color:var(--pink-d);
  background:var(--pink-l);padding:6px 16px;border-radius:100px}
.hero h1{font-size:52px;line-height:1.22;font-weight:800;letter-spacing:2px;margin:20px 0 16px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero p{color:#6d5f63;font-size:16px;max-width:460px;margin-bottom:28px}
.hcta{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;gap:30px;margin-top:36px;padding-top:26px;border-top:1px dashed var(--line)}
.trust div b{display:block;font-size:24px;color:var(--pink-d);font-weight:800;line-height:1.2}
.trust div span{font-size:12px;color:var(--gray)}

.bouquet{position:relative;height:400px;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#fce8ec,#f7d7de 45%,#e8c9d1);
  display:grid;place-items:center;box-shadow:0 24px 60px rgba(200,140,155,.22)}
.flower{position:absolute;border-radius:50%;filter:blur(.3px)}
.f1{width:130px;height:130px;background:radial-gradient(circle at 35% 32%,#fff,#f19bb0 62%,#d76d87);top:52px;left:66px}
.f2{width:96px;height:96px;background:radial-gradient(circle at 35% 32%,#fff8e8,#f6d78e 60%,#dbb055);top:150px;right:74px}
.f3{width:110px;height:110px;background:radial-gradient(circle at 35% 32%,#fff,#e3d3f0 58%,#b899d6);bottom:66px;left:118px}
.f4{width:78px;height:78px;background:radial-gradient(circle at 35% 32%,#fff,#ffd3c0 60%,#eda487);top:74px;right:130px}
.leaf{position:absolute;width:120px;height:44px;border-radius:100px 0 100px 0;background:linear-gradient(135deg,#9cb39a,#728c70)}
.l1{bottom:104px;right:60px;transform:rotate(24deg)}
.l2{top:196px;left:34px;transform:rotate(-28deg)}
.bq-tag{position:absolute;bottom:22px;left:22px;background:rgba(255,255,255,.94);padding:12px 18px;border-radius:14px;z-index:3}
.bq-tag b{display:block;font-size:15px}
.bq-tag span{font-size:12px;color:var(--gray)}

/* section */
section{padding:70px 0}
.st{text-align:center;margin-bottom:44px}
.st em{font-style:normal;font-size:12px;letter-spacing:6px;color:var(--sage)}
.st h2{font-size:32px;letter-spacing:2px;margin-top:8px;font-weight:800}
.st p{color:var(--gray);font-size:14px;margin-top:8px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat{text-align:center;padding:26px 12px;background:#fff;border:1px solid var(--line);border-radius:18px;transition:.28s}
.cat:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(200,140,155,.16);border-color:transparent}
.cat .cc{width:60px;height:60px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:26px}
.cc1{background:linear-gradient(140deg,#fce8ec,#f7c9d3)}
.cc2{background:linear-gradient(140deg,#fdf1dc,#f5dfae)}
.cc3{background:linear-gradient(140deg,#eaf1e8,#cbdcc8)}
.cc4{background:linear-gradient(140deg,#f0eaf7,#dbcbec)}
.cc5{background:linear-gradient(140deg,#fdeae4,#f7cbbb)}
.cat b{display:block;font-size:15px;margin-bottom:3px}
.cat span{font-size:12px;color:var(--gray)}

/* products */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.3s;position:relative}
.prod:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(200,140,155,.18)}
.prod .img{height:190px;position:relative;display:grid;place-items:center;font-size:52px}
.p1{background:linear-gradient(150deg,#fce8ec,#f3c3ce)}
.p2{background:linear-gradient(150deg,#fdf3e2,#f2ddb4)}
.p3{background:linear-gradient(150deg,#edf3ec,#c9dcc6)}
.p4{background:linear-gradient(150deg,#f2ecf8,#d7c6e9)}
.ribbon{position:absolute;top:12px;left:12px;background:var(--pink);color:#fff;font-size:11px;
  padding:4px 12px;border-radius:100px;letter-spacing:1px}
.ribbon.sage{background:var(--sage)}
.like{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);
  display:grid;place-items:center;font-size:14px;color:var(--pink)}
.prod .pbody{padding:18px}
.prod h4{font-size:16px;margin-bottom:5px}
.prod .flowers{font-size:12px;color:var(--gray);margin-bottom:10px;min-height:36px}
.stars{color:#e8b04a;font-size:12px;margin-bottom:10px}
.stars span{color:var(--gray);margin-left:5px}
.pfoot{display:flex;justify-content:space-between;align-items:center}
.pfoot b{font-size:21px;color:var(--pink-d);font-weight:800}
.pfoot s{font-size:12px;color:#c4b6ba;margin-left:5px;font-weight:400}
.addbtn{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;
  font-size:18px;transition:.25s}
.addbtn:hover{background:var(--pink-d);transform:rotate(90deg)}

/* subscription */
.subs{background:linear-gradient(150deg,#fff,#fdf4f6);border:1px solid var(--line);border-radius:26px;padding:48px 40px}
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;text-align:center;position:relative;transition:.3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(200,140,155,.16)}
.plan.hot{border:2px solid var(--pink);box-shadow:0 18px 44px rgba(232,134,155,.2)}
.plan.hot:before{content:"最受欢迎";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--pink);color:#fff;font-size:11px;padding:5px 18px;border-radius:100px;letter-spacing:2px}
.plan h4{font-size:19px;letter-spacing:2px;margin-bottom:6px}
.plan .freq{font-size:12px;color:var(--gray);margin-bottom:16px}
.plan .pr{font-size:38px;font-weight:800;color:var(--pink-d);line-height:1.1}
.plan .pr small{font-size:14px;color:var(--gray);font-weight:400}
.plan ul{list-style:none;margin:22px 0;text-align:left;font-size:14px;color:#6d5f63}
.plan li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:9px}
.plan li:last-child{border:none}
.plan li:before{content:"✿";color:var(--sage)}
.plan .btn{width:100%;text-align:center}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{text-align:center;padding:0 10px;position:relative}
.step .n{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-size:21px;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--pink),#f2a6b6)}
.step:nth-child(2) .n{background:linear-gradient(140deg,#e8b06a,#f0c98d)}
.step:nth-child(3) .n{background:linear-gradient(140deg,var(--sage),#b6c9b4)}
.step:nth-child(4) .n{background:linear-gradient(140deg,#b899d6,#cfb8e4)}
.step h5{font-size:17px;margin-bottom:7px}
.step p{font-size:13px;color:var(--gray)}

/* delivery */
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px}
.deliv h3{font-size:26px;letter-spacing:1px;margin-bottom:14px}
.deliv p{color:#6d5f63;font-size:15px;margin-bottom:20px}
.dlist{list-style:none}
.dlist li{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;align-items:flex-start}
.dlist li:last-child{border:none}
.dlist em{font-style:normal;color:var(--pink)}
.timebox{background:linear-gradient(150deg,var(--pink-l),#fdf0f3);border-radius:20px;padding:30px}
.timebox h5{font-size:14px;letter-spacing:2px;color:var(--pink-d);margin-bottom:16px}
.tslot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tslot div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;font-size:13px;transition:.22s}
.tslot div:hover{border-color:var(--pink);color:var(--pink-d)}
.tslot div.on{background:var(--pink);color:#fff;border-color:var(--pink)}
.tslot div.off{opacity:.4;text-decoration:line-through}

footer{background:#3b2f33;color:#bfb0b4;padding:48px 0 30px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer b{color:#fff;display:block;margin-bottom:12px;letter-spacing:2px;font-size:15px}
footer p,footer a{font-size:13px;line-height:2.1;display:block;color:#bfb0b4}
footer a:hover{color:var(--pink)}
.fcopy{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:20px;font-size:12px;color:#8a7b7f;text-align:center}

@media(max-width:900px){
  .hgrid,.deliv{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:1fr 1fr}
  .subgrid,.steps,.fgrid{grid-template-columns:1fr}
  header nav{display:none}
  .hero h1{font-size:34px}
  .bouquet{height:300px}
}
</style>
</head>
<body>

<div class="ann">🌸 七夕预售已开启 · 全场满 199 减 40 · 市区 3 小时送达</div>

<header>
  <div class="hin">
    <div class="logo"><i>🌷</i>栀言花房</div>
    <nav>
      <a href="#cat">分类</a><a href="#prod">热卖花束</a><a href="#sub">鲜花订阅</a><a href="#deliv">配送说明</a>
    </nav>
    <div class="cart">
      <span class="ic">🛒<b>3</b></span>
      <a href="#prod" class="btn btn-p">立即选购</a>
    </div>
  </div>
</header>

<div class="wrap hero">
  <div class="hgrid">
    <div>
      <div class="hlabel">✿ 当日采摘 · 冷链直达</div>
      <h1>把一整个春天，<br><em>装进她的怀里</em></h1>
      <p>我们只用当日从云南斗南直采的鲜切花，凌晨分拣、冷链空运，下午就能出现在你要送达的那个人手里。花是会说话的，我们负责让它说得好听一点。</p>
      <div class="hcta">
        <a href="#prod" class="btn btn-p">挑一束送给她</a>
        <a href="#sub" class="btn btn-o">了解鲜花订阅</a>
      </div>
      <div class="trust">
        <div><b>12,800+</b><span>累计送出花束</span></div>
        <div><b>4.9</b><span>顾客评分</span></div>
        <div><b>3小时</b><span>市区极速达</span></div>
        <div><b>7天</b><span>鲜活保障</span></div>
      </div>
    </div>
    <div class="bouquet">
      <span class="leaf l1"></span><span class="leaf l2"></span>
      <span class="flower f1"></span><span class="flower f2"></span>
      <span class="flower f3"></span><span class="flower f4"></span>
      <div class="bq-tag"><b>本周主推 · 「初夏晚风」</b><span>洛神玫瑰 + 尤加利 + 澳梅</span></div>
    </div>
  </div>
</div>

<div class="wrap">

  <section id="cat">
    <div class="st"><em>C A T E G O R Y</em><h2>按场景挑花</h2><p>不知道送什么？先想想是什么日子</p></div>
    <div class="cats">
      <a href="#" class="cat"><div class="cc cc1">💕</div><b>恋爱表白</b><span>玫瑰 / 洋桔梗</span></a>
      <a href="#" class="cat"><div class="cc cc2">🎂</div><b>生日祝福</b><span>向日葵 / 香槟玫瑰</span></a>
      <a href="#" class="cat"><div class="cc cc3">🏢</div><b>开业乔迁</b><span>花篮 / 绿植</span></a>
      <a href="#" class="cat"><div class="cc cc4">🤍</div><b>探病慰问</b><span>百合 / 康乃馨</span></a>
      <a href="#" class="cat"><div class="cc cc5">🏠</div><b>日常家养</b><span>混搭花束 / 干花</span></a>
    </div>
  </section>

  <section id="prod">
    <div class="st"><em>B E S T &nbsp; S E L L E R S</em><h2>本周热卖花束</h2><p>都是回头客最常复购的几款</p></div>
    <div class="prods">
      <div class="prod">
        <div class="img p1"><span class="ribbon">销量 No.1</span><span class="like">♡</span>🌹</div>
        <div class="pbody">
          <h4>洛神晚风</h4>
          <div class="flowers">洛神玫瑰 19 枝 · 尤加利叶 · 澳洲腊梅</div>
          <div class="stars">★★★★★<span>1,286 条评价</span></div>
          <div class="pfoot"><div><b>¥268</b><s>¥328</s></div><span class="addbtn">+</span></div>
        </div>
      </div>
      <div class="prod">
        <div class="img p2"><span class="ribbon sage">当季新品</span><span class="like">♡</span>🌻</div>
        <div class="pbody">
          <h4>暖阳一束</h4>
          <div class="flowers">向日葵 6 枝 · 香槟玫瑰 9 枝 · 情人草</div>
          <div class="stars">★★★★★<span>642 条评价</span></div>
          <div class="pfoot"><div><b>¥228</b><s>¥288</s></div><span class="addbtn">+</span></div>
        </div>
      </div>
      <div class="prod">
        <div class="img p3"><span class="ribbon sage">清新耐养</span><span class="like">♡</span>🌿</div>
        <div class="pbody">
          <h4>山野薄暮</h4>
          <div class="flowers">白桔梗 · 银叶菊 · 松果 · 麦穗</div>
          <div class="stars">★★★★☆<span>418 条评价</span></div>
          <div class="pfoot"><div><b>¥168</b><s>¥208</s></div><span class="addbtn">+</span></div>
        </div>
      </div>
      <div class="prod">
        <div class="img p4"><span class="ribbon">节日限定</span><span class="like">♡</span>💐</div>
        <div class="pbody">
          <h4>紫雾轻语</h4>
          <div class="flowers">紫玫瑰 11 枝 · 蓝绣球 · 满天星</div>
          <div class="stars">★★★★★<span>903 条评价</span></div>
          <div class="pfoot"><div><b>¥338</b><s>¥398</s></div><span class="addbtn">+</span></div>
        </div>
      </div>
    </div>
  </section>

  <section id="sub">
    <div class="subs">
      <div class="st" style="margin-bottom:0"><em>S U B S C R I P T I O N</em><h2>让家里一年四季有花</h2><p>包月订阅，每次都是不同的花材搭配，惊喜感拉满</p></div>
      <div class="subgrid">
        <div class="plan">
          <h4>轻享装</h4>
          <div class="freq">每月 2 次 · 每次 8–10 枝</div>
          <div class="pr">¥99<small> / 月</small></div>
          <ul>
            <li>季节混搭花束，小瓶即可插</li>
            <li>附赠养护卡与鲜花保鲜剂</li>
            <li>可随时暂停或更改地址</li>
          </ul>
          <a href="#" class="btn btn-o">选择轻享</a>
        </div>
        <div class="plan hot">
          <h4>日常装</h4>
          <div class="freq">每周 1 次 · 每次 12–15 枝</div>
          <div class="pr">¥179<small> / 月</small></div>
          <ul>
            <li>每周更新主题花材，不重样</li>
            <li>赠送品牌玻璃花瓶一只</li>
            <li>专属顾问微信搭配建议</li>
            <li>生日月加送一束节日花</li>
          </ul>
          <a href="#" class="btn btn-p">选择日常</a>
        </div>
        <div class="plan">
          <h4>臻品装</h4>
          <div class="freq">每周 1 次 · 每次 20 枝以上</div>
          <div class="pr">¥328<small> / 月</small></div>
          <ul>
            <li>进口花材为主，含少量珍稀品种</li>
            <li>花艺师手作包装，可指定风格</li>
            <li>赠送陶瓷花器与花剪套装</li>
            <li>支持办公室 / 门店场景布置</li>
          </ul>
          <a href="#" class="btn btn-o">选择臻品</a>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="st"><em>H O W &nbsp; I T &nbsp; W O R K S</em><h2>从下单到收花</h2></div>
    <div class="steps">
      <div class="step"><div class="n">1</div><h5>挑选花束</h5><p>按场景或价格筛选，也可以让花艺师帮你搭配。</p></div>
      <div class="step"><div class="n">2</div><h5>填写心意卡</h5><p>免费手写贺卡，也支持匿名寄送与指定送达时间。</p></div>
      <div class="step"><div class="n">3</div><h5>凌晨采摘包装</h5><p>当日花材、当日制作，包装完成即拍照发你确认。</p></div>
      <div class="step"><div class="n">4</div><h5>专人配送到手</h5><p>市区 3 小时达，全程冷链保温箱，签收即拍照回传。</p></div>
    </div>
  </section>

  <section id="deliv">
    <div class="deliv">
      <div>
        <h3>配送范围与时效</h3>
        <p>我们在城市三个方位设有前置冷藏仓，尽量让每一束花从仓库到收花人手中不超过 3 小时。</p>
        <ul class="dlist">
          <li><em>◆</em><div><b>市区六区</b> · 3 小时内送达，满 199 元免运费，未满收 15 元</div></li>
          <li><em>◆</em><div><b>近郊区县</b> · 当日 18:00 前下单次日达，运费 25 元</div></li>
          <li><em>◆</em><div><b>全国空运</b> · 支持保温箱顺丰空运，48 小时内送达，运费 45 元起</div></li>
          <li><em>◆</em><div><b>鲜活保障</b> · 收花 24 小时内出现明显破损、蔫萎，凭照片全额补发</div></li>
        </ul>
      </div>
      <div class="timebox">
        <h5>选择送达时段（今日 8 月 5 日）</h5>
        <div class="tslot">
          <div class="off">09:00 – 11:00</div>
          <div class="off">11:00 – 13:00</div>
          <div class="on">14:00 – 16:00</div>
          <div>16:00 – 18:00</div>
          <div>18:00 – 20:00</div>
          <div>20:00 – 21:30</div>
        </div>
        <p style="font-size:12px;color:var(--gray);margin-top:16px">灰色时段已约满。如需惊喜送达（不提前通知收花人），请在备注中说明，配送员会先联系下单人确认。</p>
      </div>
    </div>
  </section>

</div>

<footer>
  <div class="wrap fgrid">
    <div><b>栀言花房</b><p>专注鲜切花零售与订阅六年<br>云南斗南直采 · 冷链直达<br>门店地址：城南文创园 B 栋 106</p></div>
    <div><b>购买</b><a href="#">热卖花束</a><a href="#">鲜花订阅</a><a href="#">企业采购</a></div>
    <div><b>服务</b><a href="#">配送说明</a><a href="#">养护指南</a><a href="#">售后保障</a></div>
    <div><b>联系</b><a href="#">订花热线 400-820-6688</a><a href="#">微信客服 zhiyan_flower</a><a href="#">营业时间 08:00–21:30</a></div>
  </div>
  <div class="fcopy">© 2026 栀言花房 · 本页面为演示模板，商品与价格均为虚构示例</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

440 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
民宿预订详情 HTML 单页源码（木色 + 竹绿，含房型日历 + 周边地图 + 住客评价）
上一篇 9小时前
公益募捐项目页 HTML 单页源码（暖橙 + 米白，含进度条 + 资金用途 + 透明公示）
下一篇 9小时前

相关推荐

发表回复

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