Web大学生网页作业成品——环保垃圾分类网站设计与实现(HTML+CSS+JavaScript) web前端开发技术 web课程设计 网页规划与设计

于 2024-06-23 10:22:06 发布
阅读量1.5k 收藏 28
点赞数 7
分类专栏： 网页设计与制作 文章标签： dreamweaver web期末网页作业 web前端 web前端期末大作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514421/article/details/128404186
版权

🎀 精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

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

二、✍️网站描述

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

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

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

三、📚网站介绍

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

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

四、🌐网站效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、🔧 网站代码

🧱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><a href="index.html">首页</a>
</li>
  
    <li><a href="fazhanqingkuang.html">发展情况</a></li>
	
    <li><a href="chanshengyuanyin.html">产生原因</a></li>
	
    <li><a href="zhuyaowenti.html">主要问题</a></li>
	
    <li><a href="xiangguanshipin.html">相关视频</a></li>
	 
   </ul>
</div>
</div>
<div class="clear"></div>

<div  class="content12">
</div>
<div class="clear"></div>

<div  class="content12">
<div class="lbgg">

<div class="sub_box">
	
	<div id="p-select" class="sub_nav">
		<div class="sub_more"><a href="javascript:;" onfocus="this.blur()"   style="font-size:12px;">更多>></a></div>
		<div class="sub_no" id="bd1lfsj">
			<ul>
							<li class="show">1</li>
				
							<li >2</li>
				
			 
			</ul>
		</div>
	</div>
	
	<div id="bd1lfimg">
		<div>
			
			<dl class="show">
				<dt><a href="#"><img src="images/1.jpg"></a></dt>
				<dd>
					<h2><a href="#">广告图片1</a></h2>
					<tt><a href="#"></a></tt>
				</dd>
			</dl>
			
			<dl >
				<dt><a href="#"><img src="images/2.jpg"></a></dt>
				<dd>
					<h2><a href="#">广告图片2</a></h2>
					<tt><a href="#"></a></tt>
				</dd>
			</dl>
			 
			
		</div>
	</div>
</div>

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">







<div class="title">
<strong>精彩瞬间</strong> <i>JINGCAISHUNJIAN</i>

 
</div>


     
                               

	 

	  	  </div>
<div class="xiangceliebiao">



<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
</li>
<li>
<div class="img"><img src="images/5.jpg"></div>
</li>
<li>
<div class="img"><img src="images/6.jpg"></div>
</li>
 
</ul>

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">







<div class="title">
<strong>发展情况</strong> <i>FAZHANQINGKUANG</i>

 
</div>


     
                               

	 

	  	  </div>
<div class="fzqk">








<div class="text">
<div class="desc">
<div class="clear"></div>



<br><br><b>立法过程</b><br><br>2019年6月25日，固体废物污染环境防治法修订草案初次提请全国人大常委会审议。草案对“生活垃圾污染环境的防治”进行了专章规定。</div>
<div class="img"><img src="images/7.jpg"></div>

</div>





<div class="clear"></div>
<div class="slist">
<img src="images/8.jpg" class="simg" >
<img src="images/9.jpg" class="simg" >
 
</div>

<div class="clear"></div>













 










</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">







<div class="title">
<strong>产生原因</strong> <i>CHANSHENGYUANYIN</i>

 
</div>


     
                               

	 

	  	  </div>
<div class="csyy">













<div class="text">


<div class="list">
<img src="images/10.jpg" class="img" >
<img src="images/11.jpg" class="img" >
 
</div>




<br><br>

一图了解生活中的垃圾分类
。<br><br>每个人每天都会扔出许多垃圾，在一些垃圾管理较好的地区，大部分垃圾会得到卫生填埋、焚烧、堆肥等无害化处理，而更多地方的垃圾则常常被简易堆放或填埋，导致臭气蔓延，并且污染土壤和地下水。<br><br>垃圾无害化处理的费用是非常高的，根据处理方式的不同，处理一吨垃圾的费用约为一百元至几百元不等。人们大量地消耗资源，大规模生产，大量地消费，又大量地生产着垃圾。
</div>

