web前端大作业-乡村扶贫、乡村振兴

news2024/10/10 4:27:49

文章目录

    • 代码分析
    • 页面截图
    • 代码连接

代码分析

代码结构
在这里插入图片描述
主页index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header></header>
    <nav id="main">
        <ul>
            <li class="logo"><a href="#">家乡</a></li>
            <li><a href="javascript:;" style="color: black;">主页</a></li>
            <li><a href="./page/tour.html">旅游观光</a></li>
            <li><a href="./page/village.html">示范乡镇</a></li>
            <li><a href="./page/ecology.html">生态环保</a></li>
            <li><a href="./page/agriculture.html">现代农业</a></li>
            <li><a href="./page/human.html">人文精神</a></li>
        </ul>
    </nav>
    <div class="outer">
        <div class="little-nav">
            <div class="left">
                <i>县乡频道:</i>
                <a href="javascript:;">冢头镇</a>
                <span>|</span>
                <a href="javascript:;">堂街镇</a>
                <span>|</span>
                <a href="javascript:;">长桥镇</a>
                <span>|</span>
                <a href="javascript:;">黄道镇</a>
                <span>|</span>
                <a href="javascript:;">白庙乡</a>
                <span>|</span>
                <a href="javascript:;">渣元乡</a>
                <span>|</span>
                <a href="javascript:;">李口乡</a>
                <span>|</span>
                <a href="javascript:;">广阔天地乡</a>
                <span>|</span>
            </div>
            <div class="right">
                <div class="search">
                    <input type="search" class="sc">
                    <input type="button" value="搜索" class="searchMenu">
                </div>
            </div>
        </div>
        <div class="swipers">
            <div class="wrap">
                <ul class="list">
                    <li class="item active"><img src="./image/swiper4.jpg" alt=""></li>
                    <li class="item"><img src="./image/swiper2.jpg" alt=""></li>
                    <li class="item"><img src="./image/swiper3.jpg" alt=""></li>
                    <li class="item"><img src="./image/swiper1.jpg" alt=""></li>
                    <li class="item"><img src="./image/swiper5.jpg" alt=""></li>
                </ul>
                <ul class="pointList">
                    <li class="point active" data-index=0></li>
                    <li class="point" data-index=1></li>
                    <li class="point" data-index=2></li>
                    <li class="point" data-index=3></li>
                    <li class="point" data-index=4></li>
                </ul>
                <button class="btn" id="leftBtn">
                    < </button>
                        <button class="btn" id="rightBtn"> > </button>
            </div>
            <div class="news">
                <div class="top">
                    <span>|</span>新农村建设动态
                </div>
                <div class="newMain">
                    <ul>
                        <li><span>></span> [郏县白庙乡] 专车迎接高校返乡学生</li>
                        <li><span>></span> [郏县堂街镇] 小篱笆围出“生态宜居星”</li>
                        <li><span>></span> [郏县白庙乡] 百亩洋葱喜获丰收 订单销售抢购一空</li>
                        <li><span>></span> [郏县冢头镇] 电商助农按下乡村振兴快进键</li>
                        <li><span>></span> [郏县冢头镇] 书法艺术交流会启动仪式举行</li>
                        <li><span>></span> [郏县长桥镇] 着力打造特色农业全链条式产业体系</li>
                        <li><span>></span> [郏县渣元乡] 人居环境整治赋能乡村振兴</li>
                        <li><span>></span> [郏县白庙乡] “文明幸福星”冉冉升起</li>
                        <li><span>></span> [郏县堂街镇] 点亮“文明幸福星” 凝心聚力创“五星”</li>
                        <li><span>></span> [郏县薛店镇] 旅游兴村大变身</li>
                        <li><span>></span> [郏县李口镇] 下好特色“产业棋” 争创产业兴旺星</li>
                        <li><span>></span> [郏县黄道镇] 专车护航襄县学生返回家乡</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="report">
            <div class="top"><span>|</span>新农村建设简报</div>
            <div class="reports">
                <div class="text">
                    <p>郏县总面积737平方公里，辖8镇5乡2个街道办事处，377个行政村，总人口61万。2008年10月，按照平顶山市委、市政府提出的“确定中心村、整合自然村、抓好示范村”的要求，全县规划了83个中心村（新型农村社区），2012年年底调整为78个。
                    </p>
                    <p>郏县新农村建设工作于2008年下半年开始启动，2010年底先期启动28个（县委书记、县长和13个乡镇党委书记分包的各启动2个）；2011年，全县中心村启动数量累计达到45个；2012年底，全县启动社区数量达到了61个。截止2013年10月底，全县累计启动新型农村社区72个（还有6个暂未启动），全县启动社区总数占规划社区总数的92%；开工建设新民居近1.4万户（套），配套设施按照规划正逐步实施；累计硬化道路7.6万米，修下水道7.8万米，铺设供水管道6.8万米，栽植绿化树4.2万棵，绿化面积5.2万平米，安装路灯803盏，建设社区学校（幼儿园）15个、卫生服务中心28个、污水处理厂6个；连年来累计投入省、市、县财政资金2.5亿元，带动社会投资近17个亿。</p>
                    <p>2022年以来，郏县对新型农村建设投入了更多的资源和资金，其中多个新农村收益，先后建立了丹江缘·马湾移民小镇景区、蓝河古渡景区、青龙湖景区重构版、文庙景区重构版等等</p>
                    <p>郏县的新型农村社区建设工作已成为展示郏县对外形象的一张“名片”。</p>
                </div>
            </div>
        </div>
        <div class="people">
            <div class="top"><span>|</span>新农村建设图展</div>
            <div class="show">
                <div>
                    <div class="imgs"><img src="./image/show1.jpg" alt=""></div>
                    <div class="bomttom"><p>星源社区文化广场</p></div>
                </div>
                <div class="con">
                    <div class="imgs"><img src="./image/show2.jpg" alt=""></div>
                    <div class="bomttom"><p>星源社区新型农村社区 新景</p></div>
                </div>
                <div class="con">
                    <div class="imgs"><img src="./image/show3.jpg" alt=""></div>
                    <div class="bomttom"><p>姚庄特色景观引人流连忘返</p></div>
                </div>
                <div>
                    <div class="imgs"><img src="./image/show4.jpg" alt=""></div>
                    <div class="bomttom"><p>青龙湖新农村被评为“省级文明社区”</p></div>
                </div>
                <div class="con">
                    <div class="imgs"><img src="./image/show5.jpg" alt=""></div>
                    <div class="bomttom"><p>青龙湖新农村风貌</p></div>
                </div>
                <div class="con">
                    <div class="imgs"><img src="./image/show6.jpg" alt=""></div>
                    <div class="bomttom"><p>丹江缘·马湾移民小镇俯瞰图</p></div>
                </div>
            </div>
        </div>
        <div class="banner">
            <img src="./image/banner1.png" alt="">
        </div>

    </div>
    <footer>
        <!-- <p>郏县新农村建设就是“中”</p> -->
        <div class="footer">
            <p>“农村是一个广阔的天地，在那里是可以大有作为的。”</p>
            <p>———————— 1955年，毛泽东同志曾为郏县广阔天地乡（原大李庄乡）写下的光辉批示</p>
        </div>
    </footer>
    <script src="./js/nav.js"></script>
    <script src="./js/swiper.js"></script>
