关于环境保护html网页设计完整版-4环保垃圾分类5页

news2025/7/7 20:52:34

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家园 | 等网站的设计与制作HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

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

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>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

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

相关文章

Node.js 入门教程 14 使用 exports 从 Node.js 文件中公开功能

Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Node.js 入门教程14 使用 exports 从 Node.js 文件中公开功能14 使用 exports 从 Node.js 文件中公开功能 Node.js 具有内置的模块系统。 …

Python脚本实现BJTU校园网自动登录

文章目录 1.背景介绍2.登录分析3.代码分析4.源代码1.背景介绍 BJTU的校园网连接好以后需要输入账号和密码才能正确登录,如下图所示。整个流程比较繁琐,尤其是很多服务器、工作站是无图形化的系统,大部分时间需要SSH连接,所以通过界面登录十分不方便。 所以就想了一个办法,…

(附源码)计算机毕业设计Java办公自动化管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

(附源码)计算机毕业设计Java巴州监控中心人事管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

java_ 多线程知识笔记(一)

文章目录前言:1.如何理解线程2.进程和线程的关系3.多线程编程第一种:继承Thread类第二种:实现Runnable 接口:第三种:使用Lambda表达式4.Thread 用法1.Thread常见的构造方法2.Thread的几个常见的属性5.等待一个线程6.并发和并行前言: 为什么要引入多线程编程 java引用进程的概…

【好书推荐】计算机网络:自顶向下方法(第七版)

人生的美妙之处在于迷上一样东西。人生苦短&#xff0c;少做些虚无缥缈的事。 – 刘慈欣-《三体》 推荐理由 自计算机网络诞生以来&#xff0c;经过数十年的发展&#xff0c;计算机的体系已经非常庞大&#xff0c;同时计算机网络也大大促进了人类社会的发展。无数大佬前赴后继…

【python量化】将Informer用于股价预测

写在前面Informer模型来自发表于AAAI21的一篇best paper《Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting》。Informer模型针对Transformer存在的一系列问题&#xff0c;如二次时间复杂度、高内存使用率以及Encoder-Decoder的结构限制&…

后台管理不可忽视,华为云会议最新支持管理员分权分域

如今&#xff0c;跨地域&#xff0c; 跨组织&#xff0c;需要随时随地接入的远程沟通协作变得愈加频繁&#xff0c;众多企业开始纷纷建设符合自身需求的智能会议室。在会议系统的众多能力中&#xff0c;后台管理&#xff0c;这项常常被C端用户忽略的能力&#xff0c;B端的企业却…

真的够可以的,基于Netty实现了RPC框架

RPC全称Remote Procedure Call&#xff0c;即远程过程调用&#xff0c;对于调用者无感知这是一个远程调用功能。目前流行的开源RPC 框架有阿里的Dubbo、Google 的 gRPC、Twitter 的Finagle 等。本次RPC框架的设计主要参考的是阿里的Dubbo&#xff0c;这里Netty 基本上是作为架构…

1. Spring Boot 3 入门学习教程之开发第一个 Spring Boot 应用程序

Spring Boot 3 入门学习教程之开发第一个 Spring Boot 应用程序0. 前言1. Spring Boot 介绍2. 系统要求2.1 Servlet容器2.2 GraalVM Native Image&#xff08;GraalVM 原生镜像&#xff09;3. 安装Spring Boot 开发环境3.1 安装JDK3.2 安装Spring Boot构建工具3.2.1 方式一&…

C++标准库分析总结(九)——<仿函数/函数对象>

目录 1.functor仿函数简介 2 仿函数的分类 3 仿函数使用 4 仿函数可适配的条件 1.functor仿函数简介 仿函数是STL中最简单的部分&#xff0c;存在的本质就是为STL算法部分服务的&#xff0c;一般不单独使用。仿函数&#xff08;functors&#xff09;又称为函数对象&…

【InnoDB Cluster】修改已有集群实例名称及成员实例选项

【InnoDB Cluster】修改已有集群实例名称&#xff0c;成员实例名称和选项 文章目录【InnoDB Cluster】修改已有集群实例名称&#xff0c;成员实例名称和选项修改名称修改已有集群实例名称修改已有集群实例的成员实例名称修改成员服务器操作系统的主机名直接修改元数据库中的表使…

力扣(LeetCode)88. 合并两个有序数组(C++)

朴素思想 朴素思想&#xff0c;开第三个数组&#xff0c;对 nums1nums1nums1 和 nums2nums2nums2 进行二路归并。 class Solution { public:void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) {vector<int> nums3(mn);int i 0,j …

2.2 Linux启动初始化文件系统

为了方便了解和调试我们的Linux系统,我们需要将proc,debugfs,tmp等挂载起来,否则我们我发了解系统的进程,负载等信息,如下是未进行任何挂载时,我们无法通过ps等方法查看系统任何进程信息: 一,挂载proc fs proc是一个伪文件系统,(伪文件系统只存在内存中,而不占用存…

Node.js 入门教程 2 Node.js 简史

Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Node.js 入门教程2 Node.js 简史2.1 一点历史2.2 20092.3 20102.4 20112.5 20122.6 20132.7 20142.8 20152.9 20162.10 20172.11 20182.12 2…

聊一聊微服务常见配置中心工作原理

0. 环境 nacos版本&#xff1a;1.4.1 Spring Cloud : 2020.0.2 Spring Boot &#xff1a;2.4.4 Spring Cloud alibaba: 2.2.5.RELEASE Spring Cloud openFeign 2.2.2.RELEASE 测试代码&#xff1a;github.com/hsfxuebao/s… 1. 配置中心基础 1.1 为什么要用配置中心&…

Js逆向教程-15滑块流程 极验

作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; Js逆向教程-15滑块流程 极验 一、滑块是什么&#xff1f; 区分是否是机器人。根据滑动轨迹区分是否是人操作的。 滑块肯定有滑动条 …

亚马逊云科技持续创新、领势而行,re:Invent颠覆想象

当一行行代码成为托起数字社会的基础架构&#xff0c;社会发展开始面临真正意义上的变革与重塑。作为云计算领域的探路者与引领者&#xff0c;亚马逊云科技持续创新、领势而行&#xff0c;正不断塑造并颠覆着大众关于云计算未来的想象。 2006年 开端 2006年&#xff0c;亚马逊…

【单片机基础】I2C通信-基于STC89C52RC

文章目录1、IIC总线结构2、IIC总线传输协议3、完成工程代码1、IIC总线结构 IIC总线是philips公司在八十年代初推出的一种串行、半双工总线。主要用于近距离、低速的芯片之间通信&#xff1b;IIC总线有两根双向的信号线&#xff0c;一根数据线SDA用于收发数据一根时钟线SCL用于…

Mac 使用paralles 从零搭建hadoop集群

目录 1. 虚机的安装与配置 1.1 安装parallels 1.2 安装fedora系统 1.3 fedora的配置 1.3.1 内存和硬盘配置 1.3.2 网络配置 1.3.3 共享文件夹 1.4 虚拟机克隆 与 加载 2. 免密登录 2.1 分别查看master&#xff0c; slave01&#xff0c;slave02 的ip 2.2 查看各虚机的…