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

news/2024/11/24 23:38:12/

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

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

文章目录

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

五、学习资料

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


六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述


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

相关文章

win10任务栏透明_谈谈我的Windows系统使用历程和win10桌面美化

我的Windows系统使用历程 —1— 我最早接触到的电脑系统是Windows XP&#xff0c;那时我还刚上小学&#xff0c;流行的电脑桌面是一个青青草原的壁纸&#xff0c;配合着蓝色调的任务栏和绿色的开始菜单&#xff0c;我们最早对于电脑桌面的记忆就定格在这样的一个画面&#xff…

影视动漫、游戏建模大佬都在用,做出最美艺术作品~还可以做壁纸

大嘠吼&#xff01;先别说话&#xff0c;看我好看么&#xff1f;不是&#xff0c;看图好看么&#xff0c;下面这些图好看吗&#xff1f;这些图片可以做壁纸哦&#xff01;收藏了&#xff01;&#xff01;&#xff01;&#xff01; 用UE4做的&#xff0c;厉不厉害&#xff1f;让…

大开眼界!终于等到这部每一帧都是壁纸的纪录片!

全世界只有3.14 % 的人关注了 爆炸吧知识 中国&#xff0c;拥有七大水系&#xff0c;超过2600个自然湖泊&#xff0c;299.7万平方公里海洋面积。生活在陆地&#xff0c;周遭的一切都是被水体所包裹。但还从来没有哪一部纪录片&#xff0c;系统探秘过中国水下。 水面之上&#x…

Qt——Qt控件之容器-QTabWidget选项卡控件的使用总结(例程:Qt标题栏多页面切换 选项卡切换页面)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》

Lecture 19 Question Answering

目录 introductionIR-based QA (dominant approach)Knowledge-based QAHybrid QAConclusion introduction Definition: question answering (“QA”) is the task of automatically determining the answer for a natural language questionMostly focus on “factoid” quest…

JavaScript 类继承

在JavaScript中&#xff0c;类继承是一种机制&#xff0c;允许你创建一个新的类&#xff0c;并继承来自一个或多个父类的属性和方法。这使得你可以构建更复杂的对象层次结构&#xff0c;并共享通用的行为和特性。 下面是几种常见的类继承方式&#xff1a; 1. **单继承&#x…

联想m100耗材灯亮_联想m100加粉清零方法

联想m100加粉清零方法如下&#xff1a; 1、首先打开打印机左边的圆形塑料盖。 2、接着用钳子插进去搅动一下&#xff0c;把废弃的粉末倒出来。 3、接着把加粉瓶插入这个圆形口&#xff0c;进行加分&#xff0c;小心不要倒出来。 4、加粉加好之后把右边的计数器归零&#xff0c;…

硒鼓带不带芯片区别_为什么有些打印机墨盒原本并无芯片,而灌注墨粉后则需要加装芯片才能使用?...

你说的某些打印机是什么型号&#xff1f; 激光打印机需要清零是因为&#xff0c;某些打印机没有墨粉传感器&#xff0c;有没有粉机器自己也不知道。 所以有个计数器专门记录张数&#xff0c;这种计数器要么是机械式&#xff0c;要么是电子式。 联想/兄弟打印机机械式计数器 例如…