Table of contents
1. Effect display
2.File directory
3.Web page source code
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:[email protected]</p>
<p>weibo:@bucunzaide</p>
</div>
</div>
</div>
</body>
</html>
css file
*{
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;
}