</body>

</html>


const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;

function fixNav() {
  if (window.scrollY >= topOfNav) {
    // document.body.style.paddingTop = nav.offsetHeight + 'px';
    document.body.classList.add('fixed-nav');
  } else {
    document.body.classList.remove('fixed-nav');
    document.body.style.paddingTop = 0;
  }
}
window.addEventListener('scroll', fixNav);

登录js代码

const login = document.querySelector(".log");
const userName = document.querySelector(".userName");
const pass = document.querySelector(".passW");

login.addEventListener("click", function() {
    if (userName.value !== '1219') {
        alert("用户名错误");
    } else {
        alert("登录成功！");
        window.location = "forum.html";
    }
});
const mobileInput = document.querySelector('.mobile-input');
const errorMessage = document.querySelector('p.error');
const submit = document.querySelector('.submit');
const agree = document.querySelector('.agree');

mobileInput.addEventListener('input', function() {
    //校验手机号码格式是否正确
    if (mobileInput.value.length != 11 && mobileInput.value != '' && mobileInput.value % 100000000000 != 1) {
        errorMessage.innerHTML = '手机号码格式不正确';
    }
});

submit.addEventListener('click', function() {
    if (agree.checked == true) {
        alert("注册成功！");
        window.location = "index.html";
    } else {
        alert("请阅读并勾选条款");
    }
});

