0
0

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

1.效果展示

2.文件目录

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:[email protected]</p>
                    <p>weibo:@bucunzaide</p>
                </div>
            </div>
        </div>
    </body>
</html>

css文件

*{
    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;
}
标签： 前端 html css
本文转载自: https://blog.csdn.net/weixin_43823060/article/details/130981027
版权归原作者 PG5 所有， 如有侵权，请联系我们删除。
登录后发布评论

“垃圾分类——web期末作业网页设计（附源码）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航