垃圾分类——web期末作业网页设计(附源码)

这篇具有很好参考价值的文章主要介绍了垃圾分类——web期末作业网页设计(附源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.效果展示

2.文件目录

3.网页源码 


1.效果展示

网页设计期末作业源代码免费,前端,前端,html,css网页设计期末作业源代码免费,前端,前端,html,css

网页设计期末作业源代码免费,前端,前端,html,css

网页设计期末作业源代码免费,前端,前端,html,css网页设计期末作业源代码免费,前端,前端,html,css

网页设计期末作业源代码免费,前端,前端,html,css

2.文件目录

网页设计期末作业源代码免费,前端,前端,html,css

3.网页源码 

 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>垃圾分类</title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/qm.css"/>
	</head>
	<body>
		<div class="containe">
			<div class="header1">
				<h1>垃圾分类网</h1>
			</div>
			<div class="header2"></div>
			<a href="#"><div class="header3">搜索</div></a>
			<div class="nack">
				<ul>
					<a href="#"><li class="span">网站主页</li></a>
					<a href="html/html2.html"><li class="a">垃圾分类</li></a>
					<a href="#"><li class="a">清洁产业</li></a>
					<a href="#"><li class="a">厕所革命</li></a>
					<a href="#"><li class="a">环卫信息</li></a>
					<li class="b"><img src="img/icon1.png"/></li>
					<li class="b"><img src="img/icon2.png"/></li>
					<li class="b"><img src="img/icon3.png"/></li>
					<li class="b"><img src="img/icon4.png"/></li>
					<li class="b"><img src="img/icon1.png"/></li>
				</ul>
			</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/s1.png"/>
				</div>
				<div class="swiper-slide"> <!-- data-swiper-autoplay="5000"-->
                    <img src="img/s2.png"/>
				</div>
				<div class="swiper-slide">
					<img src="img/s3.png"/>
				</div>
				<div class="swiper-slide">
					<img src="img/s4.png"/>
				</div>
			</div>
			<div class="swiper-pagination"></div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
			<div class="swiper-scrollbar"></div>
		</div>
		<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js" ></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
		<script src="js/swiper.min.js"></script>
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal', // 垂直切换选项
		    loop: true, // 循环模式选项
		    autoplay: {
			    delay: 2500,//2.5秒切换一次
			    disableOnInteraction: false,
			  },
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		      clickable :true,
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
		    // 如果需要滚动条
		    scrollbar: {
		      el: '.swiper-scrollbar',
		    },
		  })        
		</script>
		<div class="content">
			<div class="mulu1">
				<p>垃圾分类,这件天大的“小事”将...</p>
			</div>
			<div class="mulu2">
				<ul>
					<li>新华..关爱环卫工人公益项目已累计赔付...万元</li>
					<li>北京朝阳:一座垃圾处理中心如何变身“循环经济产业园”</li>
					<li>..垃圾分类调查:多座大型分类处理设施明年投用</li>
					<li>一图读懂全国地级及以上城市全面启动生活垃圾分类</li>
					<li>..:第三方检测公司垃圾焚烧项目..造假被处罚</li>
					<li>..:深入学习..重要指示批示精神全面</li>
				</ul>
			</div>
			<div class="mulu1">
				<p>女子公园捡垃圾疑摆拍又反转,...</p>
			</div>
			<div class="mulu2">
				<ul>
					<li>...:各地不得对新能源汽车实行限行、限购</li>
					<li>关于印..案...</li>
					<li>...爆黑天鹅?</li>
					<li>..如何让电子垃圾变废为宝?</li>
					<li> ..:到..年,全市商业综合体实现生活垃圾分类100%全覆盖</li>
					<li>..:切实做好垃圾分类工作 推动山清水秀美丽之地建设</li>
				</ul>
			</div>
		</div>
		<div class="content4">
			<h1>项目研究</h1>
			<div class="toumu">
					<h2>环卫管理</h2>
					<h2>法规研究</h2>
					<h2>项目公示</h2>
			</div>
			<div class="fen1">
				<ul>
					<li><img src="img/f1.jpg"></li>
					<li><img src="img/f2.jpg"></li>
				</ul>
				<ul>
					<li><img src="img/f3.jpg"></li>
					<li><img src="img/f4.jpg"></li>
				</ul>
				<ul>
					<li><img src="img/f5.jpg"></li>
					<li><img src="img/f6.jpg"></li>
				</ul>
			</div>
			<div class="fen2">
				<ul>
					<li>实现减量化是治理好农村生活垃圾的关键</li>
					<li>..环卫行业用工现状调研报告</li>
					<li>求实创新打造环卫铁军 ——环卫管理一线的探...</li>
					<li>..智慧环卫平台建设思路探讨</li>
					<li>浅谈“第三方”在城乡环卫一体化工作中的应用</li>
					<li>乡村环境卫生常态工作机制探究——以..钦</li>
	       		</ul>
				<ul>
					<li>..生活垃圾焚烧发电项目环评全本和公众...</li>
					<li>..年国家及地方危废政策大汇总</li>
					<li>餐厨垃圾国家..研究和思考</li>
					<li>生态效率视角下建筑废弃物...</li>
					<li>我国农村固体废物污染..问题研究</li>
					<li>巩义市中心城区环卫专项规划</li>
				</ul>
				<ul>
					<li>..生活垃圾焚烧飞灰固化物填埋场项目环...</li>
					<li>..农村生活垃圾焚烧站项目(..)环...</li>
					<li>..农村生活垃圾焚烧站项目(..)环...</li>
					<li>..农村生活垃圾焚烧站项目(..)环...</li>
					<li>..堌阳镇生活垃圾处理设施建设项目环境...</li>
					<li>..环境卫生管理处..第三城市垃圾处...</li>
				</ul>
        	</div>
		</div>
		<div class="content2">
			<h1>环卫产品</h1>
			<div id="container">
			<div class="wrap">
				<a href="#">
					<div class="text">电动环卫车</div>
					<img src="img/c1.jpg" /><p>电动环卫车</p>
				</a>
			</div>
			<div class="wrap">
				<a href="#">
					<div class="text">环卫垃圾桶</div>
					<img src="img/c2.jpg" /><p>环卫垃圾桶</p>
				</a>
			</div>
			<div class="wrap">
				<a href="#">
					<div class="text">海沃大料斗式车箱对接方案</div>
					<img src="img/c3.jpg" /><p>海沃大料斗式车箱对接方案</p>
				</a>
			</div>
			<div class="wrap">
				<a href="#">
					<div class="text">五征环卫装备产品发往市场</div>
					<img src="img/c4.jpg" /><p>五征环卫装备产品发往市场</p>
				</a>
			</div>
			<div class="wrap">
				<a href="#">
					<div class="text">福田普罗科环卫车</div>
					<img src="img/c5.jpg" /><p>福田普罗科环卫车</p>
				</a>
			</div>
			<div class="wrap">
				<a href="#">
					<div class="text">无人驾驶环卫产品</div>
					<img src="img/c6.jpg" /><p>无人驾驶环卫产品</p>
				</a>
			</div>
		</div>
		</div>
		<div class="content3">
			<h1>环卫法规</h1>
			<div class="toumu">
				<h2>政策法规</h2>
				<h2>标准规范</h2>
				<h2>环卫百科</h2>
			</div>
			<div class="xiao">		
				<ul>
        			<li><a href="#">在全国地级及以上城市全面开展生活垃圾分...</a></li>
					<li><a href="#">《推动重点消费品更新升级 畅通资源循环...</a></li>
					<li><a href="#">..城市建筑垃圾管理...</a></li>
					<li><a href="#">生态环境....加强危险废物处置...</a></li>
					<li><a href="#">..农村垃圾治理...</a></li>
					<li><a href="#">..办公室关于进一步推进“厕所...</a></li>
				</ul>
			</div>
			<div class="xiao">
				<ul>
					<li><a href="#">..地方标准...</a></li>
					<li><a href="#">关于《..生活垃圾定时定点分类投...</a></li>
					<li><a href="#">关于《..可回收物体系规划实施方...</a></li>
					<li><a href="#">细则来了!..印发《 “无废城...</a></li>
					<li><a href="#">关于征求《..再生资源分拣中心建设管...</a></li>
					<li><a href="#">..印发《..交易平台服...</a></li>
				</ul>
			</div>
			<div class="xiao">	
				<ul>        
	        		<li><a href="#">丹麦:我们要做的不仅是垃圾焚烧!</a></li>
					<li><a href="#">耗资..日元 ..这座垃圾焚烧发电厂...</a></li>
					<li><a href="#">..悉心整理:压缩式垃圾车最常见的...</a></li>
					<li><a href="#">渗滤液处理后可以直饮,这是真的吗?</a></li>
					<li><a href="#">原来垃圾焚烧厂也可以这么美!</a></li>
					<li><a href="#">一张图读懂烟气净化!</a></li>
				</ul>
			</div>
		</div>
		
		</div>
		<div id="footer">
			<div id="footer_left">
				<img src="img/erweima.jpg" />
			</div>
			<div id="footer_right">
				<div id="contact">
					<p id="three">Infini Studio | 网页制作</p>
					<p>金华市婺城区</p>
					<p>TEL:1365650350</p>
					<p>QQ:106448156</p>
					<p>Email:106448156@qq.com</p>
					<p>weibo:@bucunzaide</p>
				</div>
			</div>
		</div>
	</body>