展示农业

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/agriculture.css">
</head>

<body>
    <header></header>
    <nav id="main">
        <ul>
            <li class="logo"><a href="#">郏 县</a></li>
            <li><a href="../index.html">主页</a></li>
            <li><a href="./tour.html">旅游观光</a></li>
            <li><a href="./village.html">示范乡镇</a></li>
            <li><a href="./ecology.html">生态环保</a></li>
            <li><a href="javascript:;" style="color: black;">现代农业</a></li>
            <li><a href="./human.html">人文精神</a></li>
        </ul>
    </nav>

    <div class="outer">
        <div class="nav">
            <p><span>|</span> 您当前的位置: 首页 > 现代农业</p>
        </div>
        <div class="imgs">
            <div class="item">
                <div class="title">葡萄种植</div>
                <div class="img"><img src="../image/agriculture/grape.png" alt=""></div>
                <div class="text">上图为郏县白庙乡土地庙新村芝田葡萄采摘园</div>
            </div>
            <div class="item">
                <div class="title">大棚蔬菜</div>
                <div class="img"><img src="../image/agriculture/blm.png" alt=""></div>
                <div class="text">上图为白龙庙新村蔬菜种植园种植的上海青</div>
            </div>
            <div class="item">
                <div class="title">智慧方舱</div>
                <div class="img"><img src="../image/agriculture/gzx.png" alt=""></div>
                <div class="text">上图为马湾智慧方舱生态园种植的猴脑菌</div>
            </div>
            <div class="item">
                <div class="title">莲藕种植</div>
                <div class="img"><img src="../image/agriculture/lo.png" alt=""></div>
                <div class="text">上图为马湾白藕种植区种植的莲藕</div>
            </div>
            <div class="item">
                <div class="title">烟叶种植</div>
                <div class="img"><img src="../image/agriculture/yy.png" alt=""></div>
                <div class="text">上图为张庄新村生态种植区种植的优质烟叶</div>
            </div>
            <div class="item">
                <div class="title">现代农业产业园</div>
                <div class="img"><img src="../image/agriculture/mtl.png" alt=""></div>
                <div class="text">上图为马头岭现代农业产业园</div>
            </div>
        </div>
        <div class="describe">
            <div class="des">
                <p>自从响应新农村建设政策以来，郏县通过这种契机加速推进现代农业的建设。</p>
                <p>郏县把推进新型农业现代化作为全县“四化建设”的重点工作之一，出台了《加快现代农业园区建设实施意见》，统筹安排涉农项目资金优先用于现代农业园区建设，并采取以奖代补的办法，不断加大县财政对产业园区建设的扶持力度。同时，把现代农业园区建设纳入13个乡镇和县直有关部门的年度目标管理考核，严格奖惩。目前，全县现代农业园区累计投入4.3亿元，总数达到38个，总面积达4.4万亩，带动农户1.9万人。长桥镇聚丰现代农业示范园已累计投入资金650万元，建设春秋蔬菜大棚186座，入社社员68户123人，园区实现效益1500万元以上。
                </p>
                <p>开展了百名科技人员包百村和新型职业农民培训活动，调整了科技包村人员，制订了全年包村工作指导计划，编制了每月技术明白卡，并组织开展了科技包村人员技术培训，提升了科技包村人员的技术水平和技术指导、服务能力。通过开展送科技下乡活动，该县发送科技书籍、技术资料等20000余份，解决农民病虫害综合防治、识别假冒伪劣农资等疑难问题20多项，培训新型职业农民300人。
                </p>
                <p>快速推动现代农业发展吸引了越来越多的新村农民的参与！</p>
            </div>
        </div>
    </div>
    <footer>
        <!-- <p>郏县新农村建设就是“中”</p> -->
        <div class="footer">
            <p>“农村是一个广阔的天地，在那里是可以大有作为的。”</p>
            <p>———————— 1955年，毛泽东同志曾为郏县广阔天地乡（原大李庄乡）写下的光辉批示</p>
        </div>
    </footer>
    <script src="../js/nav.js"></script>
</body>

</html>

页面截图

主页:
在这里插入图片描述
视频播放:
在这里插入图片描述
示范乡镇
在这里插入图片描述
现代农业
在这里插入图片描述
人文精神
在这里插入图片描述

代码连接

