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

文章目录

1.设计来源
- 1.1 主界面
- 1.2 关于我们
- 1.3 商品信息
- 1.4 新闻资讯
- 1.5 联系我们
- 1.5 登录注册
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/147264262

HTML5好看的水果蔬菜在线商城网站源码系列模板4，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城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.5 登录注册

登录页面

在这里插入图片描述

注册页面

在这里插入图片描述

更多界面效果，看下面的视频演示动态效果，或者下载源码体验吧。其他更多资源尽在 xcLeigh博客，如有相关技术问题，欢迎私信博主。

2.效果和源码

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的水果蔬菜在线商城。

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

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">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="水果蔬菜在线商城" />
<script src="js/responsiveslides.min.js"></script>
</head>
<body><div class="header" id="home"><div class="container"><div class="header-top"><div class="logo"><a href="index.html">田园果蔬</a><p>有机绿色蔬菜.</p></div><div class='top-menu'><label class="menu">  </label><ul><li><a href='index.html' class="active"><span>首页</span></a></li><li><a href='about.html'><span>关于我们</span></a></li><li><a href='services.html'><span>商品信息</span></a></li><li><a href='news.html'><span>新闻</span></a></li><li><a href='contact.html'><span>联系我们</span></a></li><div class="clearfix"> </div></ul><!-- script for menu --><script>$("label.menu").click(function(){$(".top-menu ul").slideToggle("slow" , function(){});});</script><!-- //script for menu --></div>
</div></div></div><div class="header-slider"><div class="slider"><div class="callbacks_container"><ul class="rslides" id="slider"><li><img src="images/1.jpg" alt=""><div class="caption"><h3>让你的花园看起来像天堂！</h3></div></li><li><img src="images/2.jpg" alt=""><div class="caption"><h3>你的农场稳步增长！</h3></div></li><li><img src="images/3.jpg" alt=""><div class="caption"><h3>让你的花园看起来像天堂！</h3></div></li></ul></div></div>
</div><div class="content"><div class="welcome"><div class="container"><div class="wel-grids"><div class="col-md-4 wel-grid"><img src="images/img2.jpg" class="img-responsive" alt="" /></div><div class="col-md-8 wel-grid1"><h3>欢迎光临</h3><h6>欢迎来到我们的果蔬乐园！这里是大自然馈赠的美味集合地，无论您是想寻找新鲜采摘的时令蔬菜，还是想品尝自然成熟的甜美水果，我们都为您精心准备了最优质的天然美味。每一份果蔬都承载着阳光雨露的滋养和农人的辛勤汗水，我们期待与您分享这份来自土地的珍贵礼物。</h6><h5>我们都致力于为您提供最新鲜的味蕾享受。</h5><p>感谢您选择我们作为您健康生活的伙伴！在这里，每一次下单都是对自然农法的支持，每一口美味都是对身体的滋养。我们承诺持续为您带来更多优质果蔬和贴心服务，愿与您一起探索食物本真的味道，共享从农场到餐桌的美好时光！</p><a href="#" class="button">查看更多</a></div><div class="clearfix"> </div></div></div></div><div class="service-section"><div class="container"><h3>商品信息</h3><div class="service-grids"><div class="col-md-4 service-grid"><h4>谷物</h4><img src="images/img3.jpg" class="img-responsive" alt="" /><h5>麦子</h5><p>可煮食、烤制或加工成玉米油、淀粉等。生长周期短、适应性强，南北各地均可种植。</p><a href="#" class="button1"> 查看更多</a></div><div class="col-md-4 service-grid"><h4>蔬菜</h4><img src="images/img4.jpg" class="img-responsive" alt="" /><h5>花菜</h5><p>可煮食、烤制或加工成玉米油、淀粉等。生长周期短、适应性强，南北各地均可种植。</p><a href="#" class="button1"> 查看更多</a></div><div class="col-md-4 service-grid"><h4>水果</h4><img src="images/img5.jpg" class="img-responsive" alt="" /><h5>橙子</h5><p>可煮食、烤制或加工成玉米油、淀粉等。生长周期短、适应性强，南北各地均可种植。</p><a href="#" class="button1"> 查看更多</a></div><div class="clearfix"> </div></div></div></div><div class="what"><div class="container"><div class="what-header"><h3>我们提供什么</h3><p>每一份果蔬都承载着阳光雨露的滋养和农人的辛勤汗水，我们期待与您分享这份来自土地的珍贵礼物。</p></div><div class="what-grids"><div class="col-md-3 what-grid"><h4>农业种子</h4><ul class="list"><li><a href="#">紫花苜蓿</a><li><a href="#">油菜</a><li><a href="#">玉米</a><li><a href="#">棉花</a></ul><a href="#" class="button2"> 查看更多</a></div><div class="col-md-3 what-grid"><h4>农场技术</h4><ul class="list"><li><a href="#">加速种子处理</a><li><a href="#">农业除草剂</a><li><a href="#">私人定制</a><li><a href="#">农业服务</a></ul></div><div class="col-md-3 what-grid"><h4>除草</h4><ul class="list"><li><a href="#">农业除草剂</a><li><a href="#">浇水</a><li><a href="#">整理</a><li><a href="#">维护</a></ul><a href="#" class="button2"> 查看更多</a></div><div class="col-md-3 what-grid"><h4>蔬菜定制</h4><ul class="list"><li><a href="#">送货上门</a><li><a href="#">果蔬采摘</a><li><a href="#">包地自种</a><li><a href="#">每日定制</a></ul></div><div class="clearfix"> </div></div></div></div><div class="news-section"><div class="container"><div class="news-header"><h3>热门事件</h3><p>可煮食、烤制或加工成玉米油、淀粉等。生长周期短、适应性强，南北各地均可种植。</p></div></div><div class="news-grids"><div class="col-md-6 news-grid">
<a href="images/img6.jpg" class="swipebox"><img src="images/img6.jpg" /></a><div class="news-info"><h4>有机果蔬送货！</h4><p>2025-04-08</p><a href="#" class="button1"> 查看更多</a></div></div><div class="col-md-6 news-grid1"><div class="news-grid2">
<a href="images/img7.jpg" class="swipebox"><img src="images/img7.jpg" /></a><div class="news-info1"><h4>有机草莓等你品!</h4><p>2025-04-08</p><a href="#" class="button1"> 查看更多</a></div></div><div class="news-grid3">
<a href="images/img8.jpg" class="swipebox"><img src="images/img8.jpg" /></a><div class="news-info1"><h4>专业技术守护农场!</h4><p>2025-04-08</p><a href="#" class="button1"> 查看更多</a></div></div></div><div class="clearfix"> </div></div></div><div class="google-map" style="padding: 20px;"><iframe src="https://map.baidu.com/@12930052.221768819,4872534.546526956,13z" width="100%" height="320" style="border:0;" allowfullscreen=""></iframe></div><div class="contact-section"><div class="container"><h3> 留言联系我们</h3><div class="contact-grid"><div class="col-md-4 contactgrid"><input type="text" class="text" value=" 名字" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = ' 名字';}"></div><div class="col-md-4 contactgrid"><input type="text" class="text" value="邮箱" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '邮箱';}"></div><div class="col-md-4 contactgrid"><input type="text" class="text" value="电话" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '电话';}"></div><div class="clearfix"> </div><div class="col-md-12 contactgrid1"><textarea onfocus="if(this.value == '您要说的') this.value='';" onblur="if(this.value == '') this.value='您要说的';" >您要说的</textarea></div><div class="contactgrid2"><input type="button" value="发送信息"></div></div></div></div><div class="footer-section"><div class="container"><div class="footer-top"><div class="social-icons"><a href="#"><i class="icon1"></i></a><a href="#"><i class="icon2"></i></a><a href="#"><i class="icon3"></i></a></div></div><div class="footer-bottom"><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><a class="scroll" href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a></div></div></body>
</html>

源码下载

HTML5简介的水果蔬菜在线商城网站源码系列模板4（源码）点击下载
在这里插入图片描述

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

💢 关注博主带你实现畅游前后端

🏰 加入社区带你体验马航不孤单

💯 神秘个人简介带你体验不一样得介绍

💘 为爱表白为你那个TA，体验别致的浪漫惊喜

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/147264262（防止抄袭，原文地址不可删除）