HTML5期末大作业：环境保护网站设计——环境保护--水生态环保(5页) 环境网页设计作业简单大学生静态HTML网页作品

最新推荐文章于 2023-12-02 16:48:04 发布

web领域优质创作者-网页设计

最新推荐文章于 2023-12-02 16:48:04 发布

阅读量2.2k

点赞数 3

分类专栏：大学生毕业设计源码情侣浪漫表白网页html web期末作业设计网页文章标签： html5 html css3 作业环境

本文链接：https://blog.csdn.net/m0_46321522/article/details/121606492

版权

web期末作业设计网页同时被 3 个专栏收录

946 篇文章 88 订阅

订阅专栏

大学生毕业设计源码

376 篇文章 110 订阅

订阅专栏

情侣浪漫表白网页html

8 篇文章 0 订阅

订阅专栏

HTML5期末大作业：环境保护网站设计——环境保护–水生态环保(5页) 环境网页设计作业简单大学生静态HTML网页作品

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：环境保护网站设计——环境保护--水生态环保(5页) 环境网页设计作业简单大学生静态HTML网页作品
获取更多源码
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码
五、学习资料
六、更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>深圳市XXX环境技术有限公司</title>
<meta name="keywords" content="深圳水务 深水 环境 生态 环保 治理" />
<meta name="description" content="深圳市XXX环境技术有限公司是深圳市水务（集团）有限公司的全资子公司，致力于向市场提供包括一站式解决方案和专业处理设备在内的高品质环境综合服务" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  
</head>

<body>
	<!--headerstrat-->
	<div class="head clearfix">
  <a href="index.html" class="logo">
    <img src="picture/logo.png">
  </a>
  <ul class="headNav clearfix">
    <li>
      <h3 id="index">
        <a href="index.html">首页</a>
      </h3>
    </li>
    <li>
      <h3 id="solution">
        <a href="solution.html">解决方案</a>
        <em></em>
      </h3>
      <div class="secondNav clearfix">
        
        <img src="picture/2016032218550877.jpg" width="311" height="233" alt="">
        <div class="subNav">
          <p>XXX作为专业环境综合服务商，在污泥的全流程处理、河流湖泊的黑臭水治理、垃圾渗滤液和再生水的处理与利用、环保专用设备的集成和研发服务等多个专业领域提供全方位、一站式解决方案。</p>
            <div class="subNavList">
              <a href="#">市政污泥全流程处理方案</a>
              <a href="#">河流湖泊黑臭水治理方案</a>
              <a href="#">垃圾渗滤处理方案</a>
              <a href="#">移动式固液分离解决分案</a>
              <a href="#">设备研发集成服务</a>
            </div>
          </div>
        </div>
      
    </li>
    <li>
      <h3 id="product">
        <a href="product.html">产品信息</a>
        <em></em>
      </h3>
      <div class="secondNav clearfix">
        
        <img src="picture/2016032414142922.jpg" width="311" height="233" alt="">
        <div class="subNav">
          <p>XXX拥有完备的设备研发、集成和制造能力，并通过自行设计生产、合作研制开发、授权集成制造等多种方式面向环境综合治理领域提供技术理念先进、质量可靠、易于部署和使用的产品。</p>
            <div class="subNavList">
              <a href="#">移动式固液分离系统</a>
              <a href="#">固液深度脱水系统</a>
              <a href="#">污泥低温冷凝干化设备</a>
              <a href="#">水体生态修复设备</a>
            </div>
          </div>
        </div>
      
    </li>
    <li>
      <h3  id="news">
        <a href="news.html">新闻中心</a>
        <em></em>
      </h3>
      <div class="secondNav clearfix">
        
        <img src="picture/2016032218555993.jpg" width="311" height="233" alt="">
        <div class="subNav">
          <p>XXX是年轻的环境综合服务企业，它锐意进取、不断创新，为环境治理和绿色发展积极贡献自己的力量。</p>
            <div class="subNavList">
              <a href="#">新闻中心</a>
            </div>
          </div>
        </div>
      
    </li>
    <li>
      <h3 id="about">
        <a href="about.html">关于我们</a>
        <em></em>
      </h3>
      <div class="secondNav clearfix">
        
            <img src="picture/2016032218561484.jpg" width="311" height="233" alt="">
              <div class="subNav">
                <p>XXX承载着深圳水务人对“天更蓝、水更清”的美好愿望，立足深圳，面向全国，放眼世界，以做好环境治理为企业立命之本，为实现人与自然和谐共存的目标不断努力。
</p>
                <div class="subNavList">
                  <a href="#">公司简介</a>
                  <a href="#">股东信息</a>
                  <a href="#">组织架构</a>
                  <a href="#">技术合作</a>
                  <a href="#">工作机会</a>
                </div>
              </div>
            </div>
        
       
    </li>
  </ul>
  <div class="searchBox clearfix">
    <input type="text" id="name" class="searchinput" placeholder="请输入关键字"  onkeypress="return check()">
      <input type="button"  id="Sele" class="searchBt">
        </div>
  <div class="secondBox"></div>
