青禾农场 HTML 单页源码（自然绿 + 麦穗金，含时令物产 + 种植流程 + 订阅方案）

本源码是一款为有机农场、社区团购、产地直供品牌打造的「产品展示 + 信任背书 + 订阅转化」单页模板，采用自然绿、麦穗金与沙米色主调，视觉上质朴、有土地感，与「不打农药、当日采摘」的卖点高度契合。首屏左侧大标题「不打农药的菜，吃起来是有味道的」直接喊出核心差异，右侧展示农场徽章与蔬果主图，让访客第一眼就闻到田间的清新。

页面结构完整覆盖农产品电商的关键环节：「本周时令物产」用 8 张商品卡片展示青菜、胡萝卜、茄子、玉米等当季菜品及价格；「从一粒种子到你的厨房」四步流程图解释土壤养护、人工种植、清晨采摘、冷链配送；「订阅方案」按两人份、三口之家、大家庭三档周配定价，列明权益差异；最后用农场主老周八年的引用故事强化情感信任。

适合有机农场、生鲜电商、社区团购、CSA 订阅农业品牌作为官网或小程序落地页。替换农场名、菜品、价格、配送范围与联系方式后即可上线，也可作为农产品品牌展示或乡村振兴类项目模板。

使用教程

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>青禾农场 · 有机蔬果产地直供</title>
<style>
:root{
  --green:#3f6b47;--green-l:#6d9a6c;--wheat:#e9dfc7;--sand:#f7f3e8;
  --earth:#8a6f4e;--ink:#2c3327;--muted:#77806f;--line:#ddd4bd;--white:#fffdf8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",Georgia,serif;background:var(--sand);color:var(--ink);line-height:1.85;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
a{text-decoration:none;color:inherit}

.topbar{background:var(--green);color:#e6efe3;font-size:13px;text-align:center;padding:8px 0;letter-spacing:1px}
.nav{border-bottom:1px solid var(--line);background:var(--sand);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-size:23px;font-weight:800;letter-spacing:3px;color:var(--green);display:flex;align-items:center;gap:10px}
.logo em{font-style:normal;font-size:24px}
.menu{display:flex;gap:34px;font-size:15px;color:var(--muted);letter-spacing:.5px}
.menu a{padding-bottom:4px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--green);border-color:var(--green)}
.btn{display:inline-block;padding:12px 28px;font-size:14.5px;font-weight:700;letter-spacing:1px;transition:.25s;border-radius:2px}
.btn-g{background:var(--green);color:var(--sand)}
.btn-g:hover{background:#2f5236}
.btn-o{border:1.5px solid var(--green);color:var(--green)}
.btn-o:hover{background:var(--green);color:var(--sand)}

/* hero */
.hero{padding:66px 0 72px;border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.eyebrow{font-size:12.5px;letter-spacing:5px;color:var(--earth);text-transform:uppercase;font-weight:700}
.hero h1{font-size:56px;line-height:1.22;font-weight:800;margin:16px 0 20px;letter-spacing:-1px}
.hero h1 span{color:var(--green)}
.hero .lead{font-size:17.5px;color:var(--muted);max-width:460px;margin-bottom:14px}
.rule{width:60px;height:3px;background:var(--earth);margin:26px 0}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.hero-art{position:relative}
.hero-art .main{aspect-ratio:4/5;background:linear-gradient(165deg,#cfe0c2,#9dbd93);border-radius:4px;display:grid;place-items:center;font-size:110px;box-shadow:14px 14px 0 var(--wheat)}
.badge{position:absolute;left:-26px;bottom:34px;background:var(--white);border:1px solid var(--line);padding:16px 22px;border-radius:2px;box-shadow:0 10px 26px rgba(0,0,0,.07)}
.badge b{display:block;font-size:26px;color:var(--green);font-weight:800;line-height:1.1}
.badge span{font-size:12.5px;color:var(--muted);letter-spacing:1px}

/* marquee strip */
.strip{background:var(--green);color:#dbe8d6;padding:18px 0;overflow:hidden;font-size:14px;letter-spacing:3px}
.strip .row{display:flex;gap:46px;justify-content:center;flex-wrap:wrap}

.sec{padding:80px 0}
.sec-h{margin-bottom:44px;max-width:620px}
.sec-h.mid{text-align:center;margin-left:auto;margin-right:auto}
.sec-h h2{font-size:40px;font-weight:800;letter-spacing:-.5px;margin:12px 0 12px}
.sec-h p{color:var(--muted);font-size:16px}

/* produce */
.produce{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pd{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.3s}
.pd:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(63,107,71,.13)}
.pd .im{height:150px;display:grid;place-items:center;font-size:60px}
.pd:nth-child(1) .im{background:#e6f0dc}.pd:nth-child(2) .im{background:#fbeede}
.pd:nth-child(3) .im{background:#f2e6ef}.pd:nth-child(4) .im{background:#e4eef4}
.pd:nth-child(5) .im{background:#fdf2d9}.pd:nth-child(6) .im{background:#e9f2e2}
.pd:nth-child(7) .im{background:#f6e8e0}.pd:nth-child(8) .im{background:#eaf0e0}
.pd .bd{padding:18px 20px 22px}
.pd h3{font-size:17px;font-weight:800;margin-bottom:4px}
.pd .meta{font-size:12.5px;color:var(--earth);letter-spacing:1px;margin-bottom:8px}
.pd .pr{font-size:19px;color:var(--green);font-weight:800}
.pd .pr em{font-style:normal;font-size:13px;color:var(--muted);font-weight:400}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:var(--white)}
.pc{padding:34px 26px;border-right:1px solid var(--line);position:relative}
.pc:last-child{border-right:none}
.pc .no{font-size:44px;font-weight:800;color:var(--wheat);line-height:1;letter-spacing:-2px}
.pc h3{font-size:18px;font-weight:800;margin:10px 0 8px}
.pc p{font-size:14px;color:var(--muted);line-height:1.75}

/* plan */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pl{background:var(--white);border:1px solid var(--line);padding:36px 32px;border-radius:3px;transition:.3s}
.pl.best{border:2px solid var(--green);position:relative;background:linear-gradient(180deg,#f2f7ee,var(--white))}
.pl.best:before{content:"最受欢迎";position:absolute;top:-13px;left:32px;background:var(--green);color:var(--sand);font-size:12px;padding:3px 14px;letter-spacing:2px}
.pl:hover{transform:translateY(-6px)}
.pl h3{font-size:20px;font-weight:800;letter-spacing:1px}
.pl .amt{font-size:40px;font-weight:800;color:var(--green);margin:14px 0 2px;letter-spacing:-1px}
.pl .amt em{font-style:normal;font-size:14px;color:var(--muted);font-weight:400}
.pl .desc{font-size:13.5px;color:var(--muted);padding-bottom:20px;border-bottom:1px dashed var(--line);margin-bottom:20px}
.pl ul{list-style:none}
.pl li{font-size:14.5px;padding:7px 0 7px 26px;position:relative;color:var(--muted)}
.pl li:before{content:"🌿";position:absolute;left:0;font-size:13px}
.pl .btn{width:100%;text-align:center;margin-top:24px}

/* quote */
.quote{background:var(--white);border-left:5px solid var(--earth);padding:44px 46px;margin-top:20px}
.quote p{font-size:21px;line-height:1.85;font-style:italic;color:var(--ink)}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:18px;letter-spacing:1px}

/* cta */
.cta{background:var(--green);color:var(--sand);padding:64px 48px;text-align:center;border-radius:3px}
.cta h2{font-size:38px;font-weight:800;margin-bottom:12px;letter-spacing:-.5px}
.cta p{opacity:.86;margin-bottom:28px;font-size:16px}
.cta .btn-g{background:var(--wheat);color:var(--green)}
.cta .btn-g:hover{background:#fff}

footer{border-top:1px solid var(--line);margin-top:78px;padding:46px 0 34px}
.f{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.f h4{font-size:13px;letter-spacing:2px;color:var(--green);margin-bottom:14px;font-weight:800}
.f a,.f p{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.f a:hover{color:var(--green)}
.copy{text-align:center;font-size:13px;color:var(--muted);margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:960px){
  .menu{display:none}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:38px}
  .produce{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr 1fr}
  .pc:nth-child(2n){border-right:none}
  .pc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .plans{grid-template-columns:1fr}
  .f{grid-template-columns:1fr 1fr}
  .badge{left:0}
}
@media(max-width:560px){
  .produce{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
  .pc{border-right:none;border-bottom:1px solid var(--line)}
  .sec-h h2{font-size:29px}
  .quote{padding:28px 24px}
  .quote p{font-size:17px}
}
</style>
</head>
<body>

<div class="topbar">今日采摘 · 明晨 06:00 前送达 · 满 99 元同城免配送费</div>

<nav class="nav"><div class="wrap nav-in">
  <div class="logo"><em>🌾</em>青禾农场</div>
  <div class="menu"><a href="#produce">时令物产</a><a href="#how">从地到桌</a><a href="#plan">订阅方案</a><a href="#about">关于农场</a></div>
  <a href="#plan" class="btn btn-g">订一箱试试</a>
</div></nav>

<header class="hero"><div class="wrap hero-in">
  <div>
    <div class="eyebrow">Since 2011 · 崇明岛东滩</div>
    <h1>不打农药的菜，<br>吃起来是<span>有味道</span>的</h1>
    <div class="rule"></div>
    <p class="lead">140 亩有机认证农田，坚持轮作休耕、人工除草、有机肥还田。从采摘到你家餐桌，不超过 18 小时。</p>
    <div class="hero-btns">
      <a href="#plan" class="btn btn-g">查看订阅方案</a>
      <a href="#how" class="btn btn-o">看看我们怎么种</a>
    </div>
  </div>
  <div class="hero-art">
    <div class="main">🥬</div>
    <div class="badge"><b>140 亩</b><span>有机认证农田</span></div>
  </div>
</div></header>

<div class="strip"><div class="row">
  <span>零农药残留</span><span>·</span><span>非转基因种源</span><span>·</span>
  <span>当日采摘</span><span>·</span><span>冷链直达</span><span>·</span><span>可溯源到地块</span>
</div></div>

<section class="sec" id="produce"><div class="wrap">
  <div class="sec-h">
    <div class="eyebrow">Seasonal</div>
    <h2>本周时令物产</h2>
    <p>不反季、不催熟。什么季节长什么，我们就卖什么，缺货是常态。</p>
  </div>
  <div class="produce">
    <div class="pd"><div class="im">🥬</div><div class="bd"><h3>有机小青菜</h3><div class="meta">3 号地块 · 今日采</div><div class="pr">¥12<em> / 500g</em></div></div></div>
    <div class="pd"><div class="im">🥕</div><div class="bd"><h3>沙地胡萝卜</h3><div class="meta">7 号地块 · 今日采</div><div class="pr">¥15<em> / 1kg</em></div></div></div>
    <div class="pd"><div class="im">🍆</div><div class="bd"><h3>紫皮长茄</h3><div class="meta">2 号大棚 · 今日采</div><div class="pr">¥14<em> / 500g</em></div></div></div>
    <div class="pd"><div class="im">🫑</div><div class="bd"><h3>彩椒三色装</h3><div class="meta">5 号大棚 · 今日采</div><div class="pr">¥22<em> / 800g</em></div></div></div>
    <div class="pd"><div class="im">🌽</div><div class="bd"><h3>水果玉米</h3><div class="meta">11 号地块 · 今日采</div><div class="pr">¥28<em> / 6 根</em></div></div></div>
    <div class="pd"><div class="im">🍅</div><div class="bd"><h3>老品种番茄</h3><div class="meta">1 号大棚 · 今日采</div><div class="pr">¥26<em> / 1kg</em></div></div></div>
    <div class="pd"><div class="im">🥔</div><div class="bd"><h3>黄心小土豆</h3><div class="meta">9 号地块 · 今日采</div><div class="pr">¥18<em> / 1.5kg</em></div></div></div>
    <div class="pd"><div class="im">🥚</div><div class="bd"><h3>散养土鸡蛋</h3><div class="meta">林下养殖区</div><div class="pr">¥32<em> / 20 枚</em></div></div></div>
  </div>
</div></section>

<section class="sec" id="how"><div class="wrap">
  <div class="sec-h mid">
    <div class="eyebrow">From Soil to Table</div>
    <h2>从一粒种子到你的厨房</h2>
    <p>每一步都可以被追溯，扫箱子上的二维码就能看到这批菜的地块、采摘人和采摘时间。</p>
  </div>
  <div class="proc">
    <div class="pc"><div class="no">01</div><h3>土壤养护</h3><p>每年冬季休耕，种植紫云英翻压还田。三年一次土壤重金属与农残全项检测。</p></div>
    <div class="pc"><div class="no">02</div><h3>人工种植</h3><p>不用除草剂，全部人工除草。防虫靠防虫网、粘虫板与瓢虫等天敌昆虫。</p></div>
    <div class="pc"><div class="no">03</div><h3>清晨采摘</h3><p>凌晨 4 点开始采摘，露水未干时蔬菜含水量最高，口感最脆嫩。</p></div>
    <div class="pc"><div class="no">04</div><h3>冷链配送</h3><p>预冷至 4℃ 后装箱，当日发车，次日清晨送达。全程温控可查。</p></div>
  </div>
</div></section>

<section class="sec" id="plan"><div class="wrap">
  <div class="sec-h mid">
    <div class="eyebrow">Subscription</div>
    <h2>三种订阅，按家庭人数选</h2>
    <p>每周固定配送，菜品由农场按当季收成搭配，也可以在小程序里换菜。</p>
  </div>
  <div class="plans">
    <div class="pl">
      <h3>两人份 · 小箱</h3>
      <div class="amt">¥168<em> / 周</em></div>
      <div class="desc">约 6-8 种蔬菜，总重 4kg 左右</div>
      <ul><li>每周配送 1 次</li><li>可提前 48 小时换菜</li><li>随箱附赠当周食谱卡</li><li>支持暂停与跳过</li></ul>
      <a href="#" class="btn btn-o">选择小箱</a>
    </div>
    <div class="pl best">
      <h3>三口之家 · 中箱</h3>
      <div class="amt">¥268<em> / 周</em></div>
      <div class="desc">约 10-12 种蔬果，总重 7kg 左右</div>
      <ul><li>每周配送 1-2 次可选</li><li>含 1 份时令水果</li><li>含 20 枚散养土鸡蛋</li><li>专属客服 1 对 1 调整</li><li>农场开放日免费入园</li></ul>
      <a href="#" class="btn btn-g">选择中箱</a>
    </div>
    <div class="pl">
      <h3>大家庭 · 大箱</h3>
      <div class="amt">¥398<em> / 周</em></div>
      <div class="desc">约 14-16 种蔬果，总重 11kg 左右</div>
      <ul><li>每周配送 2 次</li><li>含时令水果与菌菇</li><li>含土鸡蛋与农场米面</li><li>可指定 3 样必选菜品</li><li>四季农事体验各 1 次</li></ul>
      <a href="#" class="btn btn-o">选择大箱</a>
    </div>
  </div>
</div></section>

<section class="sec" id="about"><div class="wrap">
  <div class="sec-h">
    <div class="eyebrow">Our Story</div>
    <h2>做农业，急不来</h2>
  </div>
  <div class="quote">
    <p>「第一年我们的产量只有隔壁常规农田的四成，虫吃掉了一大半。第三年土壤活过来了，蚯蚓回来了，产量追上来七成。第八年，来买菜的人开始说：这个番茄有小时候的味道。这句话我们等了八年。」</p>
    <cite>—— 农场主 老周，2011 年从城市搬到崇明</cite>
  </div>
</div></section>

<section class="sec"><div class="wrap"><div class="cta">
  <h2>先订一箱，尝过再说</h2>
  <p>首单享 7 折体验价，不满意全额退款，箱子也不用寄回来。</p>
  <a href="#plan" class="btn btn-g">立即订一箱</a>
</div></div></section>

<footer><div class="wrap">
  <div class="f">
    <div><div class="logo" style="margin-bottom:14px"><em>🌾</em>青禾农场</div><p>崇明岛东滩 · 140 亩有机农田<br>把好好种出来的菜，好好送到你手上。</p></div>
    <div><h4>产品</h4><a href="#">时令蔬菜</a><a href="#">应季水果</a><a href="#">农场杂粮</a></div>
    <div><h4>了解</h4><a href="#">有机认证</a><a href="#">溯源查询</a><a href="#">农场开放日</a></div>
    <div><h4>联系</h4><p>021-6688 2011</p><p>hi@qinghe-farm.cn</p><p>上海市崇明区东滩大道 1 号</p></div>
  </div>
  <div class="copy">© 2026 青禾农场 · 本页为 HTML 单页模板演示，内容与认证信息均为虚构</div>
</div></footer>

</body>
</html>

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