</html>

 css文件文章来源地址https://www.toymoban.com/news/detail-772010.html

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
body{
	background: url(../img/background.jpg);
} 
a{
	text-decoration: none;color: white;
}
.ziti
{
	font-size: 45px;
}
.containe
{
	height: 100%;
	width: 100%;
	margin-left: 10%;
	margin-right: 10%;
}
.header1{
	float: left;
	font-size: 28px;
	margin-top: 1%;
	margin-left: 1%;
}
.header2{
	width: 20%;
	height: 36px;
	margin-left: 35%;
	margin-top: 3%;
	margin-right: -1%;
	border: 3px solid gray;
	float: left;
	background: white;
}
.header3{
	width: 6%;
	height: 40px;
	margin-top: 3%;
	margin-right: 5%;
	border:  1px solid black;
	float: left;
	background: black;
	color: white;
	text-align: center;
	font-size: 16px;
	line-height: 40px;
}
.nack{
	margin-top: 2%;
	padding: 0;
	width: 80%;
	height: 10%;
	float: left;
	border: 0.1px solid black;
	background: black;
	margin-bottom: 1%;
}
.a{
	padding-top: 1%;
	padding-bottom: 1%;
	text-align: center;
	color: white;
	width: 10%;
	height: 5%;
	float: left;
	font-size: 16px;
}
.a:hover{background: red;}
.span{
	background: darkcyan;
	padding-top: 1%;
	padding-bottom: 1%;
	text-align: center;
	color: white;
	width: 10%;
	height: 5%;
	float: left;
	font-size: 16px;
}
.b
{
	padding-top: 0.3%;
	padding-bottom: 0.3%;
	height: 5%;
	width: 8%;
	float: right;
}
.swiper-container{
	float: left;
	width: 40%;
	height: 20%;
	margin-left: 0.01%;
}
.swiper-slide{
	font-size: 40px;
	text-align: center;
	line-height: 300px;
	color: white;
}
.swiper-slide img{
	width: 90%;
}
.content{
	float: right;
	margin-right: 25%;
	margin-top: 1%;
	height: 10%;
	width: 30%;
}
.mulu1{
	margin-top: 1%;
	color: dodgerblue;
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 4%;
}
.mulu2
{
	margin-left: 2.5%;
	margin-bottom: 4%;
}
.mulu2 li{
	margin-top: 1%;
}
.content2{
	float: left;
	width: 80%;
}
.content2 h1{
	margin-left: 3%;
}
#container{
				width: 80%;
				margin: 0 auto;
				margin-top: 20px;
}
.wrap{
		width: 30%;
		float: left;
		margin-top: 2%;
		border: 1px #BCBCBC solid;
		box-shadow: 2px 2px 2px #444;
}
.wrap .text{
	position: relative;
	height: 0px;
	left: 10px;
    color: black;
    width: 100%;
    text-align: center;
    font-size:30px;
    display: none;
}
.wrap:hover .text {
	display: block;
}
a:hover img{
	filter: alpha(Opacity=0.8);-moz-opacity:0.8;opacity: 0.8;
}
.wrap:nth-child(3n+2){
				margin-left: 3.5%;
				margin-right: 3.5%;
}
.wrap img{
			width: 100%;
}
.wrap p{ 
	text-align: center;
	color: #666666;
	font-size: 16px;
	margin: 2px;
	border-radius: 0px 0px 10px 10px;
}
@media only screen and (max-width: 500px) {
				.wrap{
					width: 48%;
					margin-top: 1.5%;
				}
				.wrap:nth-child(3n+2)
				{
					margin: 0;
					margin-top: 1.5%;
				}
				.wrap:nth-child(2n+1)
				{
					margin-right: 3%;
				}
}
.content3,.content4{
	float: left;
	width: 80%;
	margin-top: 3%;
	margin-left: 2%;
	margin-right: 5%;
	margin-bottom: 3%;
}
.xiao{
	width: 100%;
	margin-left: 3%;
	margin-top: 2%;
}
.xiao a{
	text-decoration: none;
	color: #333333;
}
.xiao li{
	line-height: 20px;
	background: gray;
	width: 95%;
	margin-bottom: 2px;
	padding: 2px 5px;
	border-radius: 0 20px 20px 0;
	border-left: 3px solid black;
	transition: all 1s ease-out;
}
.xiao li:hover{
	width: 90%;
	background: orange;
	transition: all 150ms linear;
}
.xiao  a:hover{
	color: white;
}
.xiao ul{
	width: 33%;
	float: left;
	font-size: 20px;
}
.toumu h2{
	width: 30%;
	float: left;
	margin-left: 3%;
	margin-top: 2%;
	margin-bottom: 1%;
}
.content4{
	margin-bottom: 5%;
}
.fen1 ul{
	width: 33%;
	float: left;
}
.fen1 li img{
	width: 41%;
	float: left;
	margin-left: 8%;
}
.fen2 ul{
	width: 33%;
	float: left;
}
.fen2 li{
	margin-left: 10%;
	margin-top: 1%;
	margin-bottom: 1%;
	font-size: 18px;
	list-style: circle;
}
.img img{
	width: 35%;
	margin-left: 2.5%;
	margin-right: 1%;
	float: left;
}
.g1{
	text-align: center;
	float: left;
	width: 80%;
}
.g1 h1,h2{
	margin-top: 1%;
	margin-bottom: 1%;
}
.blue{
	color: royalblue;
}
.g1 li{
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%;
	float: left;
	margin-left: 7%;
	margin-right: 7%;
}
.g2{
	width: 80%;
	float: left;
	text-align: center;
	margin-bottom: 1%;
}
.g2 li{
	width: 23.5%;
	float: left;
}
.g2 h1{
	margin-top: 8%;
	margin-bottom: 1%;
}
.g3{
	width: 80%;
	margin-bottom: 2%;
	background: white;
	box-shadow: 0 0 3px black;
	opacity: 0.9;
}
.g3 li{
	width: 22%;
	float: left;
	margin-left: 3%;
}
.g3 li:hover{
	transform: rotate(0deg) scale(2,2);
	z-index: 400;
	position: relative;
	transition: all 0.5s linear;
	opacity: 1;
}

