HTML5好看的水果蔬菜在线商城网站源码系列模板5

文章目录

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 &copy; 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（防止抄袭，原文地址不可删除）