文章目录
- 1.设计来源
-
- [1.1 主界面](#1.1 主界面)
- [1.2 商品列表界面](#1.2 商品列表界面)
- [1.3 商品详情界面](#1.3 商品详情界面)
- [1.4 其他界面效果](#1.4 其他界面效果)
- 2.效果和源码
-
- [2.1 动态效果](#2.1 动态效果)
- [2.2 源代码](#2.2 源代码)
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142059220
HTML5好看的水果蔬菜在线商城网站源码2，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置十四个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
水果蔬菜在线商城系列的第三个风格版，总共有三个版本，三种风格。
- 该系列所有文章源码【三种风格，总有一款适合你】
- HTML5超酷炫的水果蔬菜在线商城网站源码1(附源码)
- HTML5好看的水果蔬菜在线商城网站源码2(附源码)【当前文章】
- HTML5简介的水果蔬菜在线商城网站源码3(附源码)
1.1 主界面
1.2 商品列表界面
1.3 商品详情界面
1.4 其他界面效果
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5好看的水果蔬菜在线商城网站源码2
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Organic food & farming html project">
<meta name="author" content="teamXcel">
<title>水果蔬菜在线商城</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div>
<header id="header" class="header-section">
<div class="container">
<nav class="navbar ">
<a href="index.html" class="navbar-brand">
<img class="logo-dark" src="img/logo-dark.png" alt="Saasbiz">
</a>
<div class="d-flex menu-wrap">
<div id="mainmenu" class="mainmenu">
<ul class="nav">
<li><a data-scroll class="nav-link active" href="index.html">首页<span class="sr-only">(current)</span></a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">商城服务</a></li>
<li><a href="shop.html">商城购物</a>
<ul>
<li><a href="shop.html">商品列表</a></li>
<li><a href="product-details.html">商品信息</a></li>
</ul>
</li>
<li><a href="#">页面模板</a>
<ul>
<li><a href="gallery.html">商城照片墙</a></li>
<li><a href="team.html">我的团队</a></li>
<li><a href="testimonial.html">客户评价</a></li>
<li><a href="faq.html">问题反馈</a></li>
<li><a href="404.html">404页面</a></li>
</ul>
</li>
<li><a href="#">商城博客</a>
<ul>
<li><a href="blog-grid.html">网格博客</a></li>
<li><a href="blog-classic.html">经典博客</a></li>
<li><a href="blog-single.html">博客信息</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="header-right">
<a class="menu-btn btn-white" href="https://blog.csdn.net/weixin_43151418?type=blog" target="_blank">获取源码</a>
</div>
</div>
</nav>
</div>
</header>
<div class="header-height"></div>
<div id="main-slider" class="dl-slider">
<div class="single-slide">
<div class="bg-img" style="background-image: url(img/slider1.jpg);"></div>
<div class="slider-content-wrap d-flex align-items-center text-left">
<div class="container">
<div class="slider-content">
<div class="dl-caption medium"><div class="inner-layer"><div data-animation="fade-in-right" data-delay="1s">所有冬季食品额外打五折。</div></div></div>
<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2s">有机生活</div></div>
</div>
<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2.5s">健康生活。</div></div></div>
<div class="dl-caption small"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="3s">你的健康生活之旅从这里开始。</div></div></div>
<div class="dl-btn-group">
<div class="inner-layer">
<a href="#" class="dl-btn" data-animation="fade-in-left" data-delay="3.5s">查看产品 <i class="arrow_right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="single-slide">
<div class="bg-img" style="background-image: url(img/slider2.jpg);"></div>
<div class="slider-content-wrap d-flex align-items-center text-left">
<div class="container">
<div class="slider-content">
<div class="dl-caption medium"><div class="inner-layer"><div data-animation="fade-in-right" data-delay="1s">所有冬季食品额外打五折。</div></div></div>
<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2s">有机食品很好 </div></div>
</div>
<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2.5s">为了健康。</div></div></div>
<div class="dl-caption small"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="3s">把新鲜的食物从我们的桌子上送到你们的桌子上。</div></div></div>
<div class="dl-btn-group">
<div class="inner-layer">
<a href="#" class="dl-btn" data-animation="fade-in-left" data-delay="3.5s">查看产品 <i class="arrow_right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="promo-section padding bg-grey pos-rel">
<div class="food-1"></div>
<div class="food-2"></div>
<div class="container">
<div class="promo-wrap row">
<div class="col-md-4 col-sm-6 xs-padding">
<div class="promo-item text-center">
<i class="food-icon food-iconolives"></i>
<h3>天然食品</h3>
<p>有机食品是通过符合农业标准的方法生产的食品。</p>
<a href="#">查看更多</a>
</div>
</div>
<div class="col-md-4 col-sm-6 xs-padding">
<div class="promo-item active text-center">
<i class="food-icon food-iconcauliflower"></i>
<h3>生物安全</h3>
<p>有机食品是通过符合农业标准的方法生产的食品。</p>
<a href="#">查看更多</a>
</div>
</div>
<div class="col-md-4 col-sm-6 xs-padding">
<div class="promo-item text-center">
<i class="food-icon food-iconwatermelon"></i>
<h3>用户多样性</h3>
<p>有机食品是通过符合农业标准的方法生产的食品。</p>
<a href="#">查看更多</a>
</div>
</div>
</div>
</div>
</section>
<section class="about-section padding">
<div class="container">
<div class="about-wrap row">
<div class="col-md-6 xs-padding">
<div class="about-content">
<div class="section-heading">
<img src="img/title-border.png" alt="img">
<h2>我们为您的家人提供好食物!</h2>
<p>
有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同，但有机农业的特点是资源循环。
</p>
</div>
<ul class="about-info">
<li><i class="ti-hand-point-right"></i>优质品质</li>
<li><i class="ti-hand-point-right"></i>每日采集</li>
<li><i class="ti-hand-point-right"></i>100%的有机</li>
<li><i class="ti-hand-point-right"></i>快速发货</li>
</ul>
<a class="default-btn" href="shop.html">浏览商品<span></span></a>
</div>
</div>
<div class="col-md-6 xs-padding">
<div class="about-img">
<img src="img/about-1.png" alt="img">
</div>
</div>
</div>
</div>
</section>
<section class="product-carousel-section bg-grey padding">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>特色产品</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div id="product-carousel" class="product-carousel owl-carousel">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-1.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>绿色蔬菜</h3>
<h4><span>$72.28</span><span class="old">$95.50</span></h4>
</div>
</div>
<div class="product-item">
<div class="product-thumb">
<img src="img/product-2.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>新鲜香蕉</h3>
<h4><span>$60.28</span><span class="old">$85.50</span></h4>
</div>
</div>
<div class="product-item">
<div class="product-thumb">
<img src="img/product-3.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>新鲜花菜</h3>
<h4><span>$68.28</span><span class="old">$92.50</span></h4>
</div>
</div>
<div class="product-item">
<div class="product-thumb">
<img src="img/product-4.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>粗粮面包</h3>
<h4><span>$38.50</span><span class="old">$50.28</span></h4>
</div>
</div>
<div class="product-item">
<div class="product-thumb">
<img src="img/product-5.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>新鲜的西红柿</h3>
<h4><span>$58.50</span><span class="old">$79.28</span></h4>
</div>
</div>
</div>
</div>
</section>
<section class="feature-section padding">
<div class="container">
<div class="feature-wrap row">
<div class="col-lg-6 sm-padding">
<div class="feature-info">
<div class="section-heading">
<img src="img/title-border.png" alt="img">
<h2>最值得你信赖的农场</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同，但有机农业的特点是资源循环。</p>
</div>
<ul class="feature-list">
<li>
<i class="fa fa-check"></i>
<div class="feature-content"><h3>自然过程</h3>
<p>有机食品是通过符合有机农业标准的方法生产的食品。</p>
</div>
</li>
<li>
<i class="fa fa-check"></i>
<div class="feature-content"><h3>本土的好东西</h3>
<p>有机食品是通过符合有机农业标准的方法生产的食品。</p>
</div>
</li>
<li>
<i class="fa fa-check"></i>
<div class="feature-content"><h3>有机产品</h3>
<p>有机食品是通过符合有机农业标准的方法生产的食品。</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 sm-padding">
<div class="feature-img">
<img src="img/feature-1.jpg" alt="img">
</div>
</div>
</div>
</div>
</section>
<section class="product-section padding bg-grey">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>我们的产品</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="product-filter text-center">
<li class="active" data-filter="*">全部</li>
<li data-filter=".food">蔬菜</li>
<li data-filter=".fruits">水果</li>
<li data-filter=".vegitable">美食</li>
<li data-filter=".juice">好评</li>
</ul>
</div>
</div>
<div class="product-items row">
<div class="col-lg-3 col-sm-6 padding-15 single-item food juice">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-1.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>绿色蔬菜</h3>
<h4><span>$72.28</span><span class="old">$95.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item fruits vegitable">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-2.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>有机香蕉</h3>
<h4><span>$67.28</span><span class="old">$82.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item vegitable juice">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-3.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>有机花菜</h3>
<h4><span>$75.28</span><span class="old">$89.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item juice fruits">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-4.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>粗粮面包</h3>
<h4><span>$45.28</span><span class="old">$70.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item fruits juice">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-5.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>新鲜的西红柿</h3>
<h4><span>$65.28</span><span class="old">$78.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item vegitable fruits">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-6.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>红萝卜</h3>
<h4><span>$48.28</span><span class="old">$65.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item fruits food">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-7.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>草莓干</h3>
<h4><span>$30.28</span><span class="old">$45.50</span></h4>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15 single-item food vagitable">
<div class="product-item">
<div class="product-thumb">
<img src="img/product-8.jpg" alt="img">
<ul class="product-btn-group">
<li><a href="#"><i class="ti-shopping-cart-full"></i></a></li>
<li><a href="#"><i class="ti-gallery"></i></a></li>
<li><a href="#"><i class="ti-heart"></i></a></li>
</ul>
</div>
<div class="product-content text-center">
<h3>有机圆生菜</h3>
<h4><span>$44.28</span><span class="old">$66.50</span></h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta-section padding">
<div class="container">
<div class="cta-wrap row">
<div class="col-lg-8 sm-padding">
<div class="cta-content">
<h2>我们是值得信赖的专业有机机构!</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同，但有机农业的特点是资源循环。</p>
</div>
</div>
<div class="col-lg-4 sm-padding">
<div class="cta-btn text-right">
<a class="default-btn" href="#">参观我们的商店<span></span></a>
</div>
</div>
</div>
</div>
</section>
<section class="team-section padding bg-grey">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>我们的团队</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div class="team-wrap row">
<div class="col-lg-3 col-sm-6 padding-15">
<div class="team-box">
<div class="team-item">
<img src="img/team1.jpg" alt="img">
<ul class="team-social">
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weixin"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-qq"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weibo"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div class="team-content text-center">
<h3>西红柿的依赖<span>有机农场管理员</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15">
<div class="team-box">
<div class="team-item">
<img src="img/team2.jpg" alt="img">
<ul class="team-social">
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weixin"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-qq"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weibo"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div class="team-content text-center">
<h3>弥漫的榴莲味<span>有机农场管理员</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15">
<div class="team-box">
<div class="team-item">
<img src="img/team3.jpg" alt="img">
<ul class="team-social">
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weixin"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-qq"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weibo"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div class="team-content text-center">
<h3>四叶草<span>有机农场管理员</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 padding-15">
<div class="team-box">
<div class="team-item">
<img src="img/team4.jpg" alt="img">
<ul class="team-social">
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weixin"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-qq"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-weibo"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div class="team-content text-center">
<h3>苹果很甜<span>有机农场管理员</span></h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery-section padding">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>美食照片墙</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div class="gallery-wrap row">
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-1.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-1.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-2.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-2.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-3.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-3.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-4.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-4.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-5.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-5.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 padding-15">
<div class="gallery-item">
<img src="img/gallery-6.jpg" alt="img">
<div class="gallery-content">
<h3><a class="img-popup vbox-item" href="img/gallery-6.jpg">新鲜的生活<span>农业</span></a></h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="testimonial-section bg-grey padding">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>我们的客户怎么说</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div id="testimonial-carousel" class="testimonial-carousel owl-carousel">
<div class="testi-item d-flex align-items-center">
<img src="img/testi-1.jpg" alt="img">
<div class="testi-content">
<p>"感谢您在施工过程中指导我们，理解我们，并随时准备满足我们的需求。我们喜欢我们的新空间，并且知道它是由最好的人建造的!"</p>
<h3>客户1</h3>
<ul class="rattings">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span>董事</span>
</div>
<i class="fa fa-quote-right"></i>
</div>
<div class="testi-item d-flex align-items-center">
<img src="img/testi-2.jpg" alt="img">
<div class="testi-content">
<p>"感谢您在施工过程中指导我们，理解我们，并随时准备满足我们的需求。我们喜欢我们的新空间，并且知道它是由最好的人建造的!"</p>
<h3>客户2</h3>
<ul class="rattings">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span>董事</span>
</div>
<i class="fa fa-quote-right"></i>
</div>
<div class="testi-item d-flex align-items-center">
<img src="img/testi-3.jpg" alt="img">
<div class="testi-content">
<p>"感谢您在施工过程中指导我们，理解我们，并随时准备满足我们的需求。我们喜欢我们的新空间，并且知道它是由最好的人建造的!"</p>
<h3>客户3</h3>
<ul class="rattings">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span>董事</span>
</div>
<i class="fa fa-quote-right"></i>
</div>
</div>
</div>
</section>
<section class="faq-section padding">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>常见问题</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div class="faq-wrap row">
<div class="col-md-6 xs-padding">
<div class="faq-item">
<img src="img/faq.webp" alt="img">
</div>
</div>
<div class="col-md-6 xs-padding">
<div id="accordion" class="faq-item">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
你吃什么橙色的食物?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">这是一个从青少年时期就一直困扰着我的大问题。当我在高中的时候。这是一个从青少年时期就一直困扰着我的大问题。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
为什么牛奶对健康有益?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">这是一个从青少年时期就一直困扰着我的大问题。当我在高中的时候。这是一个从青少年时期就一直困扰着我的大问题。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
怎样才能吃到好食物?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">这是一个从青少年时期就一直困扰着我的大问题。当我在高中的时候。这是一个从青少年时期就一直困扰着我的大问题。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section bg-grey padding">
<div class="container">
<div class="section-heading mb-40 text-center">
<img src="img/title-border.png" alt="img">
<h2>专题新闻</h2>
<p>有机食品是通过符合有机农业标准的方法生产的食品。世界各地的标准各不相同。</p>
</div>
<div class="row blog-wrap">
<div class="col-lg-4 col-sm-6 sm-padding">
<div class="blog-item">
<div class="blog-thumb">
<img src="img/post-1.jpg" alt="post">
<span class="category"><a href="#">内部</a></span>
</div>
<div class="blog-content">
<h3><a href="#">如何蒸和购买你的糖派南瓜。</a></h3>
<p>建筑首先从需求之间的动态演变而来，意味着可用的建筑材料和技能。</p>
<a href="#" class="read-more">查看更多</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 sm-padding">
<div class="blog-item">
<div class="blog-thumb">
<img src="img/post-2.jpg" alt="post">
<span class="category"><a href="#">架构</a></span>
</div>
<div class="blog-content">
<h3><a href="#">批量食谱，使用所有的有机蔬菜。</a></h3>
<p>建筑首先从需求之间的动态演变而来，意味着可用的建筑材料和技能。</p>
<a href="#" class="read-more">查看更多</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 sm-padding">
<div class="blog-item">
<div class="blog-thumb">
<img src="img/post-3.jpg" alt="post">
<span class="category"><a href="#">设计</a></span>
</div>
<div class="blog-content">
<h3><a href="#">如何在养鱼场有机养殖鲑鱼?</a></h3>
<p>建筑首先从需求之间的动态演变而来，意味着可用的建筑材料和技能。</p>
<a href="#" class="read-more">查看更多</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="sponsor-section">
<div class="container">
<div id="sponsor-carousel" class="sponsor-carousel owl-carousel">
<div class="sponsor-item">
<img src="img/sponsor1.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor2.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor3.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor4.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor5.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor6.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor7.png" alt="sponsor">
</div>
<div class="sponsor-item">
<img src="img/sponsor8.png" alt="sponsor">
</div>
</div>
</div>
</div>
<footer class="widget-section">
<div class="widget-wrap padding">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="widget-content">
<a href="https://blog.csdn.net/weixin_43151418?type=blog" target="_blank"><img src="img/logo-light.png" alt="brand" style="margin-bottom: 0px;"></a>
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p>
</div>
</div>
<div class="col-lg-2 col-sm-6 sm-padding">
<div class="widget-content footer">
<h4>站内链接</h4>
<ul class="widget-links">
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">商城服务</a></li>
<li><a href="shop.html">商品列表</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6 sm-padding">
<div class="widget-content footer">
<h4>农场地址</h4>
<p>北京市、朝阳区、果蔬家园</p>
<p><a href="https://blog.csdn.net/weixin_43151418?type=blog" style="color: orange;" target="_blank">test@126.com</a></p>
<p>+133 1100 1100</p>
</div>
</div>
<div class="col-lg-4 col-sm-6 sm-padding">
<div class="widget-content footer">
<h4>消息订阅</h4>
<p>订阅我们的网站，享受九折优惠商品。</p>
<div class="subscribe-box clearfix">
<div class="subscribe-form-wrap">
<form action="#" class="subscribe-form">
<input type="email" name="email" id="subs-email" class="form-input" placeholder="输入邮箱...">
<button type="submit" class="submit-btn">订阅</button>
<div id="subscribe-result">
<p class="subscription-success"></p>
<p class="subscription-error"></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-section align-center">
<div class="container">
<p>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>
</p>
</div>
</div>
</footer>
<a data-scroll href="#header" id="scroll-to-top"><i class="ti-arrow-up"></i></a>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/smooth-scroll.min.js"></script>
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<script src="js/vendor/venobox.min.js"></script>
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<script src="js/vendor/slick.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
源码下载
HTML5好看的水果蔬菜在线商城网站源码系列模板2（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/142059220（防止抄袭，原文地址不可删除）