链接: https://pan.baidu.com/s/1zFVU4tALg_eUQ2UcdroKQA?pwd=su4m 提取码: su4m
–来自百度网盘超级会员v3的分享

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1863048.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于RabbitMQ原理的自定义消息队列实现

基于RabbitMQ原理的自定义消息队列实现

文章目录 1. 什么是消息队列2. 需求分析2.1. 核心概念12.2. 核心概念22.3. 核心API2.4. 交换机类型2.5. 持久化2.6. 网络通信2.7. 总结 3. 创建核心类3.1. Exchange3.2. MSGQueue3.3. Binding3.4. Message3.5. 数据库操作3.5.1. 建表操作3.5.2. 交换机操作3.5.3. 队列操作3.5.4…
阅读更多...
力扣62 不同路径

力扣62 不同路径

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 输入&…
阅读更多...
智能终端-Qt-课程设计分析

智能终端-Qt-课程设计分析

这个是几个简单的Qt的智能终端分享&#xff0c;其是我们上课的作业&#xff0c;我就在老师要求的基础上去进行了延申了一点的&#xff0c;下面看做了哪些东西 这个是所有的点开之后的页面&#xff0c;我做到了那些家居和那个按钮达到了同步的效果&#xff0c;这点其实还是不错…
阅读更多...
仿真模拟--静态浮动路由

仿真模拟--静态浮动路由

目录 静态路由 浮动路由 静态路由 浮动路由
阅读更多...
Linux CentOS 环境 MySQL 主从复制集群搭建

Linux CentOS 环境 MySQL 主从复制集群搭建

环境说明 MySQL版本8.4.0 操作系统 Linux CentOS 7.9 官网文档 https://dev.mysql.com/doc/refman/8.4/en/replication-configuration.html 以下代码片段中带分号都是在MySQL命令行( mysql -uroot -p)中执行 1. 首先在两个节点上安装数据库 参考 Linux CentOS安装MySQL8.0 …
阅读更多...
如何把图片转换成pdf格式？图片转PDF方法分享

如何把图片转换成pdf格式？图片转PDF方法分享

如何把图片转换成pdf格式&#xff1f;图片转换为PDF格式的重要性不言而喻。PDF文件不仅能够在各种操作系统和设备上保持一致的显示效果&#xff0c;还能确保图片内容的清晰度和质量不受损害。此外&#xff0c;PDF格式支持加密和权限设置&#xff0c;可以保护图片内容不被轻易篡…
阅读更多...
C#——SortedList 排序列表详情

C#——SortedList 排序列表详情

SortedList 排序列表 SortedList 类用来表示键/值对的集合&#xff0c;这些键/值对按照键值进行排序&#xff0c;并且可以通过键或索引访问集合中的各个项。 我们可以将排序列表看作是数组和哈希表的组合&#xff0c;其中包含了可以使用键或索引访问各项的列表。如果您使用索…
阅读更多...
centOS 7安装gitlab

centOS 7安装gitlab

主要参考&#xff1a; CentOS-7 下 GitLab 安装部署教程_centos7 安装gitlab-CSDN博客 但是由于我本身服务器配置很小(2核2G)&#xff0c;所以运行的时候报错&#xff1a; execute[clear the gitlab-rails cache] (gitlab::gitlab-rails line 561) had an error: Mixlib::Sh…
阅读更多...
【Linux】静态库、动态库

【Linux】静态库、动态库

动静态库里面包含的是源文件通过汇编阶段生成的后缀为.o的可重定位目标文件。我们在使用C语言&#xff0c;包含一个stdio.h头文件就可以使用scanf方法&#xff0c;其实都是系统调用了相应的头文件和库&#xff0c;库里面有开发者已经写好各种方法。也就是说我们在使用C语言时&a…
阅读更多...
laravel的日志使用说明

laravel的日志使用说明

文章目录 了解系统的默认支持多个通道时它们的关系如何使用驱动 了解系统的默认支持 Laravel 日志基于「 通道 」和 「 驱动 」的。那么这个通道是干嘛的&#xff1f;驱动又是干嘛的&#xff1f; 通道 &#xff1a; 1.它表示了某种日志格式化的方式&#xff08;或可理解为某个…
阅读更多...
正版软件 | 『闪点清单』— 您的智能悬浮任务管理专家

正版软件 | 『闪点清单』— 您的智能悬浮任务管理专家

