文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 关于我们
- 1.3 商品服务
- 1.4 果蔬展示
- 1.5 联系我们
- 1.6 商品具体信息
- 1.7 登录注册
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/147264301
HTML5好看的水果蔬菜在线商城网站源码系列模板5，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城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 商品具体信息
1.7 登录注册
- 更多界面效果，看下面的视频演示动态效果，或者 下载源码 体验吧。其他更多资源尽在 xcLeigh博客，如有相关技术问题，欢迎私信博主。
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。
HTML5好看的水果蔬菜在线商城网站源码系列模板5
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160-->
<!DOCTYPE html>
<html>
<head>
<title>水果蔬菜在线商城</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }>
</script>
<meta name="keywords" content="HTML5好看的水果蔬菜在线商城网站源码系列模板5" />
<script src="js/menu_jquery.js"></script>
<!---pop-up-box---->
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!---//pop-up-box---->
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</head>
<body>
<!--header start here-->
<div class="header">
<div class="container">
<div class="header-main">
<div class="head-left">
<div class="phone">
<p>电话<span class="ph-numb">133 1100 1100</span></p>
</div>
<div class="search">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i> </i></a>
</div>
<div id="small-dialog" class="mfp-hide">
<div class="search-top">
<div class="login">
<input type="submit" value="">
<input type="text" value="查找更多..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
</div>
<p>田园果蔬</p>
</div>
</div>
<!---->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<div class="logo">
<h1><a href="index.html">田园果蔬</a></h1>
</div>
<div class="header-login">
<div class="top-nav-right">
<div id="loginContainer"><a href="#" id="loginButton"><span>登录</span></a>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">邮箱地址</label>
<input type="text" name="email" id="email">
</fieldset>
<fieldset>
<label for="password">账号密码</label>
<input type="password" name="password" id="password">
</fieldset>
<input type="submit" id="login" value="登 录">
<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
</fieldset>
<span><a href="register.html">没有账号去注册?</a></span>
</form>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--header end here-->
<!--top nav start here-->
<div class="top-navg-main">
<div class="container">
<div class="top-navg">
<span class="menu"> <img src="images/icon.png" alt=""/></span>
<ul class="res">
<li><a href="index.html" class="active hvr-sweep-to-bottom">首页</a></li>
<li><a class="hvr-sweep-to-bottom" href="about.html">关于我们</a></li>
<li><a class="hvr-sweep-to-bottom" href="services.html">商品服务</a></li>
<!-- <li><a class="hvr-sweep-to-bottom" href="typo.html">模板样式</a></li> -->
<li><a class="hvr-sweep-to-bottom" href="gallery.html">果蔬展示</a></li>
<li><a class="hvr-sweep-to-bottom" href="contact.html">联系我们</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.res" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
</div>
</div>
<!--top nav end here-->
<!--banner start here-->
<div class="banner">
<div class="container">
<div class="banner-main">
<h3>果蔬家园，有机绿色</h3>
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地，无论您是想寻找新鲜采摘的时令蔬菜，还是想品尝自然成熟的甜美水果，我们都为您精心准备了最优质的天然美味。</p>
<a href="single.html">查看更多</a>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--banner end here-->
<!--bann-info start here-->
<div class="bann-info">
<div class="container">
<div class="bann-info-main">
<div class="col-md-3 bann-grid">
<div class="agro-grain"><span class="glyphicon glyphicon-grain" aria-hidden="true"> </span></div>
</div>
<div class="col-md-6 bann-grid">
<h6>温馨提示</h6>
<h3>果蔬配送相关信息</h3>
<p>感谢您选择我们作为您健康生活的伙伴！在这里，每一次下单都是对自然农法的支持，每一口美味都是对身体的滋养。我们承诺持续为您带来更多优质果蔬和贴心服务，愿与您一起探索食物本真的味道，共享从农场到餐桌的美好时光！</p>
<a href="single.html" class="hvr-wobble-bottom">查看更多</a>
</div>
<div class="col-md-3 bann-grid">
<img src="images/cucumber.jpg" alt="" class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--bann info end here-->
<!--wedo start here-->
<div class="we-do">
<div class="container">
<div class="wedo-main">
<div class="col-md-4 wedo-grid">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"> </span>
<h3>免费送货 </h3>
<h4>订单满$300免费</h4>
<p>无论是清晨送达的鲜嫩叶菜，还是午后配送的香甜水果，我们都致力于为您提供最新鲜的味蕾享受。</p>
<a href="single.html"><span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"> </span></a>
</div>
<div class="col-md-4 wedo-grid">
<span class="glyphicon glyphicon-user" aria-hidden="true"> </span>
<h3>安全支付 </h3>
<h4>100%的保证金</h4>
<p>无论是清晨送达的鲜嫩叶菜，还是午后配送的香甜水果，我们都致力于为您提供最新鲜的味蕾享受。</p>
<a href="single.html"><span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"> </span></a>
</div>
<div class="col-md-4 wedo-grid">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"> </span>
<h3>30天返回</h3>
<h4>30天现金保证</h4>
<p>无论是清晨送达的鲜嫩叶菜，还是午后配送的香甜水果，我们都致力于为您提供最新鲜的味蕾享受。</p>
<a href="single.html"><span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"> </span></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--we do end here-->
<!--agrom strip start here-->
<div class="agro-strip">
<div class="container">
<div class="agro-strip-main">
<h3>果蔬家园，有机绿色</h3>
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地，无论您是想寻找新鲜采摘的时令蔬菜，还是想品尝自然成熟的甜美水果，我们都为您精心准备了最优质的天然美味。</p>
<a href="single.html" class="hvr-wobble-bottom">查看更多</a>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--agrom strip end here-->
<!--latest-news start here-->
<div class="latest-new">
<div class="container">
<div class="latest-news-main">
<div class="col-md-3 latest-grid">
<img src="images/l1.jpg" alt="" class="img-responsive">
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地。</p>
</div>
<div class="col-md-3 latest-grid">
<img src="images/l2.jpg" alt="" class="img-responsive">
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地。</p>
</div>
<div class="col-md-3 latest-grid">
<img src="images/l.jpg" alt="" class="img-responsive">
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地。</p>
</div>
<div class="col-md-3 latest-grid">
<img src="images/l4.jpg" alt="" class="img-responsive">
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地。</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--latest news end here-->
<!--footer start here-->
<div class="footer">
<div class="container">
<div class="footer-main">
<div class="col-md-4 ftr-grd">
<h3>保持联系</h3>
<p>北京市、海淀区、田间农场</p>
<p>123@126.com</p>
<p>15311001100</p>
</div>
<div class="col-md-4 ftr-grd">
<h3>关注我们</h3>
<ul>
<li><a href="#"><span class="fa"> </span></a></li>
<li><a href="#"><span class="tw"> </span></a></li>
<li><a href="#"><span class="g"> </span></a></li>
<li><a href="#"><span class="in"> </span></a></li>
</ul>
</div>
<div class="col-md-4 ftr-grd">
<h3>加入我们</h3>
<p>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地。 </p>
<label class="hvr-wobble-bottom"> <input type="submit" value="发送"></label>
</div>
<div class="clearfix"> </div>
<div class="copy-right">
<p>Copyright © 2024.田园果蔬 All rights reserved.
<a href="https://blog.csdn.net/weixin_43151418" style="color: orange;" target="_blank">xcLeigh</a> |
<a href="https://item.taobao.com/item.htm?id=805108173963" style="color: orange;" target="_blank">欣晨软件服务</a></p>
</div>
</div>
</div>
</div>
<!--//footer-->
</body>
</html>
源码下载
HTML5好看的水果蔬菜在线商城网站源码系列模板5（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/147264301（防止抄袭，原文地址不可删除）
