学生个人网页作业 Dreamweaver设计作业 环保垃圾分类5页表格 js时间特效 js轮播视频

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/239962

(title-G17JP 环保垃圾分类5页表格 js时间特效 js轮播视频)]

截图演示

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

   

    
首页

  
    
发展情况
    
    
产生原因
    
    
主要问题
    
    
相关视频
     
   












    
    

        
更多>>
        

            

                            
1
                
                            
2
                
             
            
        
    
    
    

        

            
            

                

                

                    
广告图片1
                    
                
            
            
            

                

                

                    
广告图片2
                    
                
            
             
            
        
    
















精彩瞬间 JINGCAISHUNJIAN

 



     
                               

     

          

















 
















发展情况 FAZHANQINGKUANG

 



     
                               

     

          

















立法过程

2019年6月25日，固体废物污染环境防治法修订草案初次提请全国人大常委会审议。草案对“生活垃圾污染环境的防治”进行了专章规定。












 
















 
























产生原因 CHANSHENGYUANYIN

 



     
                               

     

          




















 









一图了解生活中的垃圾分类
。

每个人每天都会扔出许多垃圾，在一些垃圾管理较好的地区，大部分垃圾会得到卫生填埋、焚烧、堆肥等无害化处理，而更多地方的垃圾则常常被简易堆放或填埋，导致臭气蔓延，并且污染土壤和地下水。

垃圾无害化处理的费用是非常高的，根据处理方式的不同，处理一吨垃圾的费用约为一百元至几百元不等。人们大量地消耗资源，大规模生产，大量地消费，又大量地生产着垃圾。




后果将不堪设想。

从国外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分构成、产生量，结合本地垃圾的资源利用和处理方式来进行分类。如德国一般分为纸、玻璃、金属和塑料等；澳大利亚一般分为可堆肥垃圾，可回收垃圾，不可回收垃圾；日本一般分为塑料瓶类，可回收塑料、其他塑料、资源垃圾、大型垃圾、可燃垃圾、不可燃垃圾和有害垃圾等等。

 






















垃圾分类 












    


    

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;
}


.fazhanqingkuang  .simg
{
height:300px;width:570px;margin:10px; 
float:left;
}


.fazhanqingkuang .desc
{
width:580px;height:300px;overflow:hidden;float:left;

text-align:left;
padding:5px;
}





.chanshengyuanyin .text
{
width:1200px;float:left;

margin-top:10px;
}

.chanshengyuanyin .img
{
width:580px;padding:0px  5px;
height:310px;float:left;
}
.chanshengyuanyin  img
{
width:580px;height:310px;}



.chanshengyuanyin  .slist
{
text-align:center;
}



.chanshengyuanyin  .simg
{
height:300px;width:570px;margin:10px; 
float:left;
}


.chanshengyuanyin .desc
{
width:580px;height:300px;overflow:hidden;float:left;

text-align:left;
padding:5px;
}





.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;

    
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app