基于HTML的环境网站设计 HTML+CSS环保网站项目实现带设计说明psd

原创

IT司马青衫

发布于 2022-08-16 10:23:36

1.4K0

发布于 2022-08-16 10:23:36

文章被收录于专栏：html5期末大作业

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】

🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】

🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】

🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

一、👨‍🎓网站题目

🌲环境保护、🌳 保护地球、🌴 校园环保、🌵垃圾分类、🚵🏼绿色家园、等网站的设计与制作。

<hr>

二、✍️网站描述

⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。<hr>

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、🌐网站效果

<hr>

五、🔧 网站代码

🧱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;
	}

<hr>

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。