<div class="clear"></div>
<div class="text">
后果将不堪设想。<br><br>从国外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分构成、产生量，结合本地垃圾的资源利用和处理方式来进行分类。如德国一般分为纸、玻璃、金属和塑料等；澳大利亚一般分为可堆肥垃圾，可回收垃圾，不可回收垃圾；日本一般分为塑料瓶类，可回收塑料、其他塑料、资源垃圾、大型垃圾、可燃垃圾、不可燃垃圾和有害垃圾等等。</div>

 














</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="dibu">

<div class="desc">
垃圾分类 
</div>


</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="jsshijian">


<div class="at-countdown--card pad30">
    <div id="show_time">

    </div>
</div>


</div>
</div>
<div class="clear"></div></div><script type="text/javascript" src="js/js.js"></script>
</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
{
}
.daohang ul{
width:1200px;float:left;
}
.daohang ul li{
float:left;
;
width:100px;height:40px;line-height:40px;text-align:center;padding:10px 0px;
position: relative;
}
.daohang ul li a.active{
color:#000000;}
.daohang ul li a{
color:#000000;}
 
.daohang li:hover a{
color:#000000;}
 
.daohang ul li.active{
}







.sub_box{
width:1200px;
height:500px;position:relative;
overflow:hidden;
}
.sub_box img{
width:1200px;
height:500px;}
#bd1lfimg{
position:relative;
width:1200px;
height:500px;overflow:hidden;
}
#bd1lfimg div{
width:2400px;
margin-left:1196px;
}
#bd1lfimg dl{
width:1200px;
height:500px;position:relative;
overflow:hidden;
float:left;
}
#bd1lfimg dt{
width:1200px;
height:500px;position:absolute;
left:0px;
top:0px;
}
#bd1lfimg dd{
width:1200px;
height:80px;

filter:alpha(Opacity=70);
Opacity:0.7;
position:absolute;
left:0px;
bottom:0px;
}
#bd1lfimg dd h2 {
	height: 25px;
	padding: 5px;
	line-height: 25px;
	overflow: hidden;
}

#bd1lfimg dd h2 a {
	font-size: 14px;
	font-weight: bold;
	co

.zhuyaowentiliebiao table
{
width:1180px;}



.zhuyaowentiliebiao table .img
{
width:580px;height:200px;}
.zhuyaowentiliebiao table .img img
{
width:570px;padding:5px;
height:190px;}

.zhuyaowentiliebiao table   .title{
margin:10px 0px;
font-weight:bold;
font-size:16px;
}

.zhuyaowentiliebiao table   .desc
{
width:580px;text-align:left;padding:5px;
}










.xiangguanshipin
{
text-align:center;
}

video{
    width:1180px;
    height:100%;;
    object-fit:fill; 
	margin:10px;

	
}

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

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

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

在这里插入图片描述

