简介：一份基于HTML、CSS与Bootstrap构建的农业电商前端页面素材包，面向具备HTML和CSS基础、希望快速搭建农产品交易类网站的前端初学者，也可直接作为课程设计或毕业设计的界面模板使用。素材围绕Chashi品牌农业商城展开，覆盖首页、商品列表、详情页等典型交易页面，包含响应式布局、按钮卡片样式、背景主题配色、图标字体、动画效果等视觉组件，整体注重用户友好性和多屏幕适配，电脑、平板与手机均可正常浏览，按模块化思路组织，便于二次修改与局部替换。压缩包共400个文件、约14.87MB，以108个png和101个jpg图片素材为主，配合woff2、woff、ttf、eot等字体文件承载图标与文字显示，另有27个js脚本、18个css样式表和16个html页面构成前端主体，gif与svg文件补充动态与矢量图形素材，不同页面所需资源按类型分目录存放，目前已获98人学习使用。免去从零手写整套界面的成本，Bootstrap与jQuery配合让布局和交互实现更简单，连同背景图、图标字体和动画效果一并提供，既能学习电商类页面的结构组织，也可在此基础上直接改造成完整的农产品交易平台前端。
1. 农业电商前端素材，先拆解 zip 再谈页面
农业电商项目有个共同点：需求方给的往往不是需求文档，而是一个压缩包，里面可能是参考站截图、产品图、几页别人做好的 HTML，甚至只有一个写着“Chashi”的文件夹名。用 html+css+bootstrap 做农产品交易前端，其实就是把这个 zip 里的素材快速转成可点击、可演示、能交差的静态页面。
这套做法的价值在于快。农产品品类多、图片规格乱、活动入口频繁换，Bootstrap 的栅格和卡片组件能扛住这种“今天上草莓、明天上大米”的内容变动。适合接外包的前端、给农业公司做内部演示的团队，以及拿农产品商城练手的学生。拆包后先别急着改样式，把目录结构、页面层级、复用组件定下来，后面所有页面都是同一套积木的排列组合。
2. HTML 目录与栅格骨架：用 Bootstrap 把农产品商城页面立起来
2.1 解压后先建目录，别把 css 和图片混在一起
拿到“Chashi”这类前端素材 zip，第一步不是双击 index.html，而是先把目录理顺。前端素材最怕两种情况：图片路径带中文、css 和页面文件混在同一层。前者在本地双击能打开，传到服务器就 404；后者改一版样式要找半天文件。
我一般会按下面的结构重新整理素材：
chashi-agri/ ├── index.html ├── products.html ├── detail.html ├── cart.html ├── css/ │ ├── bootstrap.min.css │ └── style.css ├── js/ │ ├── bootstrap.bundle.min.js │ └── main.js └── img/ ├── products/ └── banners/这个结构里，html 文件放根目录，bootstrap 的 css 和 js 单独放，自定义样式全部写进 style.css。这么做的原因是保持“三行模式的 css 文件”习惯：第一行放 CSS 变量用于改主题色，第二行放公共类覆盖 Bootstrap 默认样式，第三行才是页面专属样式。素材包里如果已经带了样式文件，也按这个规则重排，避免后续维护时在 20 个文件里找一段颜色代码。
2.2 标准 HTML 骨架与 Bootstrap 引入方式
无论是从零写还是改造素材，页面头部的 doctype 和 meta 都必须规范。农产品商城面向的访客可能是手机端的合作社成员，也可能是电脑前的采购商，viewport 和字符集直接决定页面在不同设备上是否正常渲染。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chashi 农业电商 - 新鲜农产品直达</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> </div> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/main.js"></script> </body> </html>这段骨架里，lang="zh-cn"声明页面语言是简体中文，有利于浏览器自动翻译和朗读工具识别；rel="stylesheet"表明 css 文件是静态样式表，不用加type属性，HTML5 已默认。js 放 body 底部是为了避免阻塞首屏渲染，bootstrap.bundle.min.js这个文件里已经包含了 Popper，下拉菜单和弹窗都依赖它。
提示：素材 zip 里如果自带 jquery 文件，而页面只用 Bootstrap 的下拉、模态框，Bootstrap 5 已不需要 jQuery。保留 jquery 只会拖慢首屏，删掉即可。
2.3 栅格系统：农产品的陈列位从 row 开始
Bootstrap 的栅格把一行分成 12 列，农产品首页的排版几乎都是这个套路：顶部横幅占 12 列，下面推荐位一行 3 个商品各占 4 列，再往下走一行 2 个大图各占 6 列。栅格的核心不是“分栏”，而是响应式——手机上 4 列的商品挤成 2 列或 1 列，靠的是一组断点前缀。
一个典型的主推区布局：
<section class="container py-4"> <div class="row g-4"> <div class="col-12 col-md-6"> <div class="p-3 bg-warning rounded">当季水果</div> </div> <div class="col-12 col-md-6"> <div class="p-3 bg-success text-white rounded">基地直供</div> </div> </div> </section>col-12表示手机端占满整行，col-md-6表示在 md 断点（768px）以上各占一半。g-4是 gutter 间距缩写，控制卡片之间的留白。农产品图片通常比例不统一，栅格只负责位置，图片比例问题要靠 css 里的object-fit: cover解决，后面第 5 章会专门说。
3. 商品卡片与筛选入口：Bootstrap 基础组件搭交易主干
3.1 商品卡片：价格、单位、产地一个都不能少
农产品交易页面的核心不是花哨动画，而是让买家快速看清三件事：卖什么、多少钱、哪来的。Bootstrap 的card组件天生适合做这件事。卡片头放图片，卡片体放标题和描述，卡片脚放价格和操作按钮。
<div class="card h-100 shadow-sm"> <div class="card-img-top overflow-hidden ratio ratio-4x3"> <img src="img/products/rice.jpg" class="w-100 h-100 object-fit-cover" alt="五常大米"> </div> <div class="card-body"> <h5 class="card-title fw-bold">五常大米 5kg 装</h5> <p class="card-text text-muted small">产地：黑龙江 · 当季新米</p> <p class="text-danger fw-bold mb-0"> ¥69.9 <span class="text-decoration-line-through text-secondary fs-6 fw-normal">¥89.0</span> </p> </div> <div class="card-footer bg-white border-0 d-flex gap-2"> <button class="btn btn-success flex-fill">加入购物车</button> <button class="btn btn-outline-success">对比</button> </div> </div>ratio ratio-4x3是 Bootstrap 5 的比例盒子类，强制图片容器保持 4:3 宽高比，防止不同商品图撑乱卡片。原价划线用的是text-decoration-line-through，这是 Bootstrap 内置工具类，对应 css 里的text-decoration: line-through。按钮用flex-fill让“加入购物车”占满剩余宽度，“对比”按钮只占内容宽度。
3.2 筛选与搜索：下拉菜单的两种实现
商品列表页必须有筛选，否则几十个农产品混在一屏没法看。分类最常见的是“水果”“蔬菜”“粮油”三级，用 Bootstrap 的dropdown组件就能实现。下拉菜单有两种做法：带 JS 的交互式菜单和基于 CSS 的静态下拉菜单。
<div class="dropdown"> <button class="btn btn-outline-success dropdown-toggle" type="button" >.thumb-list img { border: 2px solid transparent; cursor: pointer; transition: border-color .2s ease; } .thumb-list img:hover, .thumb-list img:focus-visible { border-color: #198754; }cursor: pointer是鼠标移入事件的直接反馈，让用户知道这张图可以点。:focus-visible只在高亮键盘焦点时生效，鼠标点击时不会出现双层边框，这是容易忽略的细节。商品的“规格”“产地”“保质期”放在右侧参数区，用dl或者table展示，字段要齐但不要超过七行，超过就折叠到details标签里。
4.2 优惠券与角标：用伪元素做出圆切角
农业电商也常用优惠券，但样式往往做得太重。一个轻量的做法是用 css 在券的左侧做半圆缺口，右侧做锯齿边，核心是::before和::after两个伪元素配合径向渐变：
.coupon { position: relative; padding: 12px 20px; background: #fff7e6; border: 1px dashed #f0a020; } .coupon::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; background: #fff; border-radius: 50%; transform: translateY(-50%); }:before造出的圆点盖在券的边缘，视觉上像被裁掉一个半圆，这就是常见的“优惠券圆切”效果。实际素材包里如果需要这种组件，不用找插件，十几行 css 就能解决。注意content属性不能省略，否则整个伪元素不渲染。
4.3 静态下拉菜单与返回顶部的小细节
购物车里选择配送时间段，常见的是“下拉菜单 + 文字确认”，这部分可以做一个不需要 JS 的select控件，配合 Bootstrap 的form-select类就能保持风格统一。如果需求方坚持要自定义下拉外观，才考虑用dropdown组件。
一键返回顶部算法其实很简单：一个固定定位的按钮，点击后滚动到顶部。素材包里常见的坑是返回按钮被页脚遮住，解决给按钮加z-index: 1021，比 Bootstrap 的导航栏高一层：
<button id="backTop" class="btn btn-outline-success rounded-circle position-fixed" style="bottom: 24px; right: 24px; z-index: 1021;" aria-label="返回顶部"> 返回 </button>document.getElementById('backTop').addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });window.scrollTo的behavior: 'smooth'让滚动带缓动效果，比瞬间跳转体验好，又不需要引入额外库。按钮默认隐藏，滚动超过一屏再显示，这个是 main.js 里的scroll事件监听，素材包里一般都有，没有就自己补上。
4.4 Bootstrap 内部验证：下单前挡住错误信息
表单是交易的最后一道门。Bootstrap 5 内置了基于 HTML5 约束验证的样式体系，核心是needs-validation和was-validated两个类：
<form class="row g-3 needs-validation" novalidate> <div class="col-md-6"> <label for="receiver" class="form-label">收货人</label> <input type="text" class="form-control" id="receiver" required> <div class="invalid-feedback">请填写收货人姓名</div> </div> <div class="col-md-6"> <label for="phone" class="form-label">联系电话</label> <input type="tel" class="form-control" id="phone" pattern="1[3-9][0-9]{9}" required> <div class="invalid-feedback">请填写正确的 11 位手机号</div> </div> <div class="col-12"> <button class="btn btn-success" type="submit">提交订单</button> </div> </form>const form = document.querySelector('.needs-validation'); form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); });配合pattern属性做手机号校验，这比在 JavaScript 里写正则完整得多。表单提交按钮要设置type="submit"，否则点下去不会触发校验流程。novalidate关掉浏览器默认气泡，改用 Bootstrap 的红字提示，视觉更统一。
5. 响应式断点与兼容细节：一套页面在不同屏幕卖出货
5.1 栅格断点：从手机到大屏的陈列策略
农产品的买家一半在手机上看，一半在电脑上下单。Bootstrap 的断点前缀就是为此设计的，核心记住一句话：优先写手机样式，再逐步放大。
| 断点 | 类前缀 | 常见设备宽度 |
|---|---|---|
| xs | (无前缀) | <576px，老手机 |
| sm | col-sm-* | 576px 及以上，大手机 |
| md | col-md-* | 768px 及以上，平板 |
| lg | col-lg-* | 992px 及以上，笔记本 |
| xl | col-xl-* | 1200px 及以上，台式机 |
| xxl | col-xxl-* | 1400px 及以上，大屏 |
商品列表的常见写法col-6 col-md-4 col-lg-3表示：手机上每行 2 个，平板上 3 个，桌面端 4 个。农产品图片多且色块接近，一屏塞超过 8 个卡片反而降低点击率，几个头部电商的农产品频道也都在控制密度。
5.2 表格和图片的溢出处理
详情页的参数表在手机上最容易撑破布局。解决起来有两个办法，优先用table-responsive包一层，让表格在窄屏横向滚动；其次是把表格重新排版为列表，用d-flex加flex-column逐行展示。农产品信息字段多，第一种办法工作量最小。
图片溢出最常见的场景是 Banner 和商品主图。素材自带图可能分辨率不一致，务必在 css 里统一：
.chashi-banner { width: 100%; height: 260px; object-fit: cover; object-position: center; }object-fit: cover让图片填满容器并裁剪多余部分，object-position: center保证裁切时保留图片中心。它的替代方案是用background-image: url()加background-size: cover，但那样不利于 SEO 的alt属性，商品图建议用img标签。
5.3 字体渐变与删除线：提升价格视觉层次
标题栏和促销区用 css 字体渐变能让页面不那么“模板”，比如给主 Banner 的标题加一点文字渐变：
.hero-title { background: linear-gradient(90deg, #0f5f2f, #2e9e47); -webkit-background-clip: text; background-clip: text; color: transparent; }写这段样式时要注意硬性前提：既然文字颜色设成了transparent，就一定要保证渐变兼容性。可以给这段样式加@supports (background-clip: text)条件包裹，声明不支持的浏览器回退到纯色color: #0f5f2f，否则某些老浏览器里的标题会直接看不见。
原价用删除线，这个 Bootstrap 的text-decoration-line-through已经覆盖。如果素材包里原价是加了灰色背景的“划线”，那是用了s标签，要检查全局 css 里有没有把s的默认样式改成不会误导用户的灰色。删除线只该出现在老价格上，新价格必须醒目。
6. 交付前的最后检查：路径、压缩包与素材替换
拿到手的是“前端素材.zip”，交出去的也应该是一个干净可用的 zip。压缩包里套压缩包、路径带中文、图片引用大小写不一致，这三个问题占了本地“打开正常、上线就坏”现象的八成。
第一步检查路径。用编辑器全局搜索img src=和link href=，把所有引用路径统一为相对路径并改为小写字母。服务器分大小写，Windows 本地不分，这正是素材包到 Linux 服务器最常见的坑。
第二步检查压缩结构。zip 解压后第一层应该是index.html或项目文件夹，而不是散落的几十个文件。打包时选中项目文件夹再压缩，这样用户解压得到一个目录，不会把 css 和图片撒得满桌都是。打包命令如下：
cd chashi-agri zip -r ../chashi-agri-frontend.zip . -x "*.DS_Store" "*/.git/*"-x参数排除无关文件，*.DS_Store是 macOS 的残留系统文件。如果素材中有 psd 源文件或未压缩大图，打包前移到_source目录并注明，避免交付物臃肿。
第三步替换素材。农产品图片更新频繁，建议按产品名-序号的命名规律全部放入img/products/，换图时只改文件名，不改 HTML。颜色替换则走 css 变量，在style.css顶部定义：
:root { --brand-color: #198754; --price-color: #dc3545; --bg-light-green: #f0f9f4; }之后把用到绿色的地方全部替换成var(--brand-color)，下次需求方说“换绿色为橙色”，一行改动就够。这套替换规律是农业电商前端素材通用的维护方式，比逐个页面找颜色代码可靠得多。
第四步做一次真实渲染验证。本地双击index.html和用python3 -m http.server 8000启动本地服务后访问，效果有时不一样，前者走file://协议，某些浏览器会限制模块加载。Chashi 这类带多个页面和图片的素材，务必用本地服务方式检查一遍跳转和相对路径。若商品图全部正常显示、下拉菜单能弹出、表单校验有红字提示，这个 zip 就可以交出去了。
本文还有配套的精品资源，点击获取
