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（防止抄袭，原文地址不可删除）
相关文章：
HTML5简介的水果蔬菜在线商城网站源码系列模板3
文章目录 1.设计来源1.1 主界面1.2 商品列表1.3 商品信息1.4 购物车1.5 其他页面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板，程序开发，在线开发，在线沟通 作者：xcLeigh 文章地址：https://blog.csdn.ne…...
传输层TCP协议
一、TCP协议格式 我们看到报头固定有20字节，最后选项大小不固定。 4位首部长度（二进制0000 ~ 1111，十进制范围[0, 15]）单位是4字节（存放字节大小范围[0, 60]）包括了20字节固定长度 选项长度。若选项大小为…...
自己开发一个网站系列之-网页开发初识
自己开发一个网站系列之-网页开发初识 欢迎来到网页开发的世界！在这个教程中，我们将介绍网页开发的基本概念、工具和技术，让你能够从零开始创建自己的网页。 一、基础概念 1. 什么是网页？ 网页是通过互联网进行访问的文档&#…...
【代码随想录训练营第42期 Day61打卡 - 图论Part11 - Floyd 算法与A * 算法
目录 一、Floyd算法与A * 算法 1、Floyd算法 思想 伪代码 2、 A * 算法 思想 伪代码 二、经典题目 题目一：卡码网 97. 小明逛公园 题目链接 题解：Floyd 算法 题目二：卡码网 127. 骑士的攻击 题目链接 题解：A * 算法&a…...
docker和ufw冲突问题
在ubuntu上部署的docker映射的端口，开启防火墙ufw后，在未放通的状态下，还是可以访问 解决办法： 在/etc/docker/daemon.json添加如下配置 {"iptables": false } 然后重启docker服务即可 systemctl daemon-reload s…...
Java（基本数据类型）（￣︶￣）↗
Java 基本数据类型是Java编程语言中用于存储数据值的基本单位。它们直接映射到硬件的处理器上，因此访问速度非常快。Java中的基本数据类型分为四大类：整型、浮点型、字符型、布尔型。每种类型都有其固定的范围和存储大小。 一、整型 1）byte…...
283. 移动0
class Solution(object):def moveZeroes(self, nums):""":type nums: List[int]:rtype: None Do not return anything, modify nums in-place instead."""# 两个指针，left, right,中间夹的都是0，# 像个虫子一样一纵一纵的…...
Mysql删库跑路，如何恢复数据？
问题 删库跑路，数据还能恢复吗？ 我们经常听说某某被领导训斥了，对领导心生痛恨，然后登录 Mysql 删库跑路。对于闲聊中经常听说过的一个段子，在现实生活中是否真的发生过，如果发生了，我们该如何解…...
【HarmonyOS】应用引用media中的字符串资源如何拼接字符串
【HarmonyOS】应用引用media中的字符串资源如何拼接字符串 一、问题背景： 鸿蒙应用中使用字符串资源加载，一般文本放置在resoutces-base-element-string.json字符串配置文件中。便于国际化的处理。当然小项目一般直接引用字符串，不需要加载s…...
打开ffmpeg编码器的时候报错：avcodec_open2（）返回-22
[h264_v4l2m2m 0x555555617a00] Could not find a valid device [h264_v4l2m2m 0x555555617a00] cant configure encoder 前言：先做一个操作，查找编码器的时候，使用名字查找的方式： const AVCodec *avcodec_find_encoder_by_n…...
R包：ggheatmap热图
加载R包 # devtools::install_github("XiaoLuo-boy/ggheatmap")library(ggheatmap) library(tidyr)数据 set.seed(123) df <- matrix(runif(225,0,10),ncol 15) colnames(df) <- paste("sample",1:15,sep "") rownames(df) <- sapp…...
springboot实战学习（7）(JWT令牌的组成、JWT令牌的使用与验证)
接着上篇博客的学习。上篇博客是在基本完成用户模块的注册接口的开发以及注册时的参数合法性校验的基础上，基本完成用户模块的登录接口的主逻辑以及提到了问题："用户未登录，需要通过登录，获取到令牌进行登录认证，…...
如何使用numpy反转数组
如何使用numpy反转数组 1、使用np.flip()函数 可以使用flip(m, axisNone)函数来对数组进行反转： m:输入数组 axis:为None则行列都反转 axis:为0则反转行 axis:为1则反转列2、代码 import numpy as np# 创建一维数组 arr np.array([[1, 2, 3, 4, 5],[2, 2, 3, 4…...
Linux·进程概念(上)
1.操作系统 任何计算机系统都包含一个基本的程序合集，称为操作系统(Operator System)。笼统的理解，操作系统包括： 内核(进程管理，内存管理，文件管理，驱动管理) 其他程序(函数库，shell程序) OS的…...
Javax Validation 自定义注解校验（身份证号校验）
一、场景分析 我们使用 SpringMVC 在 Controller 层，对身份证号进行数据校验的话，经常采用以下方式： RestController RequiredArgsConstructor RequestMapping("member") public class MemberController {// 身份证号码正则表达式…...
nid修改orac库和实例名为jyc
由于库太大，并且要求修改源库的实例名，所以考虑采用nid方式重建控制文件，实现名称和路径的完美替换。 oracleJYCDB:/home/oracle/scripts> oracleJYCDB:/home/oracle/scripts>echo $ORACLE_SID orac oracleJYCDB:/home/oracle/scripts…...
无人机之模拟图传篇
无人机的模拟图传技术是一种通过模拟信号传输图像数据的方式，它通常使用无线电模块或专用通信协议进行数据传输。 一、基本原理 模拟图传技术的工作原理是将摄像头或相机设备采集到的图像数据，通过模拟信号的形式进行传输。这些模拟信号在传输过程中可能…...
Ubuntu 20.04安装pycharm2022及配置快捷方式
一、下载与安装 1. 下载 在 官网 下载所需版本，如：下载 2022.3.3 - Linux (tar.gz) 2. 安装 设置自定义安装路径(推荐在 /opt/ 路径下)并安装 mkdir -p ~/Documents/software/pycharm/ cd ~/Documents/software/pycharm/ mv ~/Downloads/pycharm-c…...
uni-app - - - - - 实现锚点定位和滚动监听功能（滚动监听功能暂未添加，待后续更新）
实现锚点定位和滚动监听功能 1. 思路解析2. 代码示例 效果截图示例： 点击左侧menu，右侧列表数据实现锚点定位 1. 思路解析 点击左侧按钮，更新右侧scroll-view对应的scroll-into-view的值，即可实现右侧锚点定位滚动右侧区域&am…...
wordpress迁移到别的服务器
wordpress论坛网站搭建 于2023/11/16写的该文章 一-配置环境 配置LNMP（linuxnginxmysqlphpphpmyadmin）环境或者LAMP（apache） 可以选择集成了这些软件的套件 下载链接：https://www.xp.cn/download.html 手动下载这…...
cefsharp新版本OnBeforeResourceLoad 禁止http自动跳转https显示404错误解决办法 含代码
一、问题 因项目需要，域名没有ssl证书，结果http访问时被强制定向到https前缀，结果会显示404 测试版本cefsharp126.x (x64) 框架 CefSharp.WinForms.NETCore 二、代码（核心代码） 如果请求url是http，且目标是https时，则阻止请求 //判断请求变化 if (url.StartsWith(<…...
RK 方案如何做到上电关机
针对RK方案，公版都是上电开机的，有时候有要求需要上电关机，按键开机，需要把PMU的VDC脚的相关电路去掉即可，只保留一个对地电容。这时候就是上电关机了。RP43/RP47/RP64 电阻都去掉。 沟通交流群QQ：71228861…...
基于量子通讯进行安全认证
8月16日，中国银行的一项发明专利“安全认证方法、装置、电子设备及计算机存储介质”授权公告。其申请于2022年6月29日，公布于2022年9月20日。据悉，该发明中应用了量子通讯/量子随机数相关技术。 事实上，近年来，有多家银行探索研究量子技术。在多家银行的2024半年报中，就…...
C语言贪吃蛇小游戏演示和说明
C语言贪吃蛇小游戏演示和说明 设计贪吃蛇游戏的主要目的是让大家夯实C语言基础，训练编程思维，培养解决问题的思路，领略多姿多彩的C语言。 游戏开始后，会在中间位置出现一条只有三个节点的贪吃蛇，并随机出现一个食物&am…...
C++三大特性——继承性（超万字详解）
目录 前言 一、封装 1. 封装（Encapsulation） 二、继承 1. 构造函数的调用顺序 原理： 2. 析构函数的调用顺序 原理： 3、派生类的隐藏 1. 成员函数隐藏 2. 成员变量隐藏 3. 基类函数的重载隐藏 三、多重继承问题 1. 构…...
electron使用npm install出现下载失败的问题
我在使用electron进行下载时，经常出现一个错误。 HTTPError: Response code 404 (Not Found) for https://registry.npmmirror.com/v21.4.4/electron-v21.4.4-win32-x64.zip 这个时候需要修改一些npm的配置。使用命令npm config list -ls 滑到下面，找到一…...
HT513 2.8W I2S 输入单声道D类音频功率放大器
1 特性 ● 电源供电 PVDD 2.5-6.5V; DVDD/AVDD 3.3V ● 灵活的音频输入: I2S,LJ, RJ TDM 输入 8,16,32,44.1,48,88.2,96,192kHz 采样频率输出功率: 1.40W(PVDD3.6V,RL4Ω,THDN10%) 2.80W(PVDD5.0V,RL4Ω,THDN10%) 4.70W(PVDD6.5V,RL4Ω,THDN10%) ● THDN0.08%(Po1W, …...
[PICO VR]Unity如何往PICO VR眼镜里写持久化数据txt/json文本
前言 最近在用PICO VR做用户实验，需要将用户实验的数据记录到PICO头盔的存储空间里，记录一下整个过程 流程 1.开启写入权限 首先开启写入权限：Unity->Edit->Player->安卓小机器人->Other Settings->Configuration->Wri…...
zico2打靶记录
一、环境搭建 下载地址：https://download.vulnhub.com/zico/zico2.ova 直接双击下载的.ova文件即可在VMware中打开 设置好保存路径后在虚拟机的设置中删除仅主机这个网卡 然后启动靶机 二、信息收集 扫描靶机ip arp-scan -l 扫描一下开放的端口 nmap -p- -sV…...
pick你的第一个人形机器人——青龙强化学习环境测试
文章目录 一、环境配置二、开始训练三、训练成果 最近感受到的大趋势是具身智能，强化学习，模仿学习做人形机器人，这个赛道很火，颇有前些年全力投入做自动驾驶的架势，正好最近用强化学习解决POMDP问题接触到了强化学习&…...