文章目录
代码分析
代码结构
主页index.html
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>
javascript
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代码
javascript
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("请阅读并勾选条款");
}
});展示农业
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/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的分享