535.大学生HTML5期末大作业 —【仙剑奇缘游戏主题网页(3页)】 Web前端网页制作 html5+css3+js

最新推荐文章于 2025-05-20 14:08:24 发布

一只小小的眠羊

最新推荐文章于 2025-05-20 14:08:24 发布

阅读量761

点赞数 17

分类专栏：大学生期末大作业游戏文章标签：前端 html 课程设计 html5 css3 游戏 javascript

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/148049558

版权

大学生期末大作业同时被 2 个专栏收录

486 篇文章

订阅专栏

游戏

13 篇文章

订阅专栏

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html5+css3+js：导航菜单、图片轮翻、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含3个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!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">

<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">jwqysy</div>
<div class="c_con_b_f_title4"> <img src="picture/circle_arrow.png"/> <span>扫描立刻关注</span> </div>
</div>
</div>
</div>
</div>
</div>

<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>

<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> 官方交流群 </div>
<div class="r_qq_hao">888888</div>
<div class="right_phone"> <img src="picture/rphone.png"/> 客服热线  </div>
<div class="r_qq_hao">010-88888888</div>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

.app {
   z-index: 5;
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1920px;
min-width: 1200px;
overflow: hidden;
}
   /*==== right_box ======*/
   .right_box {
       z-index: 10;
   position: fixed;
   top: 30%;
   right: -118px;
   height: 330px;
   width: 180px;
   background: url(../images/rightboxbg.png) no-repeat;
   background-size: cover;
   transition: 1s ease;
   }
       .right_btn {
   position: absolute;
   left: 36px;
   top: 4px;
   font-size: 13px;
   text-align: center;
   width: 15px;
   height: 90%;
   padding: 5px;
   background: url(../images/right_btn.png) no-repeat;
   background-size: 100%;
   cursor: pointer;
   color: white;
   transition: 1s ease;
   }
   .right_font {
       margin-top: 120px;
       line-height: 20px;
   }
       .left_arrow {
       transform: rotate(180deg);
       }
   .right_con {
   position: relative;
   float: right;
   margin-top: 5%;
   width: 118px;
   height: 90%;
   font-size: 12px;
   text-align: center;
   }
       .right_line1 {
   z-index: 6;
   position: absolute;
   top: 220px;
   width: 100%;
   height: 1.2px;
   background: #AB4055;
   }
   .right_line2 {
   z-index: 6;
   position: absolute;
   top: 150px;
   width: 100%;
   height: 1.2px;
   background: #AB4055;
   }
   .rightbtn_ewm {
   margin-top: 15%;
   width: 80%;
   }
   .right_con span {
   display: inline-block;
   margin-top: 6%;
   color: #AB4055;
   }
   .right_qq {
   margin-top: 35px;
   color: #AB4055;
   }
   .right_qq img {
   vertical-align: bottom;
   }
   .r_qq_hao {
   margin-top: 8px;
   }
   .right_phone {
   margin-top: 40px;
   color: #AB4055;
   }
   .right_phone img {
   vertical-align: bottom;
   }
   .qq_icon {
   width: 50px;
   height: 50px;
   background: blue;
   }
   /*====== Nav =======*/
   .navtop {
       z-index: 4;
       position: relative;
       width: 100%;
       height: 70px;
       background: white;
   }

...

3.JS

代码如下（节选示例）：

/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */
!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.1.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=r.isArray(d)))?(e?(e=!1,f=c&&r.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(w(a))

...