大学生垃圾分类网页制作

• 设计思路
• 知识点应用
• 内容说明
• 代码演示
• 页面效果
• • 首页
  • 二级页面-图文混排
  • 二级页面-图片列表
  • 三级图片详情
  • 留言表单页面
• 成品下载

设计思路

垃圾分类网页设计作品采用DIV CSS布局制作，首页有导航、BANNER、视频、文字内容、图片列表超链接。

知识点应用

网页背景颜色、视频、留言表单、图片及文字超链接、左右排版、图文混排、无序列表等。

内容说明

三层结构，共11个页面（1个首页、6个二级页面、4个三级页面）网页内容包括：网站首页、产生原因、分类原则、分类意义、垃圾种类、操作流程、在线留言。

代码演示

<div class="nav">
    <ul>
    <li><a href="index.html">网站首页</a></li>
    <li><a href="yuanyin.html">产生原因</a></li>
    <li><a href="yuanze.html">分类原则</a></li>
    <li><a href="yiyi.html">分类意义</a></li>
    <li><a href="zhonglei.html">垃圾种类</a></li>
    <li><a href="liucheng.html">操作流程</a></li>
    <li><a href="liuyan.html">在线留言</a></li>
    </ul>
</div>
<div class="banner">
    <a href="liuyan.html"><img src="images/banner.jpg"></a>
</div>
<div class="left">
    <video src="video/video.mp4" controls="controls" width="340">
    your browser does not support the video tag
    </video>
</div>
<div class="right">
    <p>
      垃圾分类是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用，减少垃圾处理量和处理设备，降低处理成本，减少土地资源的消耗，具有社会、经济、生态等几方面的效益。
      <br>
      垃圾在分类储存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性公共资源，垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看，大多都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式等来进行分类的。
    </p>
</div>
<div class="list">
     <ul >
     <li><a href="zhongleia.html"><img src="images/flax.jpg" /></a></li>
     <li><a href="zhongleib.html"><img src="images/flbx.jpg" /></a></li>
     <li><a href="zhongleic.html"><img src="images/flcx.jpg" /></a></li>
     <li style="margin-right:0px; "><a href="zhongleid.html"><img src="images/fldx.jpg" /></a></li>
     </ul>
</div>

页面效果

首页

二级页面-图文混排

二级页面-图片列表

三级图片详情

留言表单页面

成品下载

https://www.stu-works/html/jieri/362.html