期末作业代码网页设计代码 游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript

news/2024/11/24 19:24:47/

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">&lt;</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">&gt;</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〕M-RPG 0428 号</span></div></div></div></div></body>
</html>

四、获取更多源码

~ 关注我,点赞博文~ 每天带你涨知识!
相关问题可以相互学习,可关注↓公Z号 获取更多源码


http://www.ppmy.cn/news/299345.html

相关文章

I'm a Mac:雄狮训练手册

《Im a Mac&#xff1a;雄狮训练手册》 基本信息 作者&#xff1a; Tony 郭涛 [作译者介绍] 出版社&#xff1a;人民邮电出版社 ISBN&#xff1a;9787115286949 上架时间&#xff1a;2012-7-16 出版日期&#xff1a;2012 年8月 开本&#xff1a;16开 页码&#xff1a;768 版次&…

Android 中的服务

废话只说一句&#xff1a;android aosp源码庞大&#xff0c;是个大草原&#xff0c;要跑马&#xff0c;请看准方向&#xff0c;本文就是个方向 (我不写长文&#xff0c;也不贪多&#xff0c;可能介绍不清楚&#xff0c;然后就这样&#xff0c;写给懂的人看) android既然分为 c…

分享我最新收藏的桌面主题资源07-28整理分享!

蓝天白云绿草XP桌面主题 主题类型&#xff1a;XP主题下载 / 主题大小&#xff1a;6.73 MB 蓝天白云绿草XP桌面主题下载由主题之家推荐下载&#xff0c;这是一款WindowsXP经典的蓝天、白云、草原XP电脑主题包&#xff0c;这也是一款非常养眼的XP电脑主题&#xff0c;相信大家一…

美图网上太多难以筛选,教你用Python挑选最合适的

前几天&#xff0c;極光同学写了篇下载王者荣耀皮肤的文章&#xff0c;可以轻松的获取各种英雄背景图&#xff0c;甚是激动&#xff0c;也想将桌面背景换成漂亮的&#xff0c;不过我对王者荣耀不感冒&#xff08;曝露年龄啦&#xff09;&#xff0c;时常会被必应搜索主页的背景…

windows 弹shell_从 Windows XP 到 Vista - 微软 Longhorn 开发史:第四弹 M7 下篇

原标题&#xff1a;从 Windows XP 到 Vista - 微软 Longhorn 开发史&#xff1a;第四弹 M7 下篇 后续内容敬请关注 IT 号 ⚠️ 多图预警(请在网络良好条件下观看) 前言 Windows Vista 是微软 Windows 开发历史上过程最为艰难与一波三折的版本&#xff0c;也是内核变化最大的(除…

access与python哪个好_美图太多,Python 帮你挑选最合适的!

前几天&#xff0c;極光同学写了篇下载王者荣耀皮肤的文章&#xff0c;可以轻松的获取各种英雄背景图&#xff0c;甚是激动&#xff0c;也想将桌面背景换成漂亮的&#xff0c;不过我对王者荣耀不感冒(曝露年龄啦)&#xff0c;时常会被必应搜索主页的背景图所震撼&#xff0c;于…

为什么黑色主题伤眼

黑色主题看起来比较酷&#xff0c;前景和背景的对比度比较高很清晰。而且液晶下黑色的发光量偏少。 那为什么还说黑色伤眼&#xff1f; 我们从色彩生理学和色彩心理学2个方面分析。 就人眼肌肉的紧张度而言&#xff0c;高对比度的伤害大于光线量的伤害。 在阳光明媚的草原上&a…

如何用10分钟做出一个表情包视频

大家知道&#xff0c;做表情包的&#xff0c;无非要么就出售&#xff0c;要么就是引流。一般出售的话&#xff0c;9.9或者19.9进群&#xff0c;后期免费更新。用表情包引流的目前会比较泛&#xff0c;对于某个项目的精准度会差一点&#xff0c;但是也不妨碍很多人拿去引流。引流…