HTML5简介的水果蔬菜在线商城网站源码系列模板3
文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 商品列表
- 1.3 商品信息
- 1.4 购物车
- 1.5 其他页面效果
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142059027
HTML5简洁的水果蔬菜在线商城网站源码3，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置八个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
水果蔬菜在线商城系列的第三个风格版，总共有三个版本，三种风格。
- 该系列所有文章源码【三种风格，总有一款适合你】
- HTML5超酷炫的水果蔬菜在线商城网站源码1(附源码)
- HTML5好看的水果蔬菜在线商城网站源码2(附源码)
- HTML5简介的水果蔬菜在线商城网站源码3(附源码)【当前文章】
1.1 主界面
1.2 商品列表
1.3 商品信息
1.4 购物车
1.5 其他页面效果
- 更多界面效果，看下面的视频演示动态效果，或者 下载源码 体验吧。其他更多资源尽在 xcLeigh博客，如有相关技术问题，欢迎私信博主。
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5简洁的水果蔬菜在线商城网站源码3
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160--><!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>水果蔬菜在线商城</title><meta content="width=device-width, initial-scale=1.0" name="viewport"><meta content="xcLeigh水果蔬菜在线商城" name="keywords"><meta content="xcLeigh水果蔬菜在线商城" name="description"><!-- Icon Font Stylesheet --><link rel="stylesheet" href="css/all.css"/><link href="css/bootstrap-icons.css" rel="stylesheet"><!-- Libraries Stylesheet --><link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet"><link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"><!-- Customized Bootstrap Stylesheet --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- Template Stylesheet --><link href="css/style.css" rel="stylesheet"></head><body><!-- Spinner Start --><div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center"><div class="spinner-grow text-primary" role="status"></div></div><!-- Spinner End --><!-- Navbar start --><div class="container-fluid fixed-top"><div class="container topbar bg-primary d-none d-lg-block"><div class="d-flex justify-content-between"><div class="top-info ps-2"><small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">北京市、朝阳区、果蔬家园</a></small><small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">test@126.com</a></small></div><div class="top-link pe-2"><a href="#" class="text-white"><small class="text-white mx-2">隐私政策</small>/</a><a href="#" class="text-white"><small class="text-white mx-2">使用条款</small>/</a><a href="#" class="text-white"><small class="text-white ms-2">销售和退款</small></a></div></div></div><div class="container px-0"><nav class="navbar navbar-light bg-white navbar-expand-xl"><a href="index.html" class="navbar-brand"><h1 class="text-primary display-6">果蔬商城</h1></a><button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"><span class="fa fa-bars text-primary"></span></button><div class="collapse navbar-collapse bg-white" id="navbarCollapse"><div class="navbar-nav mx-auto"><a href="index.html" class="nav-item nav-link active">首页</a><a href="shop.html" class="nav-item nav-link">商品</a><a href="shop-detail.html" class="nav-item nav-link">商品信息</a><div class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">页面模板</a><div class="dropdown-menu m-0 bg-secondary rounded-0"><a href="cart.html" class="dropdown-item">购物车</a><a href="chackout.html" class="dropdown-item">结算</a><a href="testimonial.html" class="dropdown-item">客户评价</a><a href="404.html" class="dropdown-item">404页面</a></div></div><a href="contact.html" class="nav-item nav-link">联系我们</a></div><div class="d-flex m-3 me-0"><button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button><a href="#" class="position-relative me-4 my-auto"><i class="fa fa-shopping-bag fa-2x"></i><span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span></a><a href="#" class="my-auto"><i class="fas fa-user fa-2x"></i></a></div></div></nav></div></div><!-- Navbar End --><!-- Modal Search Start --><div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-fullscreen"><div class="modal-content rounded-0"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">按关键字搜索</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body d-flex align-items-center"><div class="input-group w-75 mx-auto d-flex"><input type="search" class="form-control p-3" placeholder="输入关键字" aria-describedby="search-icon-1"><span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span></div></div></div></div></div><!-- Modal Search End --><!-- Hero Start --><div class="container-fluid py-5 mb-5 hero-header"><div class="container py-5"><div class="row g-5 align-items-center"><div class="col-md-12 col-lg-7"><h4 class="mb-3 text-secondary">100%有机食品</h4><h1 class="mb-5 display-3 text-primary">有机蔬菜和水果食品</h1><div class="position-relative mx-auto"><input class="form-control border-2 border-secondary w-75 py-3 px-4 rounded-pill" type="number" placeholder="查找"><button type="submit" class="btn btn-primary border-2 border-secondary py-3 px-4 position-absolute rounded-pill text-white h-100" style="top: 0; right: 25%;">立即提交</button></div></div><div class="col-md-12 col-lg-5"><div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel"><div class="carousel-inner" role="listbox"><div class="carousel-item active rounded"><img src="img/hero-img-1.png" class="img-fluid w-100 h-100 bg-secondary rounded" alt="First slide"><a href="#" class="btn px-4 py-2 text-white rounded">水果</a></div><div class="carousel-item rounded"><img src="img/hero-img-2.jpg" class="img-fluid w-100 h-100 rounded" alt="Second slide"><a href="#" class="btn px-4 py-2 text-white rounded">蔬菜</a></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">向前</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">向后</span></button></div></div></div></div></div><!-- Hero End --><!-- Featurs Section Start --><div class="container-fluid featurs py-5"><div class="container py-5"><div class="row g-4"><div class="col-md-6 col-lg-3"><div class="featurs-item text-center rounded bg-light p-4"><div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto"><i class="fas fa-car-side fa-3x text-white"></i></div><div class="featurs-content text-center"><h5>免费送货</h5><p class="mb-0">订单满$300免费</p></div></div></div><div class="col-md-6 col-lg-3"><div class="featurs-item text-center rounded bg-light p-4"><div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto"><i class="fas fa-user-shield fa-3x text-white"></i></div><div class="featurs-content text-center"><h5>安全支付</h5><p class="mb-0">100%的保证金</p></div></div></div><div class="col-md-6 col-lg-3"><div class="featurs-item text-center rounded bg-light p-4"><div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto"><i class="fas fa-exchange-alt fa-3x text-white"></i></div><div class="featurs-content text-center"><h5>30天返回</h5><p class="mb-0">30天现金保证</p></div></div></div><div class="col-md-6 col-lg-3"><div class="featurs-item text-center rounded bg-light p-4"><div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto"><i class="fa fa-phone-alt fa-3x text-white"></i></div><div class="featurs-content text-center"><h5>24/7的支持</h5><p class="mb-0">全天24小时服务</p></div></div></div></div></div></div><!-- Featurs Section End --><!-- Fruits Shop Start--><div class="container-fluid fruite py-5"><div class="container py-5"><div class="tab-class text-center"><div class="row g-4"><div class="col-lg-4 text-start"><h1>有机产品</h1></div><div class="col-lg-8 text-end"><ul class="nav nav-pills d-inline-flex text-center mb-5"><li class="nav-item"><a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-1"><span class="text-dark" style="width: 130px;">全部产品</span></a></li><li class="nav-item"><a class="d-flex py-2 m-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-2"><span class="text-dark" style="width: 130px;">蔬菜</span></a></li><li class="nav-item"><a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-3"><span class="text-dark" style="width: 130px;"> 水果</span></a></li><li class="nav-item"><a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-4"><span class="text-dark" style="width: 130px;">面包</span></a></li><li class="nav-item"><a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-5"><span class="text-dark" style="width: 130px;">肉类</span></a></li></ul></div></div><div class="tab-content"><div id="tab-1" class="tab-pane fade show p-0 active"><div class="row g-4"><div class="col-lg-12"><div class="row g-4"><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>葡萄</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99/kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>葡萄</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>树莓</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>杏子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>香蕉</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>橙子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>覆盆子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>葡萄</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div></div></div><div id="tab-2" class="tab-pane fade show p-0"><div class="row g-4"><div class="col-lg-12"><div class="row g-4"><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>葡萄</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>树莓</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div></div></div><div id="tab-3" class="tab-pane fade show p-0"><div class="row g-4"><div class="col-lg-12"><div class="row g-4"><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>橙子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-6.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">水果</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>苹果</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div></div></div><div id="tab-4" class="tab-pane fade show p-0"><div class="row g-4"><div class="col-lg-12"><div class="row g-4"><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">面包</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>葡萄</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">面包</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>杏子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div></div></div><div id="tab-5" class="tab-pane fade show p-0"><div class="row g-4"><div class="col-lg-12"><div class="row g-4"><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>香蕉</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>树莓</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-4 col-xl-3"><div class="rounded position-relative fruite-item"><div class="fruite-img"><img src="img/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">肉类</div><div class="p-4 border border-secondary border-top-0 rounded-bottom"><h4>橙子</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div></div></div></div></div> </div></div><!-- Fruits Shop End--><!-- Featurs Start --><div class="container-fluid service py-5"><div class="container py-5"><div class="row g-4 justify-content-center"><div class="col-md-6 col-lg-4"><a href="#"><div class="service-item bg-secondary rounded border border-secondary"><img src="img/featur-1.jpg" class="img-fluid rounded-top w-100" alt=""><div class="px-4 rounded-bottom"><div class="service-content bg-primary text-center p-4 rounded"><h5 class="text-white">新鲜的苹果</h5><h3 class="mb-0">八折优惠</h3></div></div></div></a></div><div class="col-md-6 col-lg-4"><a href="#"><div class="service-item bg-dark rounded border border-dark"><img src="img/featur-2.jpg" class="img-fluid rounded-top w-100" alt=""><div class="px-4 rounded-bottom"><div class="service-content bg-light text-center p-4 rounded"><h5 class="text-primary">美味的水果</h5><h3 class="mb-0">免费送货</h3></div></div></div></a></div><div class="col-md-6 col-lg-4"><a href="#"><div class="service-item bg-primary rounded border border-primary"><img src="img/featur-3.jpg" class="img-fluid rounded-top w-100" alt=""><div class="px-4 rounded-bottom"><div class="service-content bg-secondary text-center p-4 rounded"><h5 class="text-white">有机菜花</h5><h3 class="mb-0">30美元的折扣</h3></div></div></div></a></div></div></div></div><!-- Featurs End --><!-- Vesitable Shop Start--><div class="container-fluid vesitable py-5"><div class="container py-5"><h1 class="mb-0">新鲜有机蔬菜</h1><div class="owl-carousel vegetable-carousel justify-content-center"><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>西洋香菜叶</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-1.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>西红柿</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-3.png" class="img-fluid w-100 rounded-top bg-light" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">水果</div><div class="p-4 rounded-bottom"><h4>香蕉</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-4.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>大柿子椒</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>土豆</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>西洋香菜叶</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>土豆</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="border border-primary rounded position-relative vesitable-item"><div class="vesitable-img"><img src="img/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt=""></div><div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">蔬菜</div><div class="p-4 rounded-bottom"><h4>西洋香菜叶</h4><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。</p><div class="d-flex justify-content-between flex-lg-wrap"><p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div><!-- Vesitable Shop End --><!-- Banner Section Start--><div class="container-fluid banner bg-secondary my-5"><div class="container py-5"><div class="row g-4 align-items-center"><div class="col-lg-6"><div class="py-4"><h1 class="display-3 text-white">新鲜的热带水果</h1><p class="fw-normal display-3 text-dark mb-4">在我们店里</p><p class="mb-4 text-dark">田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p><a href="#" class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">购买</a></div></div><div class="col-lg-6"><div class="position-relative"><img src="img/baner-1.png" class="img-fluid w-100 rounded" alt=""><div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;"><h1 style="font-size: 100px;">1</h1><div class="d-flex flex-column"><span class="h2 mb-0">50$</span><span class="h4 text-muted mb-0">kg</span></div></div></div></div></div></div></div><!-- Banner Section End --><!-- Bestsaler Product Start --><div class="container-fluid py-5"><div class="container py-5"><div class="text-center mx-auto mb-5" style="max-width: 700px;"><h1 class="display-4">有机产品</h1><p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p></div><div class="row g-4"><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-1.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机橙子</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-2.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机柚子</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-3.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机香蕉</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-4.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机柿子</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-5.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机葡萄</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-lg-6 col-xl-4"><div class="p-4 rounded bg-light"><div class="row align-items-center"><div class="col-6"><img src="img/best-product-6.jpg" class="img-fluid rounded-circle w-100" alt=""></div><div class="col-6"><a href="#" class="h5">有机苹果</a><div class="d-flex my-3"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="text-center"><img src="img/fruite-item-1.jpg" class="img-fluid rounded" alt=""><div class="py-4"><a href="#" class="h5">有机橙子</a><div class="d-flex my-3 justify-content-center"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="text-center"><img src="img/fruite-item-2.jpg" class="img-fluid rounded" alt=""><div class="py-4"><a href="#" class="h5">有机柚子</a><div class="d-flex my-3 justify-content-center"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="text-center"><img src="img/fruite-item-3.jpg" class="img-fluid rounded" alt=""><div class="py-4"><a href="#" class="h5">有机香蕉</a><div class="d-flex my-3 justify-content-center"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="text-center"><img src="img/fruite-item-4.jpg" class="img-fluid rounded" alt=""><div class="py-4"><a href="#" class="h5">有机柿子</a><div class="d-flex my-3 justify-content-center"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div><h4 class="mb-3">3.12 $</h4><a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> 购物车</a></div></div></div></div></div></div><!-- Bestsaler Product End --><!-- Fact Start --><div class="container-fluid py-5"><div class="container"><div class="bg-light p-5 rounded"><div class="row g-4 justify-content-center"><div class="col-md-6 col-lg-6 col-xl-3"><div class="counter bg-white rounded p-5"><i class="fa fa-users text-secondary"></i><h4>满意的顾客</h4><h1>1963</h1></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="counter bg-white rounded p-5"><i class="fa fa-users text-secondary"></i><h4>服务质量</h4><h1>99%</h1></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="counter bg-white rounded p-5"><i class="fa fa-users text-secondary"></i><h4>质量证书</h4><h1>33</h1></div></div><div class="col-md-6 col-lg-6 col-xl-3"><div class="counter bg-white rounded p-5"><i class="fa fa-users text-secondary"></i><h4>可用产品</h4><h1>789</h1></div></div></div></div></div></div><!-- Fact Start --><!-- Tastimonial Start --><div class="container-fluid testimonial py-5"><div class="container py-5"><div class="testimonial-header text-center"><h4 class="text-primary">客户评价</h4><h1 class="display-5 mb-5 text-dark">我们的客户说!</h1></div><div class="owl-carousel testimonial-carousel"><div class="testimonial-item img-border-radius bg-light rounded p-4"><div class="position-relative"><i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i><div class="mb-4 pb-4 border-bottom border-secondary"><p class="mb-0">非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。</p></div><div class="d-flex align-items-center flex-nowrap"><div class="bg-secondary rounded"><img src="img/3.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt=""></div><div class="ms-4 d-block"><h4 class="text-dark">客户1</h4><p class="m-0 pb-3">电子销售</p><div class="d-flex pe-5"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star"></i></div></div></div></div></div><div class="testimonial-item img-border-radius bg-light rounded p-4"><div class="position-relative"><i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i><div class="mb-4 pb-4 border-bottom border-secondary"><p class="mb-0">非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。</p></div><div class="d-flex align-items-center flex-nowrap"><div class="bg-secondary rounded"><img src="img/1.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt=""></div><div class="ms-4 d-block"><h4 class="text-dark">客户2</h4><p class="m-0 pb-3">餐饮业</p><div class="d-flex pe-5"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i></div></div></div></div></div><div class="testimonial-item img-border-radius bg-light rounded p-4"><div class="position-relative"><i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i><div class="mb-4 pb-4 border-bottom border-secondary"><p class="mb-0">非常不错的一次购物体验，水果蔬菜都很新鲜，果子都是好的，工作人员的服务态度也是非常满意的，非常热情，积极帮助解决疑惑。非常满意的购物体验。</p></div><div class="d-flex align-items-center flex-nowrap"><div class="bg-secondary rounded"><img src="img/2.png" class="img-fluid rounded" style="width: 100px; height: 100px;" alt=""></div><div class="ms-4 d-block"><h4 class="text-dark">客户3</h4><p class="m-0 pb-3">工程师</p><div class="d-flex pe-5"><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i><i class="fas fa-star text-primary"></i></div></div></div></div></div></div></div></div><!-- Tastimonial End --><!-- Footer Start --><div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5"><div class="container py-5"><div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;"><div class="row g-4"><div class="col-lg-3"><a href="#"><h1 class="text-primary mb-0">果蔬商城</h1><p class="text-secondary mb-0">新鲜的产品</p></a></div><div class="col-lg-6"><div class="position-relative mx-auto"><input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="number" placeholder="输入您的邮箱"><button type="submit" class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white" style="top: 0; right: 0;">现在就订阅</button></div></div><div class="col-lg-3"><div class="d-flex justify-content-end pt-3"><a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-weixin"></i></a><a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/139001741" target="_blank"><i class="fab fa-qq"></i></a><a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/131412565" target="_blank"><i class="fab fa-weibo"></i></a><a class="btn btn-outline-secondary btn-md-square rounded-circle" href="https://blog.csdn.net/weixin_43151418/article/details/131253102" target="_blank"><i class="fab fa-linkedin-in"></i></a></div></div></div></div><div class="row g-5"><div class="col-lg-3 col-md-6"><div class="footer-item"><h4 class="text-light mb-3">为什么人们喜欢我们!</h4><p class="mb-4">田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p><a href="" class="btn border-secondary py-2 px-4 rounded-pill text-primary">查看更多</a></div></div><div class="col-lg-3 col-md-6"><div class="d-flex flex-column text-start footer-item"><h4 class="text-light mb-3">商城信息</h4><a class="btn-link" href="index.html">关于我们</a><a class="btn-link" href="contact.html">联系我们</a><a class="btn-link" href="#">隐私政策</a><a class="btn-link" href="#">条款与条件</a><a class="btn-link" href="#">退货政策</a><a class="btn-link" href="#">常见问题与帮助</a></div></div><div class="col-lg-3 col-md-6"><div class="d-flex flex-column text-start footer-item"><h4 class="text-light mb-3">账户信息</h4><a class="btn-link" href="#">我的账户</a><a class="btn-link" href="#">商品信息</a><a class="btn-link" href="#">购物车</a><a class="btn-link" href="#">收藏</a><a class="btn-link" href="#">订单历史</a><a class="btn-link" href="#">国际订单</a></div></div><div class="col-lg-3 col-md-6"><div class="footer-item"><h4 class="text-light mb-3">联系我们</h4><p>地址: 北京市、朝阳区、果蔬家园</p><p>邮箱: test@126.com</p><p>电话: +133 1100 1100</p><p>接受付款</p><img src="img/payment.png" class="img-fluid" alt=""></div></div></div></div></div><!-- Footer End --><!-- Copyright Start --><div class="container-fluid copyright bg-dark py-4"><div class="container"><div class="row"><div class="col-md-6 text-center text-md-start mb-3 mb-md-0"><span class="text-light"><a href="#">Copyright © 2024.田园果蔬 All rights reserved.<a href="https://blog.csdn.net/weixin_43151418" style="color: orange;" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" style="color: orange;" target="_blank">欣晨软件服务</a>
</span></div></div></div></div><!-- Copyright End --><!-- Back to Top --><a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a> <script src="js/jquery.min.js"></script><script src="js/bootstrap.bundle.min.js"></script><script src="lib/easing/easing.min.js"></script><script src="lib/waypoints/waypoints.min.js"></script><script src="lib/lightbox/js/lightbox.min.js"></script><script src="lib/owlcarousel/owl.carousel.min.js"></script><script src="js/main.js"></script></body></html>
源码下载
HTML5简介的水果蔬菜在线商城网站源码系列模板3（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/142059027（防止抄袭，原文地址不可删除）