精品课程网站开发平台新闻头条今日要闻军事
文章目录
- 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（防止抄袭，原文地址不可删除）