STU学生网页设计
关注
专栏目录
（附源码）计算机毕业设计SSM垃圾分类网站的设计与实现
ssm毕设程序设计
10-25 877
（附源码）计算机毕业设计SSM垃圾分类网站的设计与实现项目运行环境配置：（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat。
html大作业【NBA篮球介绍 22个页面】学生网页设计源码
HTML网页设计
08-21 861
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
基于SpringBoot的“垃圾分类网站”的设计与实现（源码+数据库+文档+PPT)
最新发布
04-07 780
垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员，实现功能包括管理员：首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理，垃圾分类管理员；首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理，用户前台；首页、垃圾分类、垃圾图谱、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面，所以使得整个垃圾分类网站信息管理的过程得以实现。
垃圾分类共享网站的设计与实现（SSM）
毕业作品网站
10-30 845
目 录 摘 要 I Abstract II 第1章 绪论 1 1.1课题背景及意义 1 1.2研究现状 1 1.3研究主要内容 2 第2章 系统开发关键技术介绍 4 2.1 Java技术 4 2.1.1 Java技术简介 4 2.1.2 Java开发平台 5 2.1.3 Java文件组成 5 2.2 MYSQL数据库 5 2.3 HTML简介 6 2.4 B/S结构 7 2.5 SSM框架 7 第3章 系统分析 10 3.1可行性研究 10 3.1.1技术可行性分析 10 3.1.2经济可行性分析 10
html垃圾分类网页制作,基于 HTML5 WebGL 的垃圾分类系统
weixin_35939140的博客
06-19 613
前言垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。垃圾在分类储存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源，垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分、产生量，结...
Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)
08-10
### Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript) #### 一、网站题目 此项目的主题围绕“美食”展开，旨在通过HTML、CSS与JavaScript技术创建一个展示各种美食及其相关信息的静态网站。...
Web大学生网页作业成品——抗击疫情网站设计与实现(HTML+CSS)
08-10
### Web大学生网页作业成品——抗击疫情网站设计与实现(HTML+CSS)详解 #### 一、‍网站题目 本项目的主题围绕“抗击疫情”展开，旨在通过网站的形式表达对抗疫英雄们的敬意以及对疫情期间发生的感人故事进行记录。...
Web大学生网页作业成品——仿腾讯游戏官网网站设计与实现(HTML+CSS+JavaSct).md
08-10
该文档描述了一个专为大学生设计的网页作业项目，其目标是创建一个类似于腾讯游戏官网的网站。这个项目主要使用了HTML、CSS以及JavaScript（简称JS）这三种技术进行开发。整个项目不仅限于静态网页设计，还包括了...
Web大学生个人网页作业成品——学生个人爱好展示网站设计与实现(HTML+CSS).md
08-10
### 知识点一：HTML5与CSS3在个人网页设计中的应用 #### HTML5特点： ...通过这些知识点的学习与实践，可以帮助学生更好地理解Web前端开发的核心概念和技术要点，为进一步深入学习打下坚实的基础。
javaEE做的NBA网站源码
10-22
这是一个用javaEE写的NBA网站，网站有着漂亮的页面设计，还带有sqlserver2005的数据库，只有发布一下就可用。
垃圾分类——web期末作业网页设计（附源码）
PG5的博客
06-01 3306
【代码】垃圾分类——web期末作业网页设计（附源码）
垃圾分类网页制作 垃圾分类网页设计作业 HTML CSS垃圾分类网页模板 大学生垃圾分类网站毕业设计 DW垃圾分类网页模板下载 垃圾分类网页成品代码 环保网页作品下载
STU学生简单网页设计作品分享
12-16 9175
大学生垃圾分类网页制作设计思路知识点应用内容说明代码演示页面效果首页二级页面-图文混排二级页面-图片列表三级图片详情留言表单页面成品下载 设计思路 垃圾分类网页设计作品采用DIV CSS布局制作，首页有导航、BANNER、视频、文字内容、图片列表超链接。 知识点应用 网页背景颜色、视频、留言表单、图片及文字超链接、左右排版、图文混排、无序列表等。 内容说明 三层结构，共11个页面（1个首页、6个二级页面、4个三级页面）网页内容包括：网站首页、产生原因、分类原则、分类意义、垃圾种类、操作流程、在线留言。 代码
基于springboot垃圾分类网站
qq_1406299528的博客
07-30 725
开发语言：Java 框架：springboot JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 数据库工具：Navicat11 开发软件：eclipse/myeclipse/idea Maven包：Maven 垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员，实现功能包括管理员：首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理，垃圾分类管理员；首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理，
Java毕业设计：基于java+springboot的垃圾分类网站
QQ1039692211的博客
01-05 1629
项目介绍 当前全球都在提倡环境保护，现在社会高速发展，我们每个人每天都会产生很多的垃圾，尤其是工业发展到一定阶段之后这些垃圾的种类也越来越多，如果随意丢弃很可能会造成环境污染，尤其是一些电池等重污染垃圾，所以一点要做好垃圾分类，一方面是做好环境保护，另一方面是对可以再次利用的垃圾进行重复利用。 垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员，实现功能包括管理员：首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理，垃圾分类管理员；首页、个人中心、用户管理
HTML+CSS网页设计期末课程大作——运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板
12-24 2273
HTML+CSS网页设计期末课程大作——运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑
大学生游戏静态HTML网页设计 (HTML+CSS+JS仿英雄联盟网站15页)
VX_WJ88950106的博客
08-20 2066
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
Web 开发的 20 个实用网站
热门推荐
qq_42880714的博客
12-09 1万+
Web 开发的 20 个实用网站
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

STU学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值