</div>
<script type="text/javascript">
  $(function(){
  $('#Sele').click(function(){
  var name=$('#name').val();
  if(name==''){
  alert('关键字不能为空');
  }
  else {
  location.href = "search.html?keyword=" + escape(name);
  }
  return false;

  });

  });

  function check() {
  var bt = document.getElementById("Sele");
  var key = event.keyCode;
  if (key == 13)
  bt.click();
  }

</script>
    <!--headerend-->

  
  <div class="slideBox">
         <div class="index_bannerBox">
            <ul>
                
                <li><a href="javascript:void(0)"><img src="picture/2016032418495423.jpg" alt="banner"></a></li>
                 
                <li><a href="javascript:void(0)"><img src="picture/2016032418495423.jpg" alt="banner"></a></li>
                 
            </ul>
            <span class="banleft prev"></span>
            <span class="banright next"></span>
          </div>
    </div>
    <!--content-->
 	<div class="indexdiv indexSolution">
    	<div class="web clearfix">
        	<div class="sunSolution Solution01">
                
                <span class="zooming"><img src="picture/img01.png" alt="市政污泥处理技术" ></span>
                <a href="#" class="SolutionTxt">
                	<img src="picture/img14.png" alt="市政污泥处理技术">
                    <p>详情</p>
                </a>
                
            	
            </div>
        	<div class="sunSolution Solution02">
            	 
                <span class="zooming"><img src="picture/img02.png" alt="河流湖泊" ></span>
                <a href="#" class="SolutionTxt">
                	<img src="picture/img15.png" alt="河流湖泊">
                    <p>详情</p>
                </a>
                
            </div>
        	<div class="sunSolution Solution03">
            	 
                <span class="zooming"><img src="picture/img03.png" alt="垃圾渗透" ></span>
                <a href="#" class="SolutionTxt">
                	<img src="picture/1.png" alt="垃圾渗透">
                    <p>详情</p>
                </a>
                
            </div>
        	<div class="sunSolution Solution04">
            	 
                <span class="zooming"><img src="picture/img04.png" alt="设备研发" ></span>
                <a href="#" class="SolutionTxt">
                	<img src="picture/img17.png" alt="设备研发">
                    <p>详情</p>
                </a>
                
            </div>
        	<div class="sunSolution Solution05">
            	 
                <span class="zooming"><img src="picture/img07.png" alt="移动式固液分离处理方案" ></span>
                <a href="#" class="SolutionTxt">
                	<img src="picture/img18.png" alt="移动式固液分离处理方案">
                    <p>详情</p>
                </a>
                
            </div>
        </div>
    </div>
    
    <div class="indexdiv indexPro">
    	<div class="web clearfix">
        	<h2><img src="picture/img20.png" width="180" height="110" alt=""></h2>
            <div class="subPro subPro01">
                
                <span class="zooming"><img src="picture/img06.png" alt="移动式固液分离系统"></span>
                <a href="#" class="subPtoTxt01">
                	<h3>移动式固液分离系统</h3>
                    <p>通过车载实现可移动式污泥脱水处理终端，可将浓缩污泥或低浓度污泥进一步脱水制成泥饼。</p>
                </a>
                
            	
            </div>
            <div class="subPro subPro02">
            	 
                <span class="zooming"><img src="picture/img07312766.png" alt="固液分离系统"></span>
                <a href="#" class="subPtoTxt01">
                	<h3>固液分离系统</h3>
                    <p>超高压弹性压榨机及叠螺式污泥脱水机。</p>
                </a>
                
            </div>
            <div class="subPro subPro03">
            	 
                <span class="zooming"><img src="picture/img08.png" alt="污泥低温冷凝干化设备"></span>
                <a href="#" class="subPtoTxt01">
                	<h3>污泥低温冷凝干化设备</h3>
                    <p>高效、节能、安全、环保的污泥干化系统。
</p>
                </a>
                
            </div>
            <div class="subPro subPro04">
            	 
                <span class="zooming"><img src="picture/img09.png" alt="水体生态修复设备"></span>
                <a href="#" class="subPtoTxt01">
                	<h3>水体生态修复设备</h3>
                    <p>通过缓释技术促进微生物有氧反硝化作用去氮，建立高效食物链来降低水体中的富营养物质。
