HTML网页设计制作 dreamweaver网页源代码 垃圾分类环保主题网站制作
🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