HTML5期末大作业：游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- HTML5期末大作业：游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>萌王EX首页</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/animation.css"><script src="js/jquery-1.8.3.min.js"></script><script src="js/js.js"></script><script src="js/tiaozhuan.js"></script>
</head>
<body><div class="main"><!-- 顶部导航 --><div class="topnav wbox"><ul><li><a href="index.html">首页</a></li><li class="zxzx"><a href="#">最新资讯</a><div class="nav_ls hidden"><a href="news-message.html">新闻资讯</a><a href="#">最新公告</a><a href="#">热门活动</a></div></li><li class="yxsd"><a href="#">游戏设定</a><div class="nav_ls hidden"><a href="fiction.html">官方世界观小说</a><a href="snhd.html">少女皇帝</a><a href="smqj.html">使魔群集</a><a href="tswf.html">圣冠系统</a><a href="tswf.html">宝石系统</a></div></li><li class="trzp"><a href="#">同人作品</a><div class="nav_ls hidden" id="trzp_nav"><a href="tongren.html">MMD作品</a><a href="tongren.html">CV剧作品</a><a href="tongren.html">漫画作品</a><a href="#" style="display: none"></a><a href="tongren.html">表情包下载</a><a href="javascript:;">MMD模型配布</a></div></li><li class="logo"><img src="img/logo.png" alt=""></li><li class="glzl"><a href="#">攻略资料</a><div class="nav_ls hidden"><a href="xsrm.html">新手专区</a><a href="javascript:;">游戏攻略</a><a href="javascript:;">KFZ有约</a></div></li><li class="yhzq"><a href="#">音画专区</a><div class="nav_ls hidden"><a href="index.html#yhZone">宣传视频</a><a href="index.html#yhZone">作战实录</a><a href="index.html#yhZone">精美壁纸</a><a href="index.html#yhZone">游戏截图</a></div></li><li class="lt"><a href="#">论坛</a></li><li class="gzh"><a href="#">公众号</a><div class="topQrCode"><img src="img/qrCode_8cd5dc0.jpg"></div></li></ul></div><!-- title --><div id="dowebok" class="title"><img src="img/slogan_0fbda3d.png" class="mySlideUp"></div><!-- 内容 --><div class="content mySlideUp2" id="content"><div class="ewm_dw"><div class="ewm"><img src="img/qrCode_8cd5dc0.jpg"></div><div class="dw"><a href="#" class="apple"></a><a href="#" class="android"></a></div></div><a href="#" class="icon_logo"><img src="img/icon_56aca49.png" alt=""></a><a href="#" class="video"><span></span><em></em></a><a href="#" class="yuyue"></a></div><!-- 游戏资讯 --><div class="game_news"><h2></h2><div class="game_banner"><div class="middle_right"><div id="lunbobox"><div id="toleft"><</div><div class="lunbo"><a href="#"><img src="img/1af6f2bb-e1e3-493f-ae08-4b64a71dcc21.jpg"></a><a href="#"><img src="img/06dd3b9c-97b3-4385-a659-6ec57ff751b2.jpg"></a></div><div id="toright">></div><ul><li></li><li></li></ul><span></span></div></div></div><div class="news_list"><div class="newMenu"><div class="newsHd" id="news_title"><a href="#" class="on"><s></s><span>最新</span></a><a href="#"><s></s><span>新闻</span></a><a href="#"><s></s><span>公告</span></a><a href="#"><s></s><span>活动</span></a><a href="#"><s></s><span>攻略</span></a></div><div class="newsMore"><a href="#"><div class="lines"><span class="lt"></span><span class="lr"></span><span class="lb"></span><span class="ll"></span></div></a></div></div><!-- 新闻列表 --><div class="newsBd" style="width: 4088px; position: relative; overflow: hidden; padding: 0px; margin: 0px;"><!--最新--><ul style="float: left; width: 584px;"><li class="placedTop"><a href="" target="" title="">感谢不屏蔽 感谢每一份热爱</a></li><li><a href="#" target="" title=""><em>[新闻]</em>感谢不屏蔽 感谢每一份热爱</a><span>2017-12-01</span></li><li><a href="#" target="" title=""><em>[新闻]</em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光</a><span>2017-11-16</span></li><li><a href="#" target="" title=""><em>[新闻]</em>军队王者来袭！ 《萌王EX》首批名将单位曝光</a><span>2017-10-27</span></li><li><a href="#" target="" title=""><em>[新闻]</em>强力女子天团登场！ 《萌王EX》全新军队原画欣赏</a><span>2017-10-12</span></li><li><a href="#" target="" title=""><em>[新闻]</em>全新英雄加入！ 《萌王EX》少女皇帝末路宗师曝光</a><span>2017-09-27</span></li></ul><!--新闻--><ul style="float: left; width: 584px;"><li class="placedTop"><a href="" target="" title="">感谢不屏蔽 感谢每一份热爱</a></li><li><a href="#" target="" title=""><em>[新闻]</em>感谢不屏蔽 感谢每一份热爱</a><span>2017-12-01</span></li><li><a href="#" target="" title=""><em>[新闻]</em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光</a><span>2017-11-16</span></li><li><a href="#" target="" title=""><em>[新闻]</em>军队王者来袭！ 《萌王EX》首批名将单位曝光</a><span>2017-10-27</span></li><li><a href="#" target="" title=""><em>[新闻]</em>强力女子天团登场！ 《萌王EX》全新军队原画欣赏</a><span>2017-10-12</span></li><li><a href="#" target="" title=""><em>[新闻]</em>全新英雄加入！ 《萌王EX》少女皇帝末路宗师曝光</a><span>2017-09-27</span></li></ul><!--公告--><ul style="float: left; width: 584px;"><li class="placedTop"><a href="" target="" title="">《萌王ex》2017年4月20日测试结束公告</a></li><li><a href="#" target="" title="《萌王ex》2017年4月20日测试结束公告"><em>[公告]</em>《萌王ex》2017年4月20日测试结束公告</a><span>2017-05-05</span></li><li><a href="#" target="" title="《萌王ex》2017年4月20日测试活动公告"><em>[公告]</em>《萌王ex》2017年4月20日测试活动公告</a><span>2017-04-28</span></li><li><a href="#" target="" title="《萌王ex》2017年4月20日测试相关事项说明"><em>[公告]</em>《萌王ex》2017年4月20日测试相关事项说明</a><span>2017-04-19</span></li><li><a href="#" target="" title="《萌王ex》2017年4月20日测试开服公告"><em>[公告]</em>《萌王ex》2017年4月20日测试开服公告</a><span>2017-04-19</span></li><li><a href="#" target="" title="【暴打开发组，dalao教做人】活动获奖公告"><em>[公告]</em>【暴打开发组，dalao教做人】活动获奖公告</a><span>2016-11-29</span></li></ul><!--活动--><ul style="float: left; width: 584px;"><li class="placedTop"><a href="#" target="" title="">关注《萌王EX》双微赢专属君王礼赞</a></li><li><a href="#" target="" title=""><em>[活动]</em>关注《萌王EX》双微赢专属君王礼赞</a><span>2016-11-16</span></li><li><a href="#" target="" title=""><em>[活动]</em>首测官方论坛新位面福利活动公告</a><span>2016-11-16</span></li><li><a href="#" target="" title=""><em>[活动]</em>萌动首测少女皇帝的六大馈赠福利活动公告</a><span>2016-11-16</span></li><li><a href="#" target="" title=""><em>[活动]</em>【限时活动】暴打开发组，dalao教做人</a><span>2016-11-16</span></li></ul><!--攻略--><ul style="float: left; width: 584px;"><li class="placedTop"><a href="" target="" title="">《萌王EX》少女皇帝英雄上手攻略</a></li><li><a href="#" target="" title=""><em>[攻略]</em>《萌王EX》少女皇帝英雄上手攻略</a><span>2017-04-18</span></li><li><a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略（三 特色玩法介绍）</a><span>2017-04-18</span></li><li><a href="#" target="" title=""><em>[攻略]</em>《萌王EX》特色使魔玩法上手攻略</a><span>2017-04-18</span></li><li><a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略（二.君王使魔介绍）</a><span>2017-04-18</span></li><li><a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略（<li><a href="#"><img src="img/z2_2aca4fb.jpg"><s></s><div class="showBox bVideo"><span class="yhsp"></span><p>从零开始做皇帝之斯大林司机飙车实录</p></div></a></li><li><a href="#"><img src="img/z3_60edf22.jpg"><s></s><div class="showBox bVideo"><span class="yhsp"></span><p>从零开始做皇帝之王莽内战解析微操细节</p></div></a></li><li><a href="#"><img src="img/z4_fc37ccf.jpg"><s></s><div class="showBox bVideo"><span class="yhsp"></span><p>萌王EX前置兵线rush战术和天降城市流战术解析</p></div></a></li></ul></div></div></div><!-- 悬浮 --><a href="javascript:;" class="gzh_off"></a><div class="slideBox"><a href="javascript:;" class="gzh_close"></a><div class="wbCode"><img src="img/qrCode_8cd5dc0.jpg"></div><p>关注官微赢胖次伞</p></div><!-- 底部 --><div class="NIE-copyRight"><div class="nie-copyRight-new-inner"><div class="nie-cn-part1"><span class="nie-cn-logo"><a href="#" class="01"><img src="img/netease.1.png"></a><a href="#" class="02"><img src="img/nie.1.png"></a></span><span class="nie-cn-nav"><i class="nie-cn-nav-i1"><a href="#">公司简介</a> - <a href="#">客户服务</a> - <a href="#">相关法律</a> - <a href="#">网易游戏</a> - <a href="#">联系我们</a> - <a href="#">商务合作</a> - <a href="#">加入我们</a> </i><br><i class="nie-cn-nav-i2"> 网易公司版权所有 ©1997-2018 <a href="#" class="nie-cn-guardianship">点击查看家长监护工程</a></i></span></div><div class="nie-cn-part2"><P>本游戏适合16岁以上的玩家进入。</P><P>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。</P><span>《网络文化经营许可证》</span><span>浙网文[2016]0155-055号</span><span>新广出审[2016]3458号</span><span>ISBN 978-7-7979-1932-6</span><span>文网游备字〔2017〕Ｍ-RPG 0428 号</span></div></div></div></div></body>
</html>四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