.g3 li img{
	width: 85%;
}
.g4{
	width: 100%;
	float: left;
	text-align: center;
}
.g4 li{
	width: 20%;
	float: left;
}
.g4 h1{
	margin-top: 8%;
	margin-bottom: 1%;
}
.g5{
	width: 80%;
}
.g5 img{
	float: left;
	margin: 3%;
	width: 30%;
}
.hezi{
	margin-right: 1%;
	margin-top: 2%;
	width: 32%;
	float: left;
	background: white;
	height: 150px;
}
.hezi h1{
	margin-top: 4%;
	font-size: 22px;
	font-weight: bold;
	font-family: "微软雅黑";
}
.hezi p{
	margin-top: 3%;
	line-height: 25px;
}
.g6{
	float: left;
	margin-top: 3%;
	padding: 3%;
	width: 72%;
	background: white;
}
.g6 .f1{
	width: 40%;
}
.g6 .f2{
	float: right;
	width: 50%;
}
.g6 .f2 img{
	width: 70%;
	margin-right: 10%;
	float: right;
}
.g6 .f3{
	font-size: 20px;
	margin-top: 2%;
	margin-left: 4%;
	float: left;
	text-indent: 2em;
	width: 40%;
	color: rgb(100,100,100);
}
.g6 .f4{
	margin-top: 5%;
	margin-left: 15%;
	width: 15%;
	text-align: center;
	float: left;
	height: 40px;
	line-height: 40px;
	border: 1px solid black;
}







#footer{
	background-color: #E0E0E0;
	position: relative;
	padding-top: 1%;
	line-height: 22px;
	padding-bottom: 1%;
	clear: both;
	top: 70px;
}
#footer_left,#footer_right{
	width: 49%;
	display: inline-block;
}
#link{
	float: right;
}
#footer_left img{
	margin-left: 84%;
}
#link img{
	width: 30px;
	height: 25px;
}
#footer_right{
	border-left: 2px #BCBCBC solid;
	padding-left: 10px;
}
#contact{
	font-size: 0.75em;
	text-shadow: 1px 1px 1px white;
	color: #666;
}

到了这里,关于垃圾分类——web期末作业网页设计(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包