文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 商品列表界面
- 1.3 商品详情界面
- 1.4 其他界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142059238
HTML5超酷炫的水果蔬菜在线商城网站源码1，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置二十个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
水果蔬菜在线商城系列的第三个风格版，总共有三个版本，三种风格。
- 该系列所有文章源码【三种风格，总有一款适合你】
- HTML5超酷炫的水果蔬菜在线商城网站源码1(附源码)【当前文章】
- HTML5好看的水果蔬菜在线商城网站源码2(附源码)
- HTML5简介的水果蔬菜在线商城网站源码3(附源码)
1.1 主界面
主界面有两个模板风格，可以根据自己的喜好，增删排版自己的风格。代码独立，注释详细。包含轮播图，视频播放，图片查看，表格，列表等模板内容。
1.2 商品列表界面
1.3 商品详情界面
1.4 其他界面
- 更多界面效果，看下面的视频演示动态效果，或者 下载源码 体验吧。其他更多资源尽在 xcLeigh博客，如有相关技术问题，欢迎私信博主。
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5超酷炫的水果蔬菜在线商城网站源码系列模板1
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>水果蔬菜在线商城</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="static/css/owl.carousel.min.css" type="text/css" media="all">
<link rel="stylesheet" href="static/css/animate.css" type="text/css" media="all">
<link rel="stylesheet" href="static/css/responsive.css" type="text/css" media="all">
<link href="static/css/clash-display.css" rel="stylesheet">
</head>
<body>
<!-- loader -->
<div class="loader_bg">
<img src="static/picture/preloader.gif" alt="loading">
<h5>Loading...</h5>
</div>
<!--==================================================-->
<!-- Start Oraganic Header Top Section -->
<!--==================================================-->
<header class="header-menu-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="header-top-info">
<ul>
<li><i class="bi bi-envelope-fill"></i><a href="#"> test@126.com</a></li>
<li><i class="bi bi-geo-alt-fill"></i> 北京市、朝阳区</li>
</ul>
</div>
</div>
<div class="col-lg-5">
<div class="header-top-social">
<ul>
<li><a href="#"><i class="fab fa-weixin"></i></a></li>
<li><a href="#"><i class="fab fa-qq"></i></a></li>
<li><a href="#"><i class="fab fa-weibo"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--==================================================-->
<!-- End Oraganic Header Top Section -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Oraganic Header Menu Section -->
<!--==================================================-->
<header class="header-manu-section" id="sticky-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-2">
<div class="header-menu-logo ">
<a href="index.html" style="font-family: 华文彩云;font-size: 22px;">
〽田园果蔬
</a><br/>
<span style="font-size: 10px;">提供最新鲜的果蔬，真诚的服务!!!</span>
</div>
</div>
<div class="col-lg-10">
<nav class="header-menu ">
<ul>
<li><a href="#" class="active">首页 <i class="bi bi-chevron-down"></i></a>
<div class="submenu">
<ul>
<li><a href="index.html">首页模板1</a></li>
<li><a href="index2.html">首页模板2</a></li>
</ul>
</div>
</li>
<li><a href="#">关于我们 <i class="bi bi-chevron-down"></i></a>
<div class="submenu">
<ul>
<li><a href="about.html">关于我们</a></li>
<li><a href="service.html">服务介绍</a></li>
<li><a href="service-detials.html">服务介绍详细</a></li>
<li><a href="faq.html">问题反馈</a></li>
<li><a href="gallary.html">商城照片墙</a></li>
<li><a href="team.html">团队成员</a></li>
<li><a href="team-details.html">成员详情</a></li>
<li><a href="testimonial.html">客户评价</a></li>
<li><a href="error.html">404模板</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</li>
<li><a href="#">果蔬商店 <i class="bi bi-chevron-down"></i></a>
<div class="submenu">
<ul>
<li><a href="shop.html">果蔬商店</a></li>
<li><a href="shop-details.html">果蔬商店详情</a></li>
</ul>
</div>
</li>
<li><a href="gallary.html">商城照片墙</a></li>
<li><a href="#">果蔬博客</a><i class="bi bi-chevron-down"></i>
<div class="submenu">
<ul>
<li><a href="blog.html">果蔬博客</a></li>
<li><a href="blog-list-left-sidebar.html">博客左侧栏</a></li>
<li><a href="blog-list-right-sidebar.html">博客右侧栏</a></li>
<li><a href="blog-grid.html">博客网格</a></li>
<li><a href="blog-details.html">博客文章</a></li>
</ul>
</div>
</li>
<li><a href="contact.html">联系我们</a></li>
<li><div class="header-src-btn">
<div class="search-box-btn search-box-outer"><i class="bi bi-search"></i></div>
</div>
</li>
<li><a href="shop.html"><i class="bi bi-cart3"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!--==================================================-->
<!-- End Oraganic Header Main Section -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Main Menu Area -->
<!--==================================================-->
<div class="mobile-menu-area sticky d-sm-block d-md-block d-lg-none ">
<div class="mobile-menu">
<nav class="header-menu">
<ul class="nav_scroll">
<li class="menu-item-has-children"><a href="#">首页</a>
<ul class="sub-menu">
<li><a href="">首页模板1</a></li>
<li><a href="index2.html">首页模板2</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#">关于我们</a>
<ul class="sub-menu">
<li><a href="about.html">关于我们</a></li>
<li><a href="service.html">服务介绍</a></li>
<li><a href="service-detials.html">服务介绍详细</a></li>
<li><a href="faq.html">问题反馈</a></li>
<li><a href="gallary.html">商城照片墙</a></li>
<li><a href="team.html">团队成员</a></li>
<li><a href="team-details.html">成员详情</a></li>
<li><a href="testimonial.html">客户评价</a></li>
<li><a href="error.html">404模板</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</li>
<li><a href="gallary.html">商城照片墙</a></li>
<li class="menu-item-has-children"><a href="#">果蔬博客</a>
<ul class="sub-menu">
<li><a href="blog.html">果蔬博客</a></li>
<li><a href="blog-list-left-sidebar.html">博客左侧栏</a></li>
<li><a href="blog-list-right-sidebar.html">博客右侧栏</a></li>
<li><a href="blog-grid.html">博客网格</a></li>
<li><a href="blog-details.html">博客文章</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#">果蔬商店</a>
<ul class="sub-menu">
<li><a href="shop.html">果蔬商店</a></li>
<li><a href="shop-details.html">果蔬商店详情</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
</div>
<!--==================================================-->
<!-- End Main Menu Area -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Slider Section Here -->
<!--==================================================-->
<div class="slider owl-carousel">
<section class="slider-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="slider-content">
<div class="organic-section-sub-title">
<h6>纯有机商店</h6>
</div>
<div class="slider-title">
<h2>生鲜产品&有机食品</h2>
</div>
<div class="slider-desc">
<p>在专业之前，果断地制定全局接口，戏剧性地改变团队建设。
</p>
</div>
<div class="slider-btn">
<ul>
<li><a href="about.html">关于我们</a></li>
<li><a href="shop.html">现在购买</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="slider-thumb">
<img src="static/picture/slider-thumb.png" alt="thumb">
<div class="slider-off">
<h5 class="counter">50 </h5>
<span>%</span>
<h6> 半价</h6>
</div>
</div>
</div>
</div>
<div class="slider-shape1">
<img src="static/picture/slider-shape.png" alt="shape">
</div>
<div class="slider-shape2">
<img src="static/picture/slider-shape-2.png" alt="shape">
</div>
</div>
</section>
<section class="slider-section style-2">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="slider-content">
<div class="organic-section-sub-title style-2">
<h6>用心思考 <i class="bi bi-arrow-through-heart-fill"></i></h6>
</div>
<div class="slider-title">
<h2>选择健康的产品</h2>
</div>
<div class="slider-desc">
<p>选择好的果蔬品牌，至关重要。我们新鲜的越南蔬菜卷吃起来又好又好吃。</p>
</div>
<div class="slider-btn style-2">
<a href="shop.html">现在购买</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="slider-thumb">
<img src="static/picture/slider2-thumb.png" alt="thumb">
</div>
</div>
</div>
<div class="slider-shape">
<img src="static/picture/slider2-shape.png" alt="shape">
</div>
</div>
</section>
</div>
<!--==================================================-->
<!-- End Organic Slider Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Feature Section Here -->
<!--==================================================-->
<section class="feature-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="feature-single-box style-1 wow fadeInLeft animated">
<div class="feature-box-content">
<div class="feature-box-sub-title">
<h6>每日新鲜</h6>
</div>
<div class="feature-box-title">
<h1>美丽新鲜卫生的食物</h1>
</div>
<div class="feature-box-btn">
<a href="shop-details.html">去购买</a>
</div>
</div>
<div class="feature-box-thumb">
<img src="static/picture/feature-thumb.png" alt="thumb">
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-single-box style-2 wow fadeInDown animated">
<div class="feature-box-content">
<div class="feature-box-sub-title">
<h6>100%生命值</h6>
</div>
<div class="feature-box-title">
<h1>吃健康的好食物</h1>
</div>
<div class="feature-box-btn">
<a href="shop-details.html">去购买</a>
</div>
</div>
<div class="feature-box-thumb">
<img src="static/picture/feature-thumb-2.png" alt="thumb">
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInRight animated">
<div class="feature-single-box style-3">
<div class="feature-box-content">
<div class="feature-box-sub-title">
<h6>净重赠送</h6>
</div>
<div class="feature-box-title">
<h1>纯产品含量，不包括包装</h1>
</div>
<div class="feature-box-btn">
<a href="shop-details.html">去购买</a>
</div>
</div>
<div class="feature-box-thumb">
<img src="static/picture/feature-thumb-3.png" alt="thumb">
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic Feature Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic About Section Here -->
<!--==================================================-->
<section class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="about-thumb wow fadeInUp animated">
<img src="static/picture/about-thumb.png" alt="thumb">
<div class="about-thumb-btn">
<a class="venobox vbox-item" data-vbtype="iframe" data-autoplay="true" href="static/image/gs.mp4" data-gall="video-repeat"><i class="fas fa-play"></i></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-content">
<div class="organic-section-sub-title wow fadeInLeft animated">
<h6>关于我们</h6>
</div>
<div class="organic-section-title wow fadeInLeft animated">
<h3>我们关心有机产品和食品的增长</h3>
</div>
<div class="about-desc wow fadeInRight animated">
<p>
田园蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。
在肥沃的田园土壤里，各种蔬菜茁壮成长，为你提供一年四季的美味。
</p>
</div>
<div class="about-items wow fadeInUp animated">
<div class="about-item">
<div class="about-item-icon">
<img src="static/picture/about-icon.png" alt="icon">
</div>
<div class="about-item-title">
<h4 style="width: 100%;">最佳品质展位</h4>
</div>
</div>
<div class="about-item">
<div class="about-item-icon">
<img src="static/picture/about-icon-2.png" alt="icon">
</div>
<div class="about-item-title">
<h4 style="width: 100%;">优质有机服务</h4>
</div>
</div>
</div>
<div class="about-btn">
<a href="about.html">查看更多</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic About Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Category Section Here -->
<!--==================================================-->
<section class="category-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center wow fadeInDown animated">
<div class="organic-section-sub-title">
<h6>商品分类</h6>
</div>
<div class="organic-section-title">
<h3>我们提供什么</h3>
</div>
</div>
</div>
<div class="category-box">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="category-single-box style-1 wow fadeInLeft animated">
<div class="category-box-icon">
<img src="static/picture/category-icon.png" alt="icon">
</div>
<div class="category-box-title">
<h5>乳制品生产</h5>
</div>
<div class="category-box-desc">
<p>坚定地将可持续服务签证与可持续发展相结合。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="category-single-box style-2 wow fadeInDown animated">
<div class="category-box-icon">
<img src="static/picture/category-icon-2.png" alt="icon">
</div>
<div class="category-box-title">
<h5>有机蔬菜</h5>
</div>
<div class="category-box-desc">
<p>坚定地将可持续服务签证与可持续发展相结合。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="category-single-box style-3 wow fadeInRight animated">
<div class="category-box-icon">
<img src="static/picture/category-icon-3.png" alt="icon">
</div>
<div class="category-box-title">
<h5>新鲜施肥</h5>
</div>
<div class="category-box-desc">
<p>坚定地将可持续服务签证与可持续发展相结合。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic Category Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Feature Section Here -->
<!--==================================================-->
<section class="feature-section style-two">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="feature-content">
<div class="organic-section-sub-title wow fadeInLeft animated">
<h6>所有功能</h6>
</div>
<div class="organic-section-title wow fadeInLeft animated">
<h3>什么是绿色商店?</h3>
</div>
<div class="feature-desc wow fadeInUp animated ">
<p>新鲜，健康的选择想要拥有健康的身体，新鲜的果蔬是不可或缺的。我们的果蔬都是从当地最新鲜的农场采摘而来，为您提供了最富有营养和美味的选择。</p>
</div>
<div class="feature-item wow fadeInLeft animated">
<div class="feature-icon">
<img src="static/picture/feature-icon1.png" alt="icon">
</div>
<div class="feature-item-content">
<div class="feature-item-title">
<h5>免费配送</h5>
</div>
<div class="feature-item-desc">
<p>订单金额超过60元，免费配送。</p>
</div>
</div>
</div>
<div class="feature-item wow fadeInRight animated">
<div class="feature-icon">
<img src="static/picture/featurel-icon-2.png" alt="icon">
</div>
<div class="feature-item-content">
<div class="feature-item-title">
<h5>100%有机食品</h5>
</div>
<div class="feature-item-desc">
<p>100%最佳食品和纺织品测试认证</p>
</div>
</div>
</div>
<div class="feature-item wow fadeInLeft animated">
<div class="feature-icon">
<img src="static/picture/featurel-icon-3.png" alt="icon">
</div>
<div class="feature-item-content">
<div class="feature-item-title">
<h5>付款安全</h5>
</div>
<div class="feature-item-desc">
<p>购买有安全保障的产品</p>
</div>
</div>
</div>
<div class="feature-item wow fadeInRight animated">
<div class="feature-item-icon">
<img src="static/picture/featurel-icon-4.png" alt="icon">
</div>
<div class="feature-item-content">
<div class="feature-item-title">
<h5>友好支持</h5>
</div>
<div class="feature-item-desc">
<p>非常感谢你对团队的帮助</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="feature-thumb wow fadeInUp animated">
<img src="static/picture/feature-thumb.jpg" alt="thumb">
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic Feature Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Fresh Food Section Here -->
<!--==================================================-->
<section class="fresh-food-section">
<div class="container">
<div class="row text-center wow fadeInDown animated">
<div class="col-lg-12">
<div class="organic-section-sub-title">
<h6>新鲜食物</h6>
</div>
<div class="organic-section-title">
<h3>优质有机食品</h3>
</div>
</div>
</div>
<div class="fresh-food-box">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="fresh-food-single-box wow fadeInLeft animated">
<div class="fresh-food-box-thumb">
<img src="static/picture/fresh-food-thumb.png" alt="thumb">
</div>
<div class="fresh-food-box-content">
<div class="fresh-food-box-title">
<h5>新鲜的香蕉</h5>
</div>
<div class="fresh-food-box-price">
<h6>$10 - $20</h6>
</div>
<div class="fresh-food-box-rate">
<ul>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star"></i></li>
</ul>
</div>
</div>
<div class="fresh-food-icon">
<ul>
<li><a href="error.html"><i class="bi bi-heart"></i></a></li>
<li><a href="shop-details.html"><i class="far fa-eye"></i></a></li>
<li><a href="shop.html"><i class="bi bi-cart4"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="fresh-food-single-box wow fadeInDown animated">
<div class="fresh-food-box-thumb">
<img src="static/picture/fresh-food-thumb-2.png" alt="thumb">
</div>
<div class="fresh-food-box-content">
<div class="fresh-food-box-title">
<h5>新鲜橙子</h5>
</div>
<div class="fresh-food-box-price">
<h6>$08 - $18</h6>
</div>
<div class="fresh-food-box-rate">
<ul>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star"></i></li>
</ul>
</div>
</div>
<div class="fresh-food-icon">
<ul>
<li><a href="error.html"><i class="bi bi-heart"></i></a></li>
<li><a href="shop-details.html"><i class="far fa-eye"></i></a></li>
<li><a href="shop.html"><i class="bi bi-cart4"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="fresh-food-single-box wow fadeInUp animated">
<div class="fresh-food-box-thumb">
<img src="static/picture/fresh-food-thumb-3.png" alt="thumb">
</div>
<div class="fresh-food-box-content">
<div class="fresh-food-box-title">
<h5>新鲜苹果</h5>
</div>
<div class="fresh-food-box-price">
<h6>$15 - $25</h6>
</div>
<div class="fresh-food-box-rate">
<ul>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star"></i></li>
</ul>
</div>
</div>
<div class="fresh-food-icon">
<ul>
<li><a href="error.html"><i class="bi bi-heart"></i></a></li>
<li><a href="shop-details.html"><i class="far fa-eye"></i></a></li>
<li><a href="shop.html"><i class="bi bi-cart4"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="fresh-food-single-box wow fadeInRight animated">
<div class="fresh-food-box-thumb">
<img src="static/picture/fresh-food-thumb-4.png" alt="thumb">
</div>
<div class="fresh-food-box-content">
<div class="fresh-food-box-title">
<h5>新鲜草莓</h5>
</div>
<div class="fresh-food-box-price">
<h6>$12 - $18</h6>
</div>
<div class="fresh-food-box-rate">
<ul>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star"></i></li>
</ul>
</div>
</div>
<div class="fresh-food-icon">
<ul>
<li><a href="error.html"><i class="bi bi-heart"></i></a></li>
<li><a href="shop-details.html"><i class="far fa-eye"></i></a></li>
<li><a href="shop.html"><i class="bi bi-cart4"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic Fresh Food Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic New Food Section Here -->
<!--==================================================-->
<section class="new-food-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="new-food-thumb wow fadeInUp animated">
<img src="static/picture/new-food-thumb.png" alt="thumb">
</div>
</div>
<div class="col-lg-6">
<div class="new-food-content">
<div class="organic-section-sub-title wow fadeInLeft animated">
<h6>新的食品</h6>
</div>
<div class="organic-section-title wow fadeInLeft animated">
<h3>所有水果类产品比之前都降价65%</h3>
</div>
<div class="new-food-desc wow fadeInRight animated">
<p>
新鲜，健康的选择想要拥有健康的身体，新鲜的果蔬是不可或缺的。我们的果蔬都是从当地最新鲜的农场采摘而来，为您提供了最富有营养和美味的选择。
多样品种，满足您的需求无论是哪个季节，我们都有丰富的果蔬供您选择。从经典的苹果、香蕉到独特的火龙果、哈密瓜，我们涵盖了各种新鲜水果和蔬菜，一定有一款是您的最爱。
</p>
</div>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">天</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">时</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">分</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">秒</div>
</div>
</div>
<div class="new-food-btn wow fadeInUp animated">
<a href="#">查看更多</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic New Food Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic New Food Section Here -->
<!--==================================================-->
<section class="relation-section">
<div class="container">
<div class="row text-center wow fadeInDown animated">
<div class="col-lg-12">
<div class="organic-section-sub-title">
<h6>客户评价</h6>
</div>
<div class="organic-section-title">
<h3>他们怎么评价我们的关系</h3>
</div>
</div>
</div>
<div class="new-food-box">
<div class="row">
<div class="news-food-slider owl-carousel">
<div class="col-lg-12 ">
<div class="relation-single-box">
<div class="relation-box-icon">
<img src="static/picture/new-food-box-icon.png" alt="icon">
</div>
<div class="relation-box-rate">
<ul>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
</ul>
</div>
<div class="relation-box-desc">
<p>"新鲜果蔬，大自然的味道，健康的选择。"</p>
</div>
<div class="relation-box-profile">
<div class="relation-profile-icon">
<img src="static/picture/new-food-profile-icon.png" alt="profile">
</div>
<div class="relation-profile-content">
<div class="relation-profile-title">
<h5>张翼飞</h5>
</div>
<div class="relation-profile-designation">
<h6>公司创始人</h6>
</div>
</div>
</div>
<div class="relation-single-box-shape">
<img src="static/picture/new-food-box-shape.png" alt="shape">
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="relation-single-box">
<div class="relation-box-icon">
<img src="static/picture/new-food-box-icon.png" alt="icon">
</div>
<div class="relation-box-rate">
<ul>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
</ul>
</div>
<div class="relation-box-desc">
<p>"品味多样化的水果与蔬菜，让生活更加美好！"</p>
</div>
<div class="relation-box-profile">
<div class="relation-profile-icon">
<img src="static/picture/new-food-profile-icon-2.png" alt="profile">
</div>
<div class="relation-profile-content">
<div class="relation-profile-title">
<h5>柳生活</h5>
</div>
<div class="relation-profile-designation">
<h6>财务经理</h6>
</div>
</div>
</div>
<div class="relation-single-box-shape">
<img src="static/picture/new-food-box-shape.png" alt="shape">
</div>
</div>
</div>
<div class="col-lg-12 ">
<div class="relation-single-box">
<div class="relation-box-icon">
<img src="static/picture/new-food-box-icon.png" alt="icon">
</div>
<div class="relation-box-rate">
<ul>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
<li><i class="fi fi-ss-star"></i></li>
</ul>
</div>
<div class="relation-box-desc">
<p>"绿色果蔬，营养健康，满足你的味蕾。"</p>
</div>
<div class="relation-box-profile">
<div class="relation-profile-icon">
<img src="static/picture/new-food-profile-icon-3.png" alt="profile">
</div>
<div class="relation-profile-content">
<div class="relation-profile-title">
<h5>xcLeigh</h5>
</div>
<div class="relation-profile-designation">
<h6>销售经理</h6>
</div>
</div>
</div>
<div class="relation-single-box-shape">
<img src="static/picture/new-food-box-shape.png" alt="shape">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic New Food Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Latest News Section Here -->
<!--==================================================-->
<section class="latest-news-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="latest-news-top-left wow fadeInLeft animated">
<div class="organic-section-sub-title">
<h6>我们所提供的</h6>
</div>
<div class="organic-section-title">
<h3>最新的博客文章和更新的文章</h3>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="latest-news-top-right wow fadeInRight animated">
<div class="latest-news-desc">
<p>
每种蔬菜水果都有它们独特的营养和味道，让我们一起享受这份大自然的馈赠吧。用博客来传递它的温度。
我们的水果蔬菜，从田间到超市，始终保持最新鲜，给你带来最纯正的口感！
</p>
</div>
</div>
</div>
</div>
<div class="latest-news-box">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="latest-news-single-box wow fadeInLeft animated">
<div class="latest-box-thumb">
<img src="static/picture/latest-news-box-thumb.jpg" alt="thumb">
</div>
<div class="latest-box-date">
<h6><i class="far fa-calendar"></i> 2024-09-08</h6>
</div>
<div class="latest-box-message">
<h6><i class="far fa-comment"></i> 09</h6>
</div>
<div class="latest-box-title">
<a href="blog.html">蔬菜的日常养护，精心培育出一波又一波绿色果蔬。</a>
</div>
<div class="latest-box-btn">
<a href="blog-details.html">查看更多 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="latest-news-single-box wow fadeInDown animated">
<div class="latest-box-thumb">
<img src="static/picture/latest-news-box-thumb-2.jpg" alt="thumb">
</div>
<div class="latest-box-date">
<h6><i class="far fa-calendar"></i>2024-09-08</h6>
</div>
<div class="latest-box-message">
<h6><i class="far fa-comment"></i> 06</h6>
</div>
<div class="latest-box-title">
<a href="blog.html">我很喜欢田园生活，那样让我很舒服，很轻松</a>
</div>
<div class="latest-box-btn">
<a href="blog-details.html">查看更多 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="latest-news-single-box wow fadeInRight animated">
<div class="latest-box-thumb">
<img src="static/picture/latest-news-box-thumb-3.jpg" alt="thumb">
</div>
<div class="latest-box-date">
<h6><i class="far fa-calendar"></i> 2024-09-08</h6>
</div>
<div class="latest-box-message">
<h6><i class="far fa-comment"></i> 07</h6>
</div>
<div class="latest-box-title">
<a href="blog.html">种种花，养养草，很享受自己种植的果蔬慢慢长大的过程</a>
</div>
<div class="latest-box-btn">
<a href="blog-details.html">查看更多 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================================================-->
<!-- End Organic Latest News Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Brand Section Here -->
<!--==================================================-->
<div class="brand-section">
<div class="container-fluid">
<div class="row">
<div class="brand-slider owl-carousel">
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb-2.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb-3.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb-4.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb-5.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="brand-thumb">
<img src="static/picture/brand-thumb-6.png" alt="thumb">
<div class="brand-thumb-icon">
<a href="shop.html"><i class="bi bi-cart4"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==================================================-->
<!-- End Organic Brand Section Here -->
<!--==================================================-->
<!--==================================================-->
<!-- Start Organic Footer Section Here -->
<!--==================================================-->
<footer class="footer-section">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 wow fadeInLeft animated">
<div class="footer-bottom-logo">
<a href="index.html" style="font-family: 华文彩云;font-size: 22px;">
〽田园果蔬
</a><br/>
<span style="font-size: 10px;">提供最新鲜的果蔬，真诚的服务!!!</span>
</div>
<div class="footero-desc">
<p>田园水果蔬菜，汲取大地灵气，尽显天然美味，带你品味真正的自然之味。绿油油的田园蔬菜，清脆可口，让你在大自然中尽享美食之旅。</p>
</div>
<div class="footer-bottomo-social">
<ul>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-weixin"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-qq"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-weibo"></i></a></li>
<li><a href="https://blog.csdn.net/weixin_43151418/article/details/140635640" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInDown animated">
<div class="footer-explore">
<div class="footer-explore-title">
<h4>站内探索</h4>
</div>
<ul>
<li><a href="about.html"><img src="static/picture/footer-icon.png" alt="icon"> 关于我们</a></li>
<li><a href="service.html"><img src="static/picture/footer-icon.png" alt="icon"> 果蔬服务</a></li>
<li><a href="team-details.html"><img src="static/picture/footer-icon.png" alt="icon"> 成员介绍</a></li>
<li><a href="shop.html"><img src="static/picture/footer-icon.png" alt="icon"> 上新产品</a></li>
<li><a href="contact.html"><img src="static/picture/footer-icon.png" alt="icon"> 联系我们</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInUp animated">
<div class="footer-gallary">
<div class="footer-gallary-title">
<h4>果蔬照片墙</h4>
</div>
<ul>
<li><a href="#"><img src="static/picture/brand-thumb.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
<li><a href="#"><img src="static/picture/brand-thumb-2.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb-2.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
<li><a href="#"><img src="static/picture/brand-thumb-3.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb-3.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
<li><a href="#"><img src="static/picture/brand-thumb-4.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb-4.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
<li><a href="#"><img src="static/picture/brand-thumb-5.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb-5.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
<li><a href="#"><img src="static/picture/brand-thumb-6.png" alt="thumb"></a>
<div class="gallary-thumb-btn">
<a class="portfolio-icon venobox vbox-item" data-gall="myportfolio" href="static/picture/brand-thumb-6.png"><i class="bi bi-plus-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInRight animated">
<div class="footer-contact">
<div class="footer-contact-title">
<h4>联系我们</h4>
</div>
<ul>
<li>北京市、朝阳区、果蔬家园</li>
<li><a href="#"><i class="fas fa-envelope"></i> test@126.com</a></li>
<li><i class="fas fa-phone-volume"></i> +133 1100 1100</li>
<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class="bi bi-globe2"></i>weixin_43151418</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="footer-bottom wow fadeInLeft animated">
<p>Copyright © 2024.田园果蔬 All rights reserved.
<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> |
<a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a>
</p>
</div>
</div>
</div>
</footer>
<!--==================================================-->
<!-- End Organic Footer Section Here -->
<!--==================================================-->
<script src="static/js/modernizr-3.5.0.min.js"></script>
<script src="static/js/jquery-3.6.2.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>
源码下载
HTML5超酷炫的水果蔬菜在线商城网站源码系列模板1（源码） 点击下载
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/142059238（防止抄袭，原文地址不可删除）
