HTML期末大作业~玄幻情缘游戏官网静态html模板

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面：HTML网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页新闻资讯玩法攻略等总共3个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

文章目录

HTML期末大作业~玄幻情缘游戏官网静态html模板
作品介绍
一、作品演示
- 1.官网首页
- 2.新闻资讯
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码
八、150套Echarts大数据可视化

1.官网首页

2.新闻资讯

二、代码目录

三、代码实现


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<title>仙剑奇缘</title>
<meta name="author" content="order by www.adminbuy.cn" />
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="app"> <!-- cover1 --><div class="cover1"><div class="c_content1"><div class="c_del1"></div><div class="c_cont1_main"> <img class="c_con1_title" src="picture/con1_title.png"/><div class="c_con1_box"> <img class="c_con_b_pic" src="picture/con_ewm.jpg"/><div class="c_con_b_font"><div class="c_con_b_f_title">剑舞奇缘</div><div class="c_con_b_f_title2">微信搜索公众号：</div><div class="c_con_b_f_title3">web前端小日记</div><div class="c_con_b_f_title4"> <img src="picture/circle_arrow.png"/> <span>扫描立刻关注</span> </div></div></div></div></div></div><!-- cover2 --><div class="cover2"><div class="c_content2"><div class="c_del2"></div><div class="c_cont2_main"> <img class="c_con2_title" src="picture/con2_title.png"/><div class="c_con2_tab"><div class="c_con_t_t1"><ul class="phonetab"><li class="con_tab_active">Android</li><li>ios</li></ul><input class="c_con_input1" value="" type="text" placeholder="请输入您的手机号"/><div class="con2_yan"><input class="c_con_input2" value="" type="text" placeholder="请输入您的验证码"/><input class="c_con_input3" type="submit" value="获取验证码"/></div></div></div><img class="con2_btn" src="picture/con2_btn.png"/><div class="con2_list"><ul><li><img src="picture/conlist1.png"/><br>铭文寻宝卷</li><li><img src="picture/conlist2.png"/><br>御灵水晶</li><li><img src="picture/conlist3.png"/><br>银鼠坐骑</li><li><img src="picture/conlist4.png"/><br>高级美酒</li><li><img src="picture/conlist5.png"/><br>御灵水晶</li></ul></div></div></div></div><!-- cover3 --><div class="cover3"><div class="c_content3"><div class="c_del3"></div><img class="c_con3_title" src="picture/con3_title.png"><div class="c_con3_font1"> 恭喜您预约成功，测试开始后我们将第一时间通过短信通<br/>知您，并发送预约礼包兑换码，敬请期待! </div><div class="c_con3_font2"> <span>关注微信公众号获取更多礼包信息:</span> <img src="picture/con_ewm.jpg"/> </div></div></div><!-- 客服 --><div class="right_box"><div class="right_btn"><div class="right_font">展开</div><div class="left_arrow"> <img src="picture/leftarrow.png"/> </div></div><div class="right_con"><div class="right_line1"></div><div class="right_line2"></div><img class="rightbtn_ewm" src="picture/xuan_ewm.png"> <span>扫一扫关注官方微信</span><div class="right_qq"> <a href="https://jq.qq.com/?_wv=1027&k=5XbrZuQ" target="_blank"><img src="picture/rqq.png"/></a>&nbsp;官方交流群 </div><div class="r_qq_hao">888888</div><div class="right_phone"> <img src="picture/rphone.png"/>&nbsp;客服热线&nbsp; </div><div class="r_qq_hao">010-88888888</div></div></div><!-- Nav --><div class="navtop"><div class="nav_con"> <img src="picture/logotop.jpg"/><div class="nav_font"> <span class="n_f_f1">剑舞奇缘</span><br/><span class="n_f_f2">3D玄幻情缘手游</span> </div><ul class="navul"><li> <a href="index.html">官网首页</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="news.html">新闻资讯</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="strategy">玩法攻略</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="javascript:void(alert('敬请期待！'));">资料大全</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li></ul></div></div><!-- banner --><div class="bgbanner"> <img src="picture/bgbanner.png" width="100%"> </div><!-- gift --><div class="gift"><div class="gift_list"> <img src="picture/ewmbg.png"/> <img class="absoulte_ewm" src="picture/9096d7171f944ae38b242948e6449701.gif"/><div class="g_store"> <a href=""><img class="an_pic_one" src="picture/appstore.png"/></a> <a href=""><img class="an_pic" src="picture/android.png"/></a> </div><img class="gf_gif" src="picture/gfgift.jpg"/> <img class="g_yuyue" src="picture/yuyue.png"/> </div><div class="gift_main"><div class="g_main_left"><div class="lunbo"><div class="lun_show"> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> </div><div class="lun_nav"><ul><li class="liactive"></li><li class="liactive"></li><li class="liactive"></li><li class="liactive"></li></ul></div></div></div><div class="g_main_right"><div class="tab"><div class="tab_line"></div><div class="tab_line2"></div><div class="tab_more"> <a href="news.html"><img src="picture/tabmore.png" alt="more"></a> </div><div class="tab_red"> <img src="picture/red.png"/> </div><ul class="nav_ul"><li class="lidom" style="color: #A53248"> 最新 <img class="lidom_icon" src="picture/arrowup.png" style="display:block" /> </li><li class="lidom"> 新闻 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 公告 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 活动 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 攻略 <img class="lidom_icon" src="picture/arrowup.png"/> </li></ul><!-- 须复制多个 --><div class="t_con t_con_active"><ul><li> <a href="">【新闻】1点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】1点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】2点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】2点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】3点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】3点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】4点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】4点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】5点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】5点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div></div></div></div></div><!-- gamestart --><div class="game"><div class="game_con"> <img src="picture/gamebg.png"/> </div></div><!-- gameafter --><div class="game_after"> <!-- <img class="gameafterbg" src="picture/gameafter.jpg"/> --><div class="game_after_main"><div class="lunbo2"><div class="lun_show2"> <img src="picture/afterlun1.png"/> <img src="picture/afterlun2.png"/> <img src="picture/afterlun3.png"/> <img src="picture/afterlun4.png"/> </div><div class="lun_nav2"><ul><li class="liactive2"></li><li class="liactive2"></li><li class="liactive2"></li><li class="liactive2"></li></ul></div></div></div></div><!-- footer --><div class="footer"><div class="footer_main"> <img src="picture/companylogo.png" alt="logo"><div class="footer_font"><ul><li>广州某某信息科技有限公司版权所有</li><li>Copyright © 2013-2016 baidu.com All Rights Reserved</li><li>广州信息科技有限公司 苏ICP12345678  粤网文【2016】0788-888号</li><li>地址：南京市玄武区玄武湖 <a href="http://www.adminbuy.cn" target="_blank">网站模板</a></li></ul></div></div></div>
</div>
</body>
</html>
<script>$(function() {function r_box() {var turn = 1;$(".right_btn").click(function() {if(turn == 1) {$(".right_box").css("right","0px");$(".right_font").text("收回");$(".left_arrow").css("transform","rotate(0deg)");turn = 0;}else {$(".right_box").css("right","-118px");$(".right_font").text("展开");$(".left_arrow").css("transform","rotate(180deg)");turn = 1;}});}r_box();// 轮播1function lun(name,name2,name3) {this.i = -1;this.inter;this.name = name;this.name2 = name2;this.name3 = name3;}lun.prototype = {// 公共函数keyi: function () {this.i++if (this.i == 4) {this.i = 0}$(this.name).removeClass("active");$(this.name).eq(this.i).addClass("active");$(this.name2).css("marginLeft",(-this.i) * 100 + "%");},liClick:function() {var that = this;$(this.name).click(function() {that.i = $(this).index()-1;that.keyi();});},Interval:function() {this.inter = setInterval(this.keyi.bind(this),2500);},Hover:function() {var that = this;$(this.name3).hover(function() {clearInterval(that.inter);},function() {that.Interval();});},start:function() {this.keyi();this.Interval();this.liClick();this.Hover();}}var Lunbo = new lun(".lun_nav ul li",".lun_show",".lunbo");Lunbo.start();var Lunbo2 = new lun(".lun_nav2 ul li",".lun_show2",".lunbo2");Lunbo2.start();// tab function tabs() {$(".nav_ul li").click(function() {// $(this).index()$(".t_con").hide();$(".t_con").eq($(this).index()).fadeIn(200);$(".nav_ul li img").hide();$(".nav_ul li img").eq($(this).index()).show();$(".nav_ul li").css("color","");$(".nav_ul li").eq($(this).index()).css("color",'#A53248');});}tabs();// coverfunction Coverhide(name1,name2,n) {$(name1).click(function() {$(this).parent().parent().fadeOut(200);console.log($(this).parent().parent());});$(name2).click(function() {$(".cover"+n).fadeIn(200);});}Coverhide(".c_del1",".gf_gif",1);Coverhide(".c_del2",".g_yuyue",2);Coverhide(".c_del3","",3);// ios && 安卓function phonetb() {$(".phonetab li").click(function() {$(".phonetab li").removeClass("con_tab_active");$(this).addClass("con_tab_active");});$(".c_con_input3").click(function() {var now = 60;console.log($(".c_con_input3").val());var Stt = setInterval(function () {$(".c_con_input3").attr("disabled",true);$(".c_con_input3").css({"background":"gray","color":"#A9A9A9"});$(".c_con_input3").val(now+'s后重新发送');now--if(now < 0) {clearInterval(Stt)$(".c_con_input3").val('获取验证码');$(".c_con_input3").css({"background":"#DDDDDD","color":"black"});$(".c_con_input3").attr("disabled",false);}},1000)});}phonetb();})
</script>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

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

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号获取更多源码 !