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（防止抄襲，原文地址不可刪除）