HTML5大作业三农有机，农产物，农庄，农旅网站源码

小秦哥  论坛元老 | 2024-7-25 04:40:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1626|帖子 1626|积分 4878

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/140497820
  
  HTML5大作业三农有机，农产物，农庄，农旅网站源码 HTML5大作业三农有机，农产物，农庄，农旅网站源码，先容农业相干的网站，农业网站大作业，毕业设计，功能点包罗轮播图，图文处理，表单，表格，菜单，模块等各种风格都有，代码上手简单，代码独立，可以直接利用。也可直接预览结果。
  1.设计泉源

1.1 轮播图页面头部结果



  • 结果一



  • 结果二

1.2 栏目列表页面结果



  • 结果一



  • 结果二



  • 结果三



  • 结果四



  • 结果五



  • 结果六



  • 结果七

1.3 页面底部导航结果


2.结果和源码

2.1 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相干说明。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>三农有机网站</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  7.     <link rel="stylesheet" href="js/swiper-bundle.min.css" />
  8.     <link rel="stylesheet" href="css/my.css" />
  9.   </head>
  11.   <body>
  12.     <div class="titlediv">
  13.       <div style="width: 60px;"></div>
  14.       <div style="width: 220px;">
  15.         <img src="img/logo.png" />
  16.       </div>
  17.       <div style="width:calc(100% - 580px);text-align: center;">
  18.         <ul id="nav">
  19.           <li><a href="#" style="border-bottom: 4px solid #179256;">首页</a></li>
  20.           <li><a href="#">共享农庄</a></li>
  21.           <li><a href="#">农旅目的地</a></li>
  22.           <li><a href="#">有机产品</a></li>
  23.           <li><a href="#">农旅问答</a></li>
  24.           <li><a href="#">农旅活动</a></li>
  25.         </ul>
  26.       </div>
  27.       <div style="width: 240px; text-align: right; display: flex; align-items: center;">
  28.         <img src="img/girl.png" style="width: 30px;" />
  29.         <span style="margin-left: 6px;">三农有机</span>
  30.         <a href="#" style="margin-left: 12px;">退出</a>
  31.         <a href="#" style="margin-left: 12px;">注册</a>
  32.         <a href="#" style="margin-left: 12px;">登录</a>
  33.       </div>
  34.       <div style="width: 60px;"></div>
  35.     </div>
  37.     <div class="swiper mySwiper">
  38.       <div class="swiper-wrapper">
  39.         <div class="swiper-slide" style="background-image:url('img/p1.jpg');background-repeat:no-repeat;background-size:cover;"></div>
  40.         <div class="swiper-slide" style="background-image:url('img/p2.jpg');background-repeat:no-repeat;background-size:cover;"></div>
  41.         <div class="swiper-slide" style="background-image:url('img/p3.jpg');background-repeat:no-repeat;background-size:cover;"></div>
  42.         <div class="swiper-slide" style="background-image:url('img/p4.jpg');background-repeat:no-repeat;background-size:cover;"></div>
  43.       </div>
  44.       <div class="swiper-button-next"></div>
  45.       <div class="swiper-button-prev"></div>
  46.       <div class="swiper-pagination"></div>
  47.       <div style="position: absolute; bottom: 100px;text-align: center; left:15%; right:15%; width:70%;height: 140px; background-color: rgba(255,255,255,0.7); border-radius: 10px; z-index: 9999;">
  48.         <div style="padding: 20px; font-size: 24px; letter-spacing: 4px; color: #1B9759;">幸福农旅，从此开始</div>
  49.         <div style="display: flex; align-items: center; justify-content: center;">
  50.           <select>
  51.             <option value="琼海">琼海</option>
  52.           </select>
  53.           <select>
  54.             <option value="亲子农庄">亲子农庄</option>
  55.           </select>
  56.           <input type="text" placeholder="关键词" />
  57.           <button>→</button>
  58.         </div>
  59.       </div>
  60.     </div>
  62.     <div class="footer">
  63.       <div class="footercon">
  64.         
  65.         <div>
  66.           <div>
  67.             <div>
  68.               <h4>常见问题</h4>
  69.             </div>
  70.             <div style="color: #B0B1B0; font-size: 12px;">
  71.               有机产品价格是否高于普通….
  72.             </div>
  73.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  74.               如何保证产品的质量与真实性
  75.             </div>
  76.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  77.               有机农产品的营养价值是否...
  78.             </div>
  79.           </div>
  80.           <div style="margin-left: 20px;">
  81.             <div>
  82.               <h4>付款方式</h4>
  83.             </div>
  84.             <div style="color: #B0B1B0; font-size: 12px;">
  85.               是否支持分期付款
  86.             </div>
  87.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  88.               是否接受货到付款
  89.             </div>
  90.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  91.               是否接受电子钱包或移动支付
  92.             </div>
  93.           </div>
  95.           <div style="margin-left: 20px;">
  96.             <div>
  97.               <h4>签订合同</h4>
  98.             </div>
  99.             <div style="color: #B0B1B0; font-size: 12px;">
  100.               合同都包括哪些主要内容
  101.             </div>
  102.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  103.               合同中的违约责任
  104.             </div>
  105.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  106.               合同中的纠纷和争议
  107.             </div>
  108.           </div>
  109.          
  110.           <div style="margin-left: 20px;">
  111.             <div>
  112.               <h4>其他问题</h4>
  113.             </div>
  114.             <div style="color: #B0B1B0; font-size: 12px;">
  115.               有机农产品与天然农产品有...
  116.             </div>
  117.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  118.               有机农业是否对环境更友好
  119.             </div>
  120.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  121.               如何验证有机农产品的认证...
  122.             </div>
  123.           </div>
  125.           <div style="margin-left: 20px;">
  126.             <div>
  127.               <h4>其他事项</h4>
  128.             </div>
  129.             <div style="color: #B0B1B0; font-size: 12px;">
  130.               产品质量安全相关问题解答
  131.             </div>
  132.             <div style="color: #B0B1B0;margin-top: 10px; font-size: 12px;">
  133.               产品退款问题解答
  134.             </div>
  135.           </div>
  137.           <div style="margin-left: 60px;">
  138.             <img src="img/ewm.png" style="width: 100px; margin-top: 20px;" />
  139.           </div>
  140.           <div style=" margin-top: 50px; margin-left: 10px;">
  141.             微信扫一扫，<br/>优惠多多！
  142.           </div>
  144.         </div>
  146.         <div style="text-align: center; color: white; margin-top: 40px;">
  147.           联系我们 | 隐私保护 | 关于我们 | 支付方式 | 法律申明 | 新闻活动 | 订单查询
  148.         </div>
  149.         <div style="text-align: center; color: white; margin-top: 20px;">
  150.           智农小组 备案号:琼ICP备 00000000号-0 咨询电话:400-0000-000  地址:海南 琼海/海南软件职业技术学院计算机与人工智能学院
  151.         </div>
  152.         <div style="text-align: center; margin-top: 20px;">
  153.           <img src="img/footer.png" style="width: 500px;" />
  154.         </div>
  155.         <hr />
  156.         <div style="text-align: center; margin-top: 20px;">
  157.           友情链接:
  158.           <span style="margin-left: 10px;">农业旅游网</span>
  159.           <span style="margin-left: 10px;">农业口碑网</span>
  160.           <span style="margin-left: 10px;">农业旅游攻略</span>
  161.           <span style="margin-left: 10px;">智慧农业网</span>
  162.           <span style="margin-left: 10px;">侠侣周边游</span>
  163.           <span style="margin-left: 10px;">周末农场</span>
  164.           <span style="margin-left: 10px;">海南天气</span>
  165.           <span style="margin-left: 10px;">三农有机</span>
  166.           <span style="margin-left: 10px;">三农有机</span>
  167.           <span style="margin-left: 10px;">三农有机</span>
  168.           <span style="margin-left: 10px;">三农有机</span>
  169.           <span style="margin-left: 10px;">三农有机</span>
  170.           <span style="margin-left: 10px;">三农有机</span>
  171.         </div>
  172.       </div>
  173.     </div>
  175.     <script src="js/my-bundle.min.js"></script>
  176.   </body>
  177. </html>
复制代码
源码下载

HTML5大作业三农有机，农产物，农庄，农旅网站源码（源码） 点击下载


万套模板，程序开辟，在线开辟，在线沟通



  • 专业后端大佬在线沟通需求开辟
  • 专业前端大佬在线沟通需求开辟
  • 专业网站整套大佬在线沟通需求开辟
  • 专业毕业设计大佬在线沟通需求开辟
  • 专业大作业大佬在线沟通需求开辟
  • 【优惠运动】专属定制，程序在线开辟
   --------------- 业精于勤，荒于嬉 ---------------         

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

小秦哥

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表