环境主题静态HTML网页作业作品大学生环保网页设计制作成品简单DIV CSS布局网站

news/2024/5/7 22:15:18/文章来源:https://blog.csdn.net/qq_365392777/article/details/127029793

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

G08BG-环保带设计说明psd（4页）

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>保护环境 共享文明</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mian">
<div class="top">
<div class="logo">
<img src="images/logo.png" />
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="jieshao.html">环保介绍</a></li>
<li><a href="cuoshi.html">环保措施</a></li>
<li><a href="jieri.html">相关节日</a></li>
</ul>
</div>
<div class="content">
<div class="ibox1">
<div class="ibox1-left"><img src="images/img2.jpg" /></div>
<div class="ibox1-right">
<div class="title"><h1>环保介绍</h1></div>
<P>环境保护一般是指人类为解决现实或潜在的环境问题，协调人类与环境的关系，保护人类的生存环境、保障经济社会的可持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的，也有经济的、宣传教育的等。</P>
<p>十八届五中全会会议提出：加大环境治理力度，以提高环境质量为核心，实行最严格的环境保护制度，深入实施大气、水、土壤污染防治行动计划，实行省以下环保机构监测监察执法垂直管理制度。</p>
<p>环境保护（environmental protection），简称环保，涉及的范围广、综合性强，它涉及自然科学和社会科学的许多领域等......</p>
<div class="more"><a href="jieshao.html">点击查看更多</a></div>
</div>
</div>
<div class="ibox2">
<div class="title"><h1>环境问题</h1></div>
<div class="ibox2-ner">
<div class="bx">
<div class="xuhao">1</div>
<h2>土地荒漠化是我国当前的生态环境问题之一，它恶化生态环境，破坏生存条件。</h2>
<img src="images/img4.jpg" />
</div>
<div class="bx">
<div class="xuhao">2</div>
<h2>大气污染是大气中一些物质的含量达到有害的成都以至于破坏生态系统，对人类造成危害</h2>
<img src="images/img5.jpg" />
</div>
<div class="bx">
<div class="xuhao">3</div>
<h2>水体污染是指进入水体的污染物质超过了水体的环境容量或水体的自净能力。</h2>
<img src="images/img6.jpg" />
</div>
<div class="bx">
<div class="xuhao">4</div>
<h2>固体废物污染是指固体废物不加妥善处理，将会污染大气、水体和土壤，危害人体健康。</h2>
<img src="images/img7.jpg" />
</div></div>
</div></div>
<div class="foot">保护环境  共享文明</div></div>
</body>
</html>

🏠CSS样式代码

@charset "utf-8";
/* CSS Document */body {margin: 0 auto;font-size: 14px;font-family: "微软雅黑",arial;line-height: 22px;background:#e7f8d5;
}div,p,input,ul,li,h1,h2,h3,h4 {height: auto;margin: 0;padding: 0;vertical-align: middle;
}li {list-style: none;
}img {border: 0;margin: 0;padding: 0;
}a {color: #333;text-decoration: none;
}a:hover {color: #c60707;text-decoration: none;overflow: hidden;
}
.mian{width:1100px;height:auto;overflow:hidden;margin:0 auto;}
.top{height:335px;background:url(../images/img1.jpg);background-repeat: no-repeat;}
.logo{width:648px;height:77px;padding-top:75px;margin:0 auto;}
#nav{height:45px;background:#3c7301;	}
#nav ul{padding:0px;}
#nav ul li{width:275px;text-align:center;height:45px;float:left;}
#nav ul li a{display:block;width:275px;height:45px;line-height:45px;color:#FFF;font-size:18px;}
#nav ul li a:hover{background:#5dae05;}
.content{height:auto;overflow:hidden;background:#FFF;padding:20px;}
.ibox1{height:435px;}
.ibox1-left{width:496px;float:left;margin-right:20px;}
.ibox1-right{width:544px;float:left;}
.ibox1-right p{line-height:30px;font-size:14px;text-indent:2em;margin-bottom:10px;}
.title{padding-left:20px;height:45px;border-bottom:#3c7301 1px solid;background:url(../images/img3.jpg) no-repeat;margin-bottom:20px;}
.title h1{font-size:18px;color:#3c7301;line-height:40px;}
.more{height:45px;line-height:45px;width:207px;text-align:center;margin:0 auto;background:#3c7301;}
.more a{color:#FFF;font-size:14px;}
.ibox2{height:590px;}
.ibox2-ner{height:450px;padding-top:20px;}
.bx{width:217px;float:left;margin:0px 20px;}
.bx h2{color:#0e0e0e;line-height:25px;font-size:14px;text-align:center;margin-bottom:15px;font-weight:normal;}	
.xuhao{width:30px;height:30px;margin:0 auto;background:url(../images/xuh.png) no-repeat;line-height:30px;text-align:center;color:#FFF;font-size:16px;margin-bottom:20px;	}
.foot{height:110px;background:#3c7301;line-height:110px;text-align:center;font-size:14px;color:#FFF;}
.tit{height:55px;line-height:55px;text-align:center;font-size:20px;font-family:"微软雅黑";}
.content p{line-height:25px;font-size:14px;text-indent:2em;margin-bottom:10px;}
.centimg{display:block;margin:0 auto;margin-top:10px;margin-bottom:10px;}
hr{margin-bottom:30px;}
.cuos{height:170px;background:#eae9e9;padding:15px;margin-bottom:30px;}
.cuos img{float:left;margin-right:15px;}
.jies{width:745px;float:left;}
.jies h3{line-height:35px;font-size:16px;font-weight:normal;}
.jies p{line-height:25px;font-size:14px;color:#999;text-indent:0px;}
.jieri{height:590px;}
.jieribox{width:237px;height:216px;float:left;margin:0px 14px;margin-bottom:30px;}
.jieribox h4{height:42px;line-height:42px;background:#e2e2e2;text-align:center;font-size:14px;font-weight:normal;}