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

news2024/10/5 19:12:54

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

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站效果
  • 五、🔧 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

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

二、✍️网站描述

⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：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.

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/71873.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RFID标签让企业海量固定资产实现科学化管理

RFID标签让企业海量固定资产实现科学化管理

近年来&#xff0c;随着物联网、IoT、移动技术、云计算技术的成熟&#xff0c;越来越多的企业开始使用RFID标签管理企业海量的固定资产。优化固定资产标准化管理流程&#xff0c;有效管理和库存固定资产&#xff0c;进一步提高企业实物资产管理和库存效率。 包括资产申购、验收…
阅读更多...
【操作系统】计算机大脑CPU

【操作系统】计算机大脑CPU

1.CPU组成机构和存储器层级 &#xff08;1&#xff09;CPU是计算机硬件系统的核心部件-大脑 结构&#xff1a;运算器控制器&#xff08;两个部件里面有寄存器组&#xff09;通过CPU内部的总线进行通信 &#xff08;2&#xff09;单核CPU架构 控制器Control Unit简称【CU】 …
阅读更多...
Python使用Opencv图像处理方法完成手势识别(二)

Python使用Opencv图像处理方法完成手势识别(二)

Opencv完成手势识别根据坐标识别寻找最低点计算其他点与最低点的距离通过距离阈值判断手指根数和手势效果展现完整代码当我们把手近似出来后会得到一组轮廓的点坐标&#xff0c;我自己手势识别的思路就是根据点坐标来判断手势。根据坐标识别 寻找最低点 所谓寻找最低点&#…
阅读更多...
浅谈Nacos注册中心集群分布式架构设计

浅谈Nacos注册中心集群分布式架构设计

前言 Nacos的压测性能是非常好的&#xff0c;这里是Nacos官方的压测报告。3节点(CPU 16核&#xff0c;内存32G)规模集群&#xff0c;压测容量服务数可达60W&#xff0c;实例注册数达110W&#xff0c;集群运行持续稳定&#xff0c;达到预期&#xff1b;注册/查询实例TPS达到 13…
阅读更多...
ModStartBlog v6.3.0 任务调度重构，UEditor 升级

ModStartBlog v6.3.0 任务调度重构，UEditor 升级

系统介绍 ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场&#xff0c;后台一键…
阅读更多...
跨设备链路聚合 M-LAG

跨设备链路聚合 M-LAG

M-LAG&#xff08;Multichassis Link Aggregation Group&#xff09;即跨设备链路聚合组&#xff0c;是一种实现跨设备链路聚合的机制&#xff0c;如下图所示&#xff0c;将SwitchA和SwitchB通过peer-link链路连接并以同一个状态和Switch进行链路聚合协商&#xff0c;从而把链路…
阅读更多...
学校介绍静态HTML网页设计作品 DIV布局学校官网模板代码 DW大学网站制作成品下载 HTML5期末大作业

学校介绍静态HTML网页设计作品 DIV布局学校官网模板代码 DW大学网站制作成品下载 HTML5期末大作业

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
iOS app上架app store流程详解​

iOS app上架app store流程详解​

前提条件​ 在有效期内的苹果开发者账号&#xff08;类型为个人或者公司账号&#xff09;。还有一种情况&#xff0c;就是你的Apple ID被添加到公司开发者账号团队里面&#xff0c;这样也是可以的&#xff0c;但是需要叫管理员给你开通相应的账号权限&#xff0c;如下截图&…
阅读更多...
[附源码]Python计算机毕业设计Django在线图书销售系统

[附源码]Python计算机毕业设计Django在线图书销售系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…
阅读更多...
Vue | 有关Vue2路由知识点的一些总结，以及Vue3路由做出了哪些调整？

Vue | 有关Vue2路由知识点的一些总结，以及Vue3路由做出了哪些调整？

目录 Vue2: 1. 路由&#xff1a; 2. 路由规则&#xff1a; 3. 实现切换&#xff08;active-class可配置高亮样式&#xff09; 4. 指定展示位置 5. 路由的query参数 6. params传参&#xff1a; 7. 多级路由 8. 路由的props配置 9. 的replace属性 10. 编…
阅读更多...
Android databinding之BindingMethod与BindingMethods介绍与使用(五)

Android databinding之BindingMethod与BindingMethods介绍与使用(五)