</p>
                </a>
                
            </div>
        </div>
    </div>
    
    <div class="indexdiv indexNews">
    	<div class="web clearfix">
        	<h2><img src="picture/img26.png"></h2>
            <div class="subNews subNews01">
                
            	<em class="mask"></em>
            	<a href="#" class="zooming"><img src="picture/2017022419531853.jpg" alt="XXX获得“国家级高新技术企业”认定"></a>
                <div>
                    <h3><a href="#" target="_blank">XXX获得“国家级高新技术企业”认定</a></h3>
                    <p><p style="line-height: 2em; white-space: normal; text-indent: 37px;">近日，深圳市XXX环境技术有限公司顺利通过“高新技术企业”认定，获得了国家级高新技术企业证书。</p></p>
                </div>
                
            </div>
            <div class="subNews subNews02">
                
            	<em class="mask"></em>
                <div>
                    <h3><a href="#" target="_blank">XXX获得ISO9001/ ISO14001/ OHSAS18001标准化管理体系认证</a></h3>
                    <p><p style="line-height: 2em; white-space: normal; text-indent: 37px;">深圳市XXX环境技术有限公司于近期通过了由英国标准协会（BSI, The British Standards Institution）监督审核的质量、环境及职业健康安全管理标准化体系认证，并获得其颁发的ISO 9001:2015、ISO 14001:2015、OHSAS 18001:2007 三个标准化认证体系国际认证证书、BSI标准化认证标志及美国国家标准学会-美国质量……</p></p>
                </div>
            	<a href="#" class="zooming" target="_blank"><img src="picture/2017022418362289_763_497.jpg" alt="XXX获得ISO9001/ ISO14001/ OHSAS18001标准化管理体系认证"></a>
                
            </div>
            <div class="subNews subNews03 clearfix">
                
            	<em class="mask"></em>
            	<a href="#" class="zooming" target="_blank"><img src="picture/2016050614381160_430_397.jpg" alt="我司荣获一站式可移动污泥脱水集成装置专利"></a>
                <div class="fl">
                    <h3><a href="#" target="_blank">我司荣获一站式可移动污泥脱水集成装置专利</a></h3>
                    <p><p style="white-space: normal; text-indent: 2em;">
  日前，我司自主研发的“一种一站式可移动污泥脱水集成装置”获国家知识产权局颁发的实用新型专利证书（专利号ZL201520897522.6），实现了我司自主研发专利的突破。
</p></p>
                </div>
                
            </div>
        </div>
    </div>
    
   <div class="indexdiv indexUs">
    	<div class="web clearfix">
        	<div class="indexSubUs subUs">
                <a href="#">
                	<em></em>
                    
            		<span class="zooming"><img src="picture/img12.png" width="507" height="543" alt=""></span>
                    
                    <p>技术合作</p>
            	</a>
            </div>
        	<div class="indexSubUs subUs01">
                <a href="#">
                	<em></em>
                    
            		<span class="zooming"><img src="picture/img13.jpg" width="484" height="272" alt=""></span>
                    
                    <p>工作机会</p>
            	</a>
            </div>
            <div class="indexSubUs subUsTxt">
            	<h2><a href="#"><img src="picture/img32.png"></a></h2>
                 
                         <p style="text-indent: 2em; line-height: 2em;">深圳市XXX环境技术有限公司于2014年11月12日正式挂牌成立，是深圳市水务（集团）有限公司的全资子公司，业务涵盖污水和污泥处理处置，工业废水、垃圾渗滤液和再生水的处理与利用，固废和餐厨垃圾处理，生态环境的治理和修复，水处理药剂研发生产与销售，低碳能源利用和合同能源管理，流域环境和城市环境综合治理，环境监测、检测和咨询，设备集成和装备制造等多个专业领域。</p>
                 
            </div>
        </div>
    </div>
    
    <!--Footstart-->
   <div class="foot">
  <div class="web clearfix">
    <a href="#" class="footlogo">
      <img src="picture/footlogo.png">
    </a>
    <div class="footRight">
	<div class="footshare">
        <p>
          <a href="#">公司简介</a>|<a href="#">股东信息</a>|<a href="#">组织架构</a>|<a href="#">技术合作</a>|<a href="#">工作机会</a>|<a href="#">手机版</a>
        </p>
		  <div class="bdsharebuttonbox" id="share">
			<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
			<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
			<a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
			<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
			<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
		  </div>
	  </div>
      <div class="footBottom clearfix">
		<p class="p01">联系地址：XXX | 电话：XXX | 传真：XXX | 邮件：XXX
        <p>版权所有 © 2020 深圳市XXX环境技术有限公司 </p>
      </div>
    </div>
  </div>
</div>

    <!--Footend-->
    
</body>
<script type="text/javascript" src="js/layout.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.superslide.2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script>
    $(function () {

        //jQuery(".slideBox").slide({ mainCell: ".bd ul", effect: "left", autoPlay: true });//头部轮播
        $(".zooming img").zoom_img();
			
		$('.slideBox ul').cycle({
			fx : 'scrollHorz',
			next:'.banright',
			prev:'.banleft',
			speed : 600,
			timeout:15000
		});
    })

    $("#index").addClass("cur");
</script>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "2", "bdSize": "32" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
</html>

四、获取更多源码

PC电脑端关注我们

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

web领域优质创作者-网页设计

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML5期末大作业：环境保护网站设计——环境保护--水生态环保(5页) 环境网页设计作业简单大学生静态HTML网页作品

HTML5期末大作业：环境保护网站设计——环境保护–水生态环保(5页) 环境网页设计作业简单大学生静态HTML网页作品常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!获取更多
复制链接

扫一扫