在繁忙的日常中&#xff0c;我们经常需要一个既能随时提醒&#xff0c;又不会打扰我们的待办事项管理工具。『闪点清单』&#xff0c;一款简约而不简单的悬浮清单软件&#xff0c;为您带来全新的任务管理体验。 设计简约&#xff0c;功能强大 『闪点清单』以其简约的设计和强大…
阅读更多...
【2024最新版】Eclipse安装配置全攻略：图文详解

【2024最新版】Eclipse安装配置全攻略：图文详解

目录 1. Eclipse介绍1.1 背景1.2 主要特点和功能1.3 版本发布1.4 优势与劣势 2. 下载Eclipse3. 安装Eclipse4. 启动Eclipse 1. Eclipse介绍 Eclipse是一个开源的、基于Java的可扩展开发平台&#xff0c;主要用于Java开发者&#xff0c;但也支持其他语言如C/C、PHP、Python等。…
阅读更多...
Webpack: 前端资深构建工具

Webpack: 前端资深构建工具

概述 如果你是一名前端工程师&#xff0c;相信之前或多或少听过、用过 Webpack 这一构建工具&#xff0c;它能够融合多种工程化工具&#xff0c;将开发阶段的应用代码编译、打包成适合网络分发、客户端运行的应用产物如今&#xff0c;Webpack 已经深深渗入到前端工程的方方面面…
阅读更多...
OCR训练和C#部署英文字符训练

OCR训练和C#部署英文字符训练

PaddleOCR是一个基于飞桨开发的OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;系统。其技术体系包括文字检测、文字识别、文本方向检测和图像处理等模块。以下是其优点&#xff1a; 高精度&#xff1a;PaddleOCR采用深度学习算法进行训练…
阅读更多...
基于Cisco的校园网络拓扑搭建

基于Cisco的校园网络拓扑搭建

特此说明&#xff1a;请先看评论区留言哦~ 一、基础配置 1.新建拓扑图 2.服务器配置 3.PC端配置 4.核心交换机配置 a.CORE-S1 Switch>enable Switch#configure terminal Switch(config)#hostname CORE-S1 CORE-S1(config)#vlan 10 CORE-S1(config-vlan)#vlan 20 CO…
阅读更多...
【低功耗设计】功耗模型和PTPX功耗分析流程

【低功耗设计】功耗模型和PTPX功耗分析流程

本文目录 功耗的构成1.静态功耗2.动态功耗1&#xff09;内部功耗&#xff08;internal power&#xff09;2&#xff09;翻转功耗&#xff08;switch power&#xff09; 功耗的分析功耗分析流程averaged power analysistime-based power analysis 从芯片设计到芯片量产的过程中功…
阅读更多...
论文导读 | Manufacturing Service Operations Management近期文章精选

论文导读 | Manufacturing Service Operations Management近期文章精选

编者按 在本系列文章中&#xff0c;我们梳理了顶刊Manufacturing & Service Operations Management5月份发布有关OR/OM以及相关应用的文章之基本信息&#xff0c;旨在帮助读者快速洞察行业/学界最新动态。 推荐文章1 ● 题目&#xff1a;Robust Drone Delivery with Weath…
阅读更多...
Excel 宏录制与VBA编程 —— 13、Excel内置函数的调用

Excel 宏录制与VBA编程 —— 13、Excel内置函数的调用

Excel内置函数的调用 关注 笔者 - jxd
阅读更多...
Web渗透：php反序列化漏洞

Web渗透：php反序列化漏洞

反序列化漏洞&#xff08;Deserialization Vulnerability&#xff09;是一种在应用程序处理数据的过程中&#xff0c;因不安全的反序列化操作引发的安全漏洞&#xff1b;反序列化是指将序列化的数据&#xff08;通常是字节流或字符串&#xff09;转换回对象的过程&#xff0c;如…
阅读更多...
YOLOv10使用教程及导读

YOLOv10使用教程及导读

首先推荐一下我的YOLOv8/v10项目&#xff0c;仅需一个v8的钱&#xff08;69.9&#xff09;&#xff0c;付费进群&#xff0c;即可获取v8/v10的全部改进&#xff0c;欢迎进群。 1 YOLOv10简介 论文链接&#xff1a;https://arxiv.org/pdf/2405.14458 官方代码链接&#xff1a;ht…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023