HTML5期末大作业
文章目录
- HTML5期末大作业
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>时光DN</title>
<meta name="keywords" content="" />
<link href="images/favicon.ico" type="image/x-icon" rel="icon" />
<link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link type="text/css" rel="stylesheet" href="css/main_curr.css?1" />
<link rel="stylesheet" href="css/style.css">
<!--<script type="text/javascript">
//平台、设备和操作系统
//var system ={
//win : false,
//mac : false,
//xll : false
//};
检测平台
//var p = navigator.platform;
//system.win = p.indexOf("Win") == 0;
//system.mac = p.indexOf("Mac") == 0;
//system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//if(system.win||system.mac||system.xll){
//}else{
//window.location.href="http://szr.8864/mobile";
//}
</script>-->
</head>
<body style="background-color: #efefef;">
<div class="header">
<!--导航&下拉菜单 start-->
<dl id="nav">
<div style="height:48px; clear:both; overflow:hidden; width:10px;"></div>
<dt id="one-ddheader">
<span id="one_home" title="新闻资讯"></span>
<span id="one_news" title="游戏资料"></span>
<span id="one_gamedates" title="下载专区"></span>
<span id="one_download" title="帐号服务"></span>
<span id="one_followUs" title="关于我们"></span>
</dt>
<dd style="display: block; height:0px; opacity: 0;" id="one-ddcontent" class="c">
<div style="height:310px; width:1002px; margin:0 auto; position:relative;">
<a href="index.html" title="官网首页" class="nav_home" target="_blank"></a>
<ul id="two_home">
<li><a href="news.html" class="ml_1_1" target="_blank"></a></li>
<li><a href="news.html" class="ml_1_2" target="_blank"></a></li>
<li><a href="news.html" class="ml_1_3" target="_blank"></a></li>
</ul>
<ul id="two_news">
<li><a href="#" class="ml_2_1" target="_blank"></a></li>
<li><a href="news_detail_02.html" target="_blank" class="ml_2_2"></a></li>
<li><a href="#" class="ml_2_3" target="_blank"></a></li>
<li><a href="news_detail_03.html" class="ml_2_4" target="_blank"></a></li>
</ul>
<ul id="two_gamedates">
<li><a href="#" class="ml_3_1" target="_blank"></a></li>
<li><a href="#" class="ml_3_2" target="_blank"></a></li>
<li><a href="#" class="ml_3_3" target="_blank"></a></li>
<li><a href="http://221.229.197.101:8081/zhuce.html" class="ml_3_4" target="_blank"></a></li>
</ul>
<ul id="two_download">
<li><a href="https://pan.baidu/s/11MMxPaHWVifKjezAANRzpw" class="ml_5_1" target="_blank"></a></li>
</ul>
<ul id="two_followUs">
<li><a href="https://jq.qq/?_wv=1027&k=5jEXxAe" class="ml_4_1"></a></li>
</ul>
</div>
</dd>
</dl>
<!--导航&下拉菜单 end-->
</div>
<!--wra start-->
<div class="wra">
<div class="part1_bg">
<div class="p1_a">
<div class="p1_a1">
<a href="https://jq.qq/?_wv=1027&k=5jEXxAe" class="p1_a1a event_point" target="_blank" gameid="0" eventname="szr_download_ios_button"></a>
<a href="https://pan.baidu/s/11MMxPaHWVifKjezAANRzpw" class="p1_a1c event_point" gameid="0" eventname="szr_download_ios_yy_button"></a>
</div>
<div class="p1_a2">
<canvas width="230" height="230" id="canvas" style="width: 230px;height:124px;background-color: rgba(0,0,0,0);"></canvas>
<div id="overlay">
</div>
</div>
</div>
<!--幻灯 start-->
<div class="p1_b">
<div id="player">
<ul class="Limg">
<li><a href="http://szr.8864/special/newkoo/" target="_blank"><img src="images/lb01.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
<li><a href="data.html" target="_blank"><img src="images/lb02.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
<li><a href="http://mobgame.qq/zone/szr/" target="_blank"><img src="images/lb03.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
<li><a href="http://db.18183/szr" target="_blank"><img src="images/lb04.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
<li><a href="http://game.91/szr/" target="_blank"><img src="images/lb05.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
<li><a href="http://langang.tmall/" target="_blank"><img src="images/lb06.jpg" /></a></li>
<!--$slidearr_1['filePath'] -->
</ul>
<cite class="Nubbt"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> <span></span> </cite>
<script type="text/javascript" src="js/slide.js"></script>
</div>
</div>
<!--幻灯 end-->
<!--新闻 start-->
<div class="p1_c">
<div class="p1_c1">
<span onmouseover="shu(1,2,4)" id="s_2_1" class="sx_2_1_1"></span>
<span onmouseover="shu(2,2,4)" id="s_2_2" class="sx_2_2"></span>
<span onmouseover="shu(3,2,4)" id="s_2_3" class="sx_2_3"></span>
<span onmouseover="shu(4,2,4)" id="s_2_4" class="sx_2_4"></span>
<a href="#" class="p1_c1_more" target="_blank"></a>
</div>
<div class="p1_c2" id="table_2_1" style="display:;text-align: left;">
<div class="p1_c2a" style="text-align: center;">
<a href="news_detail_01.html" target="_blank">《时光龙之谷》老带新活动福利来袭！</a>
</div>
<div class="p1_c2b"></div>
<div class="p1_c2c">
<span>[新闻]</span>
<div>
<a href="news_detail_02.html" target="_blank">新手攻略</a>
</div>
<span>[01/14]</span>
</div>
<div class="p1_c2c">
<span>[新闻]</span>
<div>
<a href="news_detail_03.html" target="_blank">游戏介绍</a>
</div>
<span>[01/14]</span>
</div>
<div class="p1_c2c">
<span>[新闻]</span>
<div>
<a href="#" target="_blank">《时光龙之谷》2018-08-26正式开服！</a>
</div>
<span>[01/14]</span>
</div>
</div>
<div class="p1_c2" id="table_2_2" style="display:none;">
<div class="p1_c2a">
<a href="news_detail_01.html" target="_blank">《时光龙之谷》老带新活动福利来袭！</a>
</div>
<div class="p1_c2b"></div>
</div>
<div class="p1_c2" id="table_2_3" style="display:none;">
<div class="p1_c2a">
<a href="news_detail_01.html" target="_blank">《时光龙之谷》老带新活动福利来袭！</a>
</div>
<div class="p1_c2b"></div>
<div class="p1_c2c">
<span></span>
<div>
<a href="/statics/article/1/437.html" target="_blank"></a>
</div>
<span></span>
</div>
</div>
<div class="p1_c2" id="table_2_4" style="display:none;">
<div class="p1_c2a">
<a href="news_detail_01.html" target="_blank">《时光龙之谷》老带新活动福利来袭！</a>
</div>
<div class="p1_c2b"></div>
<div class="p1_c2c">
<span></span>
<div>
<a href="/statics/article/1/527.html" target="_blank"></a>
</div>
<span></span>
</div>
</div>
</div>
<!--新闻 end-->
</div>
<!--灰色背景 start-->
<div class="main">
<!--左侧 start-->
<div class="m_left">
<div class="ml_a">
<a href="#" class="ml_btn1" target="_blank"></a>
<a href="news_detail_02.html" class="ml_btn2" target="_blank"></a>
<a href="news_detail_03.html" class="ml_btn3" target="_blank"></a>
<a href="#" class="ml_btn4" target="_blank"></a>
</div>
<div class="ml_c" style="margin-top: 30px;">
<font style="color:#325b92;">128349378</font>
</div>
</div>
<!--左侧 end-->
<!--右侧 start-->
<div class="m_right">
<!--职业选项卡 start-->
<div class="mr_b_con1" id="table_1_1" style="display:;">
<a href="#" class="mr_b_btn" target="_blank"></a>
</div>
<div class="mr_b_con2" id="table_1_2" style="display:none;">
<a href="http://szr.8864/special/job/mrge.html" class="mr_b_btn" target="_blank"></a>
</div>
<div class="mr_b_con3" id="table_1_3" style="display:none;">
<a href="http://szr.8864/special/job/summoner.html" class="mr_b_btn" target="_blank"></a>
</div>
<div class="mr_b_tit">
<span onmouseover="shu(1,1,3)" id="s_1_1" class="sx_1_1_1"></span>
<span onmouseover="shu(2,1,3)" id="s_1_2" class="sx_1_2"></span>
<span onmouseover="shu(3,1,3)" id="s_1_3" class="sx_1_3"></span>
</div>
<!--职业选项卡 end-->
<!--游戏截图 start-->
<div class="mr_c_tit"></div>
<div class="rollBox">
<div class="jt_c1" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div class="jt_c2" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">
<a href="javascript:openDialog('openWin');"><img class="jt_c3_img" src="images/jt_img01.jpg" alt="" /></a>
<a href="javascript:openDialog('openWin2');"><img class="jt_c3_img" src="images/jt_img02.jpg" alt="" /></a>
<a href="javascript:openDialog('openWin3');"><img class="jt_c3_img" src="images/jt_img03.jpg" alt="" /></a>
<a href="javascript:openDialog('openWin');"><img class="jt_c3_img" src="images/jt_img01.jpg" alt="" /></a>
<a href="javascript:openDialog('openWin2');"><img class="jt_c3_img" src="images/jt_img02.jpg" alt="" /></a>
<a href="javascript:openDialog('openWin3');"><img class="jt_c3_img" src="images/jt_img03.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
<!--游戏截图 end-->
</div>
<!--右侧 end-->
<br style="height:1px; overflow:hidden; clear:both;" />
</div>
<!--灰色背景 end-->
<div class="tss">
<pre><strong>适龄提示</strong>：适合18岁以上玩家使用 <strong>游戏健康公告</strong>：抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</pre>
</div>
</div>
<!--wra end-->
<!--游戏截图弹窗 start-->
<div id="openWin" class="jt_tc" style="display:none;">
<img src="images/jt_imgb1.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin2" class="jt_tc" style="display:none;">
<img src="images/jt_imgb2.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin3" class="jt_tc" style="display:none;">
<img src="images/jt_imgb3.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin4" class="jt_tc" style="display:none;">
<img src="images/jt_imgb4.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin5" class="jt_tc" style="display:none;">
<img src="images/jt_imgb5.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin6" class="jt_tc" style="display:none;">
<img src="images/jt_imgb6.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin7" class="jt_tc" style="display:none;">
<img src="images/jt_imgb7.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin8" class="jt_tc" style="display:none;">
<img src="images/jt_imgb8.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin9" class="jt_tc" style="display:none;">
<img src="images/jt_imgb9.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin10" class="jt_tc" style="display:none;">
<img src="images/jt_imgb10.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<div id="openWin11" class="jt_tc" style="display:none;">
<img src="images/jt_imgb11.jpg" />
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn" />
</div>
<!--游戏截图弹窗 end-->
<!--微信弹窗 start-->
<div id="openWin12" class="wx_tc" style="display:none;">
<input type="button" onclick="javascript:showDialog.hide()" class="closebtn2" />
</div>
<!--微信弹窗 start-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stat.js"></script>
<script type="text/javascript" src="js/main_curr.js"></script>
<script language="javascript" src="js/function.js"></script>
<!--弹出框 start-->
<script type="text/javascript">
function openDialog(myid){
showDialog.show({id:myid,bgcolor:'#000',opacity:60});
}
</script>
<script src='js/easeljs-NEXT.min.js'></script>
<script src='js/preloadjs.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
更多推荐
HTML+CSS+JS——龙之谷网络游戏(9页) 学生网游网页设计模板 大学生HTML网页制作作品 简单手游网页设计成品 dreamweaver学生网站模板
发布评论