一、介绍 前面几篇文章已介绍了很多data binding的用法&#xff0c;今天我将会介绍一个新的方法绑定BindingMethod的用法。 BindingMethod&#xff0c;从名字可以看出是绑定方法的&#xff0c;绑定的一般都是和布局有关&#xff0c;通过绑定来提高布局可扩展性。 二、使用 Bin…
阅读更多...
把盏言欢,款款而谈,ChatGPT结合钉钉机器人(outgoing回调)打造人工智能群聊/单聊场景,基于Python3.10

把盏言欢,款款而谈,ChatGPT结合钉钉机器人(outgoing回调)打造人工智能群聊/单聊场景,基于Python3.10

就像黑火药时代里突然诞生的核弹一样&#xff0c;OpenAI的ChatGPT语言模型的横空出世&#xff0c;是人工智能技术发展史上的一个重要里程碑。这是一款无与伦比、超凡绝伦的模型&#xff0c;能够进行自然语言推理和对话&#xff0c;并且具有出色的语言生成能力。 好吧&#xff…
阅读更多...
资产扫描神器ARL增强改造

资产扫描神器ARL增强改造

拉取项目首先从GitHub克隆到服务器上。git clone https://github.com/ki9mu/ARL-plus-docker/修改配置文件因为ARL在配置文件里设置了黑名单&#xff0c;有时候项目为GOV或者EDU之类的时候无法进行扫描&#xff0c;所以在这里修改一下配置文件就可以解除限制。cd ARL-plus-dock…
阅读更多...
Spring Boot3.0 GA系列全新版本-全新体验-学习案例1

Spring Boot3.0 GA系列全新版本-全新体验-学习案例1

SpringBoot3.0 GA 2022-11-24这是伟大的一天&#xff0c;Spring Boot进入了3.0时代&#xff0c;并会叩开JDK全面升级的浪潮 文章目录SpringBoot3.0 GA技术支持一、新建第一个mode&#xff1f;1.1、打开IDEA&#xff0c;新建项目1.2、选择 版本 和 依赖1.3、查看项目结构1.4、配…
阅读更多...
vscode配置remote ssh

vscode配置remote ssh

1. 安装插件 设置界面 右键最左边tab栏&#xff1a; 主体: vscode 插件: Remote SSH Linux主体: vscode-server 插件: C/C, CMake, CMake Tools, CodeLLDB, Rainbow Brackets, vscode-proto3, SVN 虚拟化主体: multipass linux发行版(比如ubuntu) 补充: multipass实例本地端口…
阅读更多...
【C++ unordered_set set 和 unordered_map 和 map】

【C++ unordered_set set 和 unordered_map 和 map】

文章目录前言简单介绍哈希表&#xff0c;哈希结构什么时候用哈希表unordered_map操作likou第一题 两数之和unordered_set 基础操作unordered_set 实现总结前言 今天重新打开力扣&#xff0c;看到以前的签到题两数之和&#xff0c;以前的方法是双指针暴力解法&#xff0c;偶然看…
阅读更多...
asp.net校园二手物品交易网站

asp.net校园二手物品交易网站

目录 摘 要 Ⅰ Abstract Ⅱ 第一章 概述 1 1.1网站的开发背景 1 1.1.1学生二手物品交易置换网站的开发背景 1 1.1.2学生二手物品交易活动的现状 1 1.2 学生二手物品交易置换网站的研究方向和内容 2 1.2.1研究方向 2 1.2.2研究内容 2 1.3 学生二手物品交易置换网站的设计目标 2…
阅读更多...
transformer中QKV的通俗理解(剩女与备胎的故事)

transformer中QKV的通俗理解(剩女与备胎的故事)

用vit的时候读了一下transformer的思想,前几天面试结束之后发现对QKV又有点忘记了, 写一篇文章来记录一下 参考链接: 哔哩哔哩:在线激情讲解transformer&Attention注意力机制&#xff08;上&#xff09;在线激情讲解transformer&Attention注意力机制&#xff08;上&…
阅读更多...
SpringCloud全系列知识（5）——微服务的部署（Docker）

SpringCloud全系列知识（5）——微服务的部署（Docker）

微服务的部署&#xff08;Docker&#xff09; 一 初识Docker 1.项目部署问题 大型项目组件较多&#xff0c;运行环境较为复杂&#xff0c;部署和维护困难依赖关系复杂&#xff0c;容易出现兼容性问题开发&#xff0c;测试&#xff0c;生产环境有差异 2.解决依赖的兼容问题 …
阅读更多...
[附源码]Python计算机毕业设计Django疫情期间小学生作业线上管理系统

[附源码]Python计算机毕业设计Django疫情期间小学生作业线上管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023