🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示 四、💒 网站代码🧱HTML结构代码🏠CSS样式代码 五、🎁更多源码二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
G19JP 环保保护环境 页面4个
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="main" ><div class="content12"><div class="daohang"><ul><li class="active"><a href="index.html">首页</a></li><li ><a href="jieshao.html">介绍</a></li><li ><a href="zhuyaoneirong.html">主要内容</a></li><li ><a href="huanbaomingyan.html">环保名言</a></li></ul></div></div><div class="clear"></div><div class="content12"><div class="guanggaotupian"><div class="img"><img src="images/1.jpg"></div></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title"><div class="line"></div><div class="stitle"><div class="sstitle"><div class="h2">主要内容</div><span>ZHUYAONEIRONG</span></div></div></div></div><div class="zynr"><ul><li><div class="img"><img src="images/2.jpg"></div><div class="text"><div class="title">防止污染</div><div class="clear"></div><div class="desc">防止由生产和生活活动引起的环境污染、化学污染，包括防治工业生产排放的废水、废气、废渣、粉尘、放射性物质以及产生的噪声、振动、恶臭和电磁微波辐射，交通运输活动产生的有害气体、液体、噪声，海上船舶运输排出的污染物，工农业生产和人民生活使用的有毒有害化学品，城镇生活排放的烟尘、污水和垃圾等造成的污染。</div></div></li><li><div class="img"><img src="images/3.jpg"></div><div class="text"><div class="title">防止破坏</div><div class="clear"></div><div class="desc">防止由建设和开发活动引起的环境破坏，包括防止由大型水利工程、公路干线、大型港口码头、机场和大型工业项目等工程建设对环境造成的污染和破坏，农垦和围湖造田活动、海上油田、海岸带和沼泽地的开发、森林和矿产资源的开发对环境的破坏和影响，新工业区、新城镇的设置和建设等对环境的破坏和污染。</div></div></li></ul></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title"><div class="line"></div><div class="stitle"><div class="sstitle"><div class="h2">环保名言</div><span>HUANBAOMINGYAN</span></div></div></div></div><div class="hbmy"><div class="list"><img src="images/4.jpg" class="img"><img src="images/5.jpg" class="img"></div><div class="desc"><br><br>手下留情，足下留青，爱护环境，人人有责。<br><br>植树造林，功在千秋。<br><br>爱祖国，护绿化，保清洁，爱家园。<br><br>保持地球生态平衡，就是保护人类自身。<br><br>人人为环保，环保为人人。<br><br>人人关心环境质量，人人参与环境保护。<br><br>珍惜资源，永续利用。<br><br>保护环境光荣，污染环境可耻。<br><br>依靠科技进步，促进环境保护。<br><br>提高环境意识，保护美好家园。</div></div></div><div class="clear"></div><div class="content12"><div class="taitou"><div class="title"><div class="line"></div><div class="stitle"><div class="sstitle"><div class="h2">介绍</div><span>JIESHAO</span></div></div></div></div><div class="js"><div class="text"><div class="list"><img src="images/6.jpg" class="img" ></div>环境保护就是指人类为解决现实或潜在的环境问题，协调人类与环境的关系，保障经济社会的持续发展而采取的各种行动的总称。<br><br>其方法和手段有工程技术、行政管理、也有法、经济、宣传教育……<br><br>保护环境是人类有意识地保护自然资源并使其得到合理的利用，防止自然环境受到污染和破坏；对受到污染和破坏的环境做好综合的治理，以创造出适合于人类生活、工作的环境，协调人与自然的关系，让人们做到与自然和谐相处的概念。</div><div class="clear"></div><div class="slist"><img src="images/7.jpg" class="simg" ></div></div></div><div class="clear"></div><div class="content12"><div class="dibu"><div class="desc">保护环境 </div></div></div><div class="clear"></div></div></body></html>
🏠CSS样式代码
@charset "utf-8";*{margin:0;padding:0;}body{margin:0 auto}.clear{clear:both;}a{color:#333;text-decoration:none;}a:hover{text-decoration:underline;}li{list-style-type:none;}img{width:auto;max-width:100%;}.main{width:1200px;margin:0 auto;overflow:visible;}.content12{width:1200px;margin:0 auto;}.daohang ul{width:1200px;background:#660066;float:left;}.daohang ul li{float:left;width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }.daohang ul li a{color:#fff;}.daohang li:hover a{color:#fff;}.daohang ul li.active{}.guanggaotupian{text-align:center;}.dibu .desc{text-align:center;color:#ffffff;background:#660066;padding:20px 0px;margin-top:10px;}.dibu img{}.jieshao{width:1200px;}.jieshao .text{float:left;margin-top:20px;margin-bottom:20px;}.jieshao .img{width:580px;padding:0px 5px;float:left;}.jieshao img{width:580px;height:410px;}.jieshao .slist{text-align:center;}.jieshao .simg{height:400px;width:1160px;margin:10px; float:left;}.jieshao .desc{width:580px;height:400px;overflow:hidden;float:left;text-align:left;padding:5px;}.zhuyaoneirongliebiao ul{width:1200px;}.zhuyaoneirongliebiao ul li{width:1180px;padding:10px;float:left;}.zhuyaoneirongliebiao .active{background:#660066;}.zhuyaoneirongliebiao .active .title{color:#ffffff;}.zhuyaoneirongliebiao .active .desc{color:#ffffff;}.zhuyaoneirongliebiao ul li img{width:344px;padding:5px;height:200px;float:left;}.zhuyaoneirongliebiao ul li .title{margin:10px 0px;font-weight:bold;font-size:16px;}.zhuyaoneirongliebiao ul li .desc{width:796px;text-align:left;float:left;padding:5px;margin-left:20px;}.zhuyaoneirongliebiao ul li button{display:block;text-align:left;padding:5px 10px;margin-top:20px;}.huanbaomingyan {width:1200px; text-align: justify;}.huanbaomingyan .text{padding:10px;}.huanbaomingyan .img{text-align:center;}.huanbaomingyan .desc{padding:10px;text-align:left;float:left;text-align: justify;}.huanbaomingyan .list{text-align:center;}.huanbaomingyan .img{width:1050px;margin:5px auto;}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
