文章目录
- 1.设计来源
-
- [1.1 主界面](#1.1 主界面)
- [1.2 关于我们界面](#1.2 关于我们界面)
- [1.3 商品列表界面](#1.3 商品列表界面)
- [1.4 商品网格界面](#1.4 商品网格界面)
- [1.5 商品信息界面](#1.5 商品信息界面)
- [1.6 联系我们界面](#1.6 联系我们界面)
- 2.效果和源码
-
- [2.1 动态效果](#2.1 动态效果)
- [2.2 源代码](#2.2 源代码)
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/147264332
HTML5好看的水果蔬菜在线商城网站源码系列模板8，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置六个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
水果蔬菜在线商城系列的第八个风格版，总共有九个版本，九种风格。
- 该系列所有文章源码【九种风格，总有一款适合你】
- HTML5超酷炫的水果蔬菜在线商城网站源码1(附源码)
- HTML5好看的水果蔬菜在线商城网站源码2(附源码)
- HTML5简介的水果蔬菜在线商城网站源码3(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板4(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板5(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板6(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板7(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板8(附源码)
- HTML5好看的水果蔬菜在线商城网站源码系列模板9(附源码)
1.1 主界面
1.2 关于我们界面
1.3 商品列表界面
1.4 商品网格界面
1.5 商品信息界面
1.6 联系我们界面
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5简洁的水果蔬菜在线商城网站源码8
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--====== Required meta tags ======-->
<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, shrink-to-fit=no">
<!--====== Title ======-->
<title>水果蔬菜在线商城</title>
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--====== Pe Icon 7 Stroke css ======-->
<link rel="stylesheet" href="assets/css/Pe-icon-7-stroke.css">
<!--====== Ion Icons css ======-->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<!--====== Magnific Popup css ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick css ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate css ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select css ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Default css ======-->
<link rel="stylesheet" href="assets/css/default.css">
<!--====== Style css ======-->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--====== PRELOADER PART START ======-->
<div id="preloader">
<div id="loader">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<!--====== PRELOADER PART ENDS ======-->
<!--====== SEARCH PART START ======-->
<div class="search-box">
<div class="search-header">
<div class="container mt-60">
<div class="row">
<div class="col-6">
<h5 class="search-title">查找</h5> <!-- search title -->
</div>
<div class="col-6">
<div class="search-close text-right">
<button class="search-close-btn">关闭 <span></span><span></span></button>
</div> <!-- search close -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- search header -->
<div class="search-body">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="search-form">
<form action="#">
<input type="text" placeholder="检索商品">
<button><i class="flaticon-search"></i></button>
</form>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- search body -->
</div>
<!--====== SEARCH PART ENDS ======-->
<!--====== SHOPPING CART PART START ======-->
<div class="shopping-cart-wrapper">
<div class="shopping-cart-canvas">
<div class="shopping_cart">
<div class="shopping_cart-top-bar d-flex justify-content-between">
<h6>购物车</h6>
<button class="shopping-cart-close">
<i class="ion ion-md-add"></i>
</button>
</div><!-- shopping cart top bar -->
<div class="shopping_cart-list-items mt-30">
<ul>
<li>
<div class="single-shopping-cart media">
<div class="cart-image">
<img src="assets/images/cart-1.jpg" alt="Cart">
</div>
<div class="cart-content media-body pl-15">
<h6><a href="#">香蕉</a></h6>
<span class="quality">数量: 01</span>
<span class="price">￥205.00</span>
<a class="remove" href="#"><i class="fal fa-times"></i></a>
</div>
</div> <!-- single shopping cart -->
</li>
<li>
<div class="single-shopping-cart media">
<div class="cart-image">
<img src="assets/images/cart-2.jpg" alt="Cart">
</div>
<div class="cart-content media-body pl-15">
<h6><a href="#">葡萄</a></h6>
<span class="quality">数量: 01</span>
<span class="price-discount">￥205.00</span>
<span class="price-close">￥205.00</span>
<a class="remove" href="#"><i class="fal fa-times"></i></a>
</div>
</div> <!-- single shopping cart -->
</li>
</ul>
</div> <!-- shopping_cart list items -->
<div class="shopping_cart-btn">
<div class="total pt-35 d-flex justify-content-between">
<h5>小计:</h5>
<p>￥240.00</p>
</div>
<div class="cart-btn pt-25">
<a class="main-btn" href="#">查看购物车</a>
<a class="main-btn main-btn-2" href="#">结算</a>
</div>
</div>
</div> <!-- shopping_cart -->
</div>
<div class="overlay"></div>
</div>
<!--====== SHOPPING CART PART ENDS ======-->
<!--====== HEADER PART START ======-->
<header class="header-area">
<div class="navigation fixed-top">
<div class="container-fluid pl-60 pr-60">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" alt="Logo">
</a> <!-- Logo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button> <!-- navbar-toggler -->
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item"><a href="index.html">首页</a></li>
<li class="nav-item"><a class="page-scroll" href="about-us.html">关于我们</a></li>
<li class="nav-item"><a href="product-list.html">商品列表</a></li>
<li class="nav-item"><a href="product-grid.html">商品网格</a></li>
<li class="nav-item"><a href="product-details.html">商品信息</a></li>
<li class="nav-item"><a class="page-scroll" href="contact-us.html">联系我们</a></li>
</ul>
</div> <!-- navbar collapse -->
<div class="navbar-icon d-none d-sm-block">
<ul>
<li><a class="search-open" href="#"><i class="pe-7s-search"></i></a></li>
<li><a class="shopping-cart-open" href="#"><i class="pe-7s-cart"></i></a></li>
</ul>
</div>
</nav> <!-- navbar -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- navigation -->
</header>
<!--====== HEADER PART ENDS ======-->
<!--====== BANNER PART START ======-->
<div class="banner-active">
<div class="banner-area d-flex align-items-center bg_cover" style="background-image: url(assets/images/banner-bg.jpg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="banner-content text-center">
<h1 data-animation="fadeInUp" data-delay="0.5s" class="title">吃新鲜食物</h1>
<a data-animation="fadeInUp" data-delay="1.2s" class="main-btn" href="product-grid.html">现在购物</a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
<div class="banner-shape">
<img src="assets/images/banner-shape.png" alt="shape">
</div>
</div> <!-- banner area -->
<div class="banner-area d-flex align-items-center bg_cover" style="background-image: url(assets/images/banner-bg-2.jpg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="banner-content text-center">
<h1 data-animation="fadeInUp" data-delay="0.5s" class="title">吃新鲜食物</h1>
<a data-animation="fadeInUp" data-delay="1.2s" class="main-btn" href="product-grid.html">现在购物</a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
<div class="banner-shape">
<img src="assets/images/banner-shape.png" alt="shape">
</div>
</div> <!-- banner area -->
<div class="banner-area d-flex align-items-center bg_cover" style="background-image: url(assets/images/banner-bg-3.jpg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="banner-content text-center">
<h1 data-animation="fadeInUp" data-delay="0.5s" class="title">吃新鲜食物</h1>
<a data-animation="fadeInUp" data-delay="1.2s" class="main-btn" href="product-grid.html">现在购物</a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
<div class="banner-shape">
<img src="assets/images/banner-shape.png" alt="shape">
</div>
</div> <!-- banner area -->
</div>
<!--====== BANNER PART ENDS ======-->
<!--====== SUB PRODUCT PART START ======-->
<div class="sub-product-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sub-product d-flex justify-content-between">
<div class="sub-product-item text-center mt-30">
<img src="assets/images/sub-1.jpg" alt="Eggs"><br>
<a href="product-details.html"><span>鸡蛋</span></a>
</div> <!-- sub product item -->
<div class="sub-product-item text-center mt-60">
<img src="assets/images/sub-2.jpg" alt="Fruit"><br>
<a href="product-details.html"><span>水果</span></a>
</div> <!-- sub product item -->
<div class="sub-product-item text-center mt-30">
<img src="assets/images/sub-3.jpg" alt="Vegetables"><br>
<a href="product-details.html"><span>蔬菜</span></a>
</div> <!-- sub product item -->
<div class="sub-product-item text-center mt-60">
<img src="assets/images/sub-4.jpg" alt="Meat"><br>
<a href="product-details.html"><span>肉</span></a>
</div> <!-- sub product item -->
<div class="sub-product-item text-center mt-30">
<img src="assets/images/sub-5.jpg" alt="Dairy"><br>
<a href="product-details.html"><span>乳制品</span></a>
</div> <!-- sub product item -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div>
</div>
<!--====== SUB PRODUCT PART ENDS ======-->
<!--====== PRODUCT PART START ======-->
<section class="product-area area-padding">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-1.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">葡萄</h6>
</a>
<ul>
<li>￥15.00</li>
</ul>
</div> <!-- single product -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-2.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">卷心菜</h6>
</a>
<span>出售</span>
<ul>
<li>￥45.00</li>
<li class="item-2"> ￥70.00</li>
</ul>
</div> <!-- single product -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-3.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">菜花</h6>
</a>
<ul>
<li>￥32.00</li>
</ul>
</div> <!-- single product -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-4.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">红辣椒</h6>
</a>
<ul>
<li>￥15.00</li>
</ul>
</div> <!-- single product -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-5.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">苹果</h6>
</a>
<ul>
<li>￥45.00</li>
</ul>
</div> <!-- single product -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-product mt-30">
<img src="assets/images/product-6.jpg" alt="product">
<a href="product-details.html">
<h6 class="title">玉米</h6>
</a>
<ul>
<li>￥32.00</li>
</ul>
</div> <!-- single product -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</section>
<!--====== PRODUCT PART ENDS ======-->
<!--====== PLAY PART START ======-->
<section class="play-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="play-item">
<div class="play-title pb-25">
<h3 class="title">100%纯天然来自农场</h3>
<p>
遵循自然农法，保留食材原味与营养，每一口都是大自然的馈赠。当日采摘，全程冷链配送，新鲜如初，吃得放心。
</p>
</div>
<div class="play-thumb mt-30">
<img src="assets/images/play-thumb.png" alt="">
<a class="video-popup" href="https://live.csdn.net/v/426040"><i class="icon ion-md-play"></i></a>
</div>
</div> <!-- play item -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</section>
<!--====== PLAY PART ENDS ======-->
<!--====== BRAND PART START ======-->
<div class="brand-area">
<div class="container">
<div class="row brand-active">
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-1.png" alt="">
</div> <!-- brand item -->
</div>
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-2.png" alt="">
</div> <!-- brand item -->
</div>
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-3.png" alt="">
</div> <!-- brand item -->
</div>
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-4.png" alt="">
</div> <!-- brand item -->
</div>
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-5.png" alt="">
</div> <!-- brand item -->
</div>
<div class="col-lg-3">
<div class="brand-item">
<img src="assets/images/brand-5.png" alt="">
</div> <!-- brand item -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div>
<!--====== BRAND PART ENDS ======-->
<!--====== SELLER PART START ======-->
<section class="seller-area pt-90 pb-55">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<a href="#">
<h3 class="title">畅销商品</h3>
</a>
</div> <!-- section title -->
</div>
</div>
<div class="row seller-active">
<div class="col-lg-3">
<div class="single-seller mt-30">
<img src="assets/images/seller-1.jpg" alt="">
<a href="product-details.html">
<h5 class="title">香蕉</h5>
</a>
<ul>
<li>￥15.00</li>
</ul>
</div> <!-- single seller -->
</div>
<div class="col-lg-3">
<div class="single-seller mt-30">
<img src="assets/images/seller-2.jpg" alt="">
<a href="product-details.html">
<h5 class="title">石榴</h5>
</a>
<ul>
<li>￥45.00</li>
<li class="item-2">￥70.00</li>
</ul>
</div> <!-- single seller -->
</div>
<div class="col-lg-3">
<div class="single-seller mt-30">
<img src="assets/images/seller-3.jpg" alt="">
<a href="product-details.html">
<h5 class="title">卷心菜</h5>
</a>
<ul>
<li>￥45.00</li>
</ul>
</div> <!-- single seller -->
</div>
<div class="col-lg-3">
<div class="single-seller mt-30">
<img src="assets/images/seller-4.jpg" alt="">
<a href="product-details.html">
<h5 class="title">葡萄</h5>
</a>
<ul>
<li>￥25.00</li>
</ul>
</div> <!-- single seller -->
</div>
<div class="col-lg-3">
<div class="single-seller mt-30">
<img src="assets/images/seller-6.jpg" alt="">
<a href="product-details.html">
<h5 class="title">苹果</h5>
</a>
<ul>
<li>￥45.00</li>
</ul>
</div> <!-- single seller -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</section>
<!--====== SELLER PART ENDS ======-->
<!--====== DISCOUNT PART START ======-->
<section class="discount-area pb-90">
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-6">
<div class="discount-item bg_cover mt-30" style="background-image: url(assets/images/discount-bg-1.jpg);">
<span>100%纯天然 </span>
<h2 class="title">来自农场</h2>
</div>
</div>
<div class="col-lg-6">
<div class="discount-item bg_cover mt-30" style="background-image: url(assets/images/discount-bg-2.jpg);">
<span>减价出售</span>
<h2 class="title">额外八折优惠 </h2>
<a class="main-btn main-btn-2" href="product-list.html">现在购物</a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
</section>
<!--====== DISCOUNT PART ENDS ======-->
<!--====== CUSTOMER PART START ======-->
<div class="customer-area">
<div class="container">
<div class="row customer-active">
<div class="col-lg-6">
<div class="customer-item">
<img src="assets/images/customer-1.png" alt="customer">
<span><b>xcLeigh</b> / 设计师</span>
<p>" 遵循自然农法，保留食材原味与营养，每一口都是大自然的馈赠。当日采摘，全程冷链配送，新鲜如初，吃得放心。 "</p>
</div> <!-- customer item -->
</div>
<div class="col-lg-6">
<div class="customer-item">
<img src="assets/images/customer-2.png" alt="customer">
<span><b>xcLeigh2</b> / 客户</span>
<p>" 遵循自然农法，保留食材原味与营养，每一口都是大自然的馈赠。当日采摘，全程冷链配送，新鲜如初，吃得放心。 "</p>
</div> <!-- customer item -->
</div>
<div class="col-lg-6">
<div class="customer-item">
<img src="assets/images/customer-1.png" alt="customer">
<span><b>xcLeigh3</b> / 设计师</span>
<p>" 遵循自然农法，保留食材原味与营养，每一口都是大自然的馈赠。当日采摘，全程冷链配送，新鲜如初，吃得放心。 "</p>
</div> <!-- customer item -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div>
<!--====== CUSTOMER PART ENDS ======-->
<!--====== LATEST NEWS PART START ======-->
<section class="latest-news-area">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="section-title text-center">
<h3 class="title">最新消息</h3>
<p>遵循自然农法，保留食材原味与营养，每一口都是大自然的馈赠。当日采摘，全程冷链配送，新鲜如初，吃得放心。</p>
</div> <!-- section title -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-8">
<div class="latest-news-item mt-125">
<img src="assets/images/latest-news-1.jpg" alt="latest news">
<span>食物</span>
<a href="blog-details.html">
<h5 class="title">烹饪技巧让烹饪变得简单</h5>
</a>
</div> <!-- latest news item -->
</div>
<div class="col-lg-4 col-md-4 col-sm-8">
<div class="latest-news-item mt-30">
<img src="assets/images/latest-news-2.jpg" alt="latest news">
<span>植物</span>
<a href="blog-details.html">
<h5 class="title">盆栽装饰绿色</h5>
</a>
</div> <!-- latest news item -->
</div>
<div class="col-lg-4 col-md-4 col-sm-8">
<div class="latest-news-item mt-125">
<img src="assets/images/latest-news-3.jpg" alt="latest news">
<span>饮料</span>
<a href="blog-details.html">
<h5 class="title">极简主义餐厅</h5>
</a>
</div> <!-- latest news item -->
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="latest-news-link text-center">
<a href="blog-grid.html">查看更多</a>
</div> <!-- latest news link -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</section>
<!--====== LATEST NEWS PART ENDS ======-->
<!--====== INSTAGRAM PART START ======-->
<div class="instagram-area">
<div class="container-fluid pl-60 pr-60">
<div class="row">
<div class="col-lg-12">
<div class="instagram-item d-flex">
<div class="single-instagram">
<img src="assets/images/instagram-1.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram">
<img src="assets/images/instagram-2.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram">
<img src="assets/images/instagram-3.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram d-none d-sm-inline-block">
<img src="assets/images/instagram-4.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram d-none d-md-inline-block">
<img src="assets/images/instagram-5.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram d-none d-md-inline-block">
<img src="assets/images/instagram-6.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram d-none d-lg-inline-block">
<img src="assets/images/instagram-7.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
<div class="single-instagram d-none d-lg-inline-block">
<img src="assets/images/instagram-8.jpg" alt="instagram">
<div class="instagram-overlay">
<a href="#"><i class="ion ion-logo-instagram"></i></a>
</div>
</div> <!-- single instagram -->
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<span># 田园果蔬</span>
</div>
<!--====== INSTAGRAM PART ENDS ======-->
<!--====== FOOTER PART START ======-->
<section class="footer-area gray-bg pb-90">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5">
<div class="footer-item-1 mt-30">
<a href="index.html"><img src="assets/images/logo-2.png" alt="logo"></a>
<span style="padding-left: 0px !important;">Copyright © 2025.田园果蔬 All rights reserved.<a href="https://xcleigh.blog.csdn.net/" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></span>
<ul>
<li><a href="#">质量方针</a></li>
<li><a href="#">客户的政策 </a></li>
<li><a href="#">关于我们</a></li>
</ul>
<div class="footer-info">
<ul>
<li><i class="ion ion-md-pin"></i> 北京市、海淀区、永青路, <br> 田园果蔬农场</li>
<li><i class="ion ion-ios-mail"></i>test@126.com</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 offset-lg-2 col-md-2 col-sm-4">
<div class="footer-social mt-30">
<h5 class="title">常用链接</h5>
<ul>
<li><a href="">deepseek</a></li>
<li><a href="#">淘宝网</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">腾讯视频</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-5 col-sm-8">
<div class="footer-item-2 mt-30">
<h5 class="title">时事通讯</h5>
<form action="#">
<div class="input-box mt-25">
<input type="email" placeholder="你的邮箱">
</div>
<div class="input-box mt-25">
<button class="main-btn">提交 <i class="ion ion-ios-send"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--====== FOOTER PART ENDS ======-->
<!--====== BACK TO TOP ======-->
<div class="back-to-top">
<a href="">
<i class="ion ion-md-arrow-up"></i>
</a>
</div>
<!--====== BACK TO TOP ======-->
<!--====== jquery js ======-->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Images Loaded js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Nice Select js ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
</body>
</html>源码下载
HTML5好看的水果蔬菜在线商城网站源码系列模板8（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/147264332（防止抄袭，原文地址不可删除）