HTML5期末大作业：环境网站设计——环境保护(4页) html网页制作期末大作业成品_网页设计期末作业
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- 启用极速模式(webkit) -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KeyWords" content="首页">
<meta name="description" content="首页">
<title>首页</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name='apple-touch-fullscreen' content='yes' />
<meta name="full-screen" content="yes">
<!-- SEO友好提示 -->
<meta name="applicable-device" content="pc,mobile">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/ubox.js" charset="utf-8"></script>
<script type="text/javascript" src="js/wow.js" charset="utf-8"></script>
<script type="text/javascript" src="js/alert.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/box.css" />
<link rel="stylesheet" type="text/css" href="css/alert.css" />
<link rel="stylesheet" type="text/css" href="css/0167559.css" />
<script>
var batchArr = [];
var checkLoad = 0; //判断是否是回调完成的
</script>
<script>
var isOpenMobie = 2;
var isOpenPad = 2;
if (isOpenMobie == 1) {
if (isOpenPad == 1) {
$("body").css("width", "auto");
} else {
//是否手机端判断
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
if (isMobile) {
$("body").css("width", "1280px");
} else {
$("body").css("width", "auto");
}
}
} else {
$("body").css("width", "auto");
//是否手机端判断
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
if (isMobile) {
$("head").append("<meta content='width=320,user-scalable=no' name='viewport'>");
} else {
$("head").append("<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />");
}
}
</script>
<script>
$(window).load(function() {
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
setTimeout(function() {
new WOW().init()
}, 150)
};
});
var DIY_WEBSITE_ID = "178";
var DIY_JS_SERVER = "s143js.nicebox.cn";
</script>
</head>
<body>
<script type="text/javascript">
var Default_isFT = 0;
</script>
<script type="text/javascript" src="js/transform.js"></script>
<div id="comm_layout_header" class="layout none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div class="view_contents">
<div id="text_style_02_1490063023274" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="text_style_02_1490063046138" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="dh_style_01_1490063713095" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="image_style_01_1492669021720" class="view style_01 image none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="imgStyle CompatibleImg">
<a href='javascript:;' target="">
<img class="picSet link-type-" src="picture/timg.jpg" title="" alt="描述" id="imageModeShow" />
</a>
</div>
<!-- 新加的js -->
</div>
</div>
<div id="div_blank_1492665389276" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
<div id="div_includeBlock_1492656898130" class="view includeBlock div none includeView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<div id="dh_style_01_1492656952980" class="view style_01 dh none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="dh" class="view_contents">
<div id="menu" class="menu menuStyle_1">
<div class="menuLayout">
<ul class="miniMenu columnSet showmobile">
<li class="leftBox">
<div class="nav"></div>
<div class="sidebar icoMenuSet" onclick="setDhListen('style_01',this)">=</div>
<div class="menuScroll">
<ul class="menuUlCopy">
<li id="hot" class="rflex" pageid="167559" showmobile=""><a class="mainMenuSet" href="index.html">首页</a>
</li>
<li class="rflex" pageid="167565" showmobile=""><a class="mainMenuSet" href="about.html">关于我们</a>
</li>
<li class="rflex" pageid="167561" showmobile=""><a class="mainMenuSet" href="news.html">环保咨询</a>
</li>
<li class="rflex" pageid="167563" showmobile=""><a class="mainMenuSet" href="contact.html">联系我们</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="menuUl_box columnSet showpc">
<ul class="menuUl dflex">
<!-- 1167559 test-->
<li id="hot" class="rflex" pageid="167559" showpc="">
<a class="mainMenuSet" href="index.html">首页</a>
</li>
<!-- 1167565 test-->
<li class="rflex" pageid="167565" showpc="">
<a class="mainMenuSet" href="about.html">关于我们</a>
</li>
<!-- 1167561 test-->
<li class="rflex" pageid="167561" showpc="">
<a class="mainMenuSet" href="news.html">环保咨询</a>
</li>
<!-- 1167563 test-->
<li class="rflex" pageid="167563" showpc="">
<a class="mainMenuSet" href="contact.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 菜单区域 End-->
<!-- -->
</div>
</div>
<div id="user_style_05_1492758156693" class="view style_05 user none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="user" class="view_contents">
<!---菜单区域--->
<!--弹窗登录 PopupLogin -->
<div id="UserLoginMain" class="PopUpLogin PopUpLoginStyle_1">
<div id="popUpLogin-t" class="Login_before">
<ul class="v9_hide_if_logined">
<li class="showpLogin textSet"><a href="#" onclick="OnLogin(0);">登录</a></li>
<li class="w textSet">|</li>
<li class="showpRegistered textSet"><a href="#" onclick="OnRegister(0);">注册</a></li>
<div style="display:inline-block"><span id="userQQLi" class="LoginStatic"><img width="16" src="picture/02.png" href="#" title="QQ登录" id="idQQlogin" align="absmiddle"></span></div>
<div style="display:inline-block"><span id="userWXLi" class="LoginStatic"><img width="22" src="picture/03.png" href="#" title="微信登录" id="idWXlogin" align="absmiddle"></span></div>
</ul>
</div>
<!--登录后显示-->
<div class="Login_after" style="display: none;"></div>
</div>
<script src="js/userloginview.js"></script>
<!-- 05 08 提示登录 -->
<!-- -->
</div>
</div>
<div id="image_logo_1492672062728" class="view logo image none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="logoStyle modSet">
<a href='index.html' target="_self"><img class="imgSet" src="picture/03.png" title="" alt="" style="width:100%; height:auto" /></a>
</div>
</div>
</div>
<div id="text_style_02_1492670533631" class="view style_02 text none wow bounceInLeft lockHeightView" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
欢迎来到环保之家
</div>
</div>
<div id="text_style_02_1492670623527" class="view style_02 text none wow bounceInRight lockHeightView" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
Welcome to the green house
</div>
</div>
</div>
</div>
</div>
</div>
<div id="layout_1492658909740" class="layout none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div class="view_contents">
<div id="div_blank_1492659017452" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
<div id="text_style_02_1492658852909" class="view style_02 text none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
<div>关于环保</div>
</div>
</div>
<div id="text_style_02_1492658943121" class="view style_02 text none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
环保，全称环境保护，是指人类为解决现实的或潜在的环境问题，协调人类与环境的关系，保障经济社会的持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的，也有法律的、经济的、宣传教育的等。
</div>
</div>
<div id="image_style_01_1492659065363" class="view style_01 image none wow bounceInLeft" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="imgStyle CompatibleImg">
<a href='javascript:;' target="">
<img class="picSet link-type-" src="picture/04.png" title="" alt="描述" id="imageModeShow" />
</a>
</div>
<!-- 新加的js -->
</div>
</div>
<div id="image_style_01_1492659069712" class="view style_01 image none wow bounceIn" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="imgStyle CompatibleImg">
<a href='javascript:;' target="">
<img class="picSet link-type-" src="picture/05.png" title="" alt="描述" id="imageModeShow" />
</a>
</div>
<!-- 新加的js -->
</div>
<a href="news.html" target='' style='color:inherit' class='editor-view-extend link-type--'>环保资讯 |</a>
</div>
</div>
<div id="text_style_02_1492745208353" class="view style_02 text none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
<a href="contact.html" target='' style='color:inherit' class='editor-view-extend link-type--'>联系我们 </a>
</div>
</div>
<div id="div_blank_1492745208363" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
<div id="text_style_01_1505196709135" class="view style_01 text none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
Copyright ? 2020 . Trazos All rights reserved. 技术支持
</div>
</div>
</div>
</div>
<div id="div_blank_1492745270116" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
<div id="div_blank_1492745352300" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
