15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+Ja

HTML5期末大作业:仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+Ja

时间:2023-10-01 00:42:01 | 来源:网站运营

时间:2023-10-01 00:42:01 来源:网站运营

HTML5期末大作业:仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业:

HTML5期末大作业:仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业

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

获取更多源码

PC电脑端关注我们

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

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

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

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

@TOC

一、作品展示







二、文件目录







三、代码实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>yeahWorld</title> <link rel="icon" href="./static/v4/images/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="./static/v4/css/public.css"> <link rel="stylesheet" href="./static/v4/css/index.css"> <script src="./static/v4/js/jquery.min.js"></script></head><body> <div class="nav"> <div class="nav_con"> <img class="logo" src="./static/v4/images/logo.png" width="10%"/> <img class="logo_infro" src="./static/v4/images/logo_infro.png" width="15%"/> <ul class="nav_ul"> <li class="nav_li"><a href="index.html" class="active_hover">首页</a><div></div></li> <li class="nav_li"><a href="about.html">关于悦世界</a><div></div></li> <li class="nav_li"><a href="game.html">悦世界游戏</a><div></div></li> <li class="li_ep">加入悦世界<div class="li_list"><a href="join.html">社会招聘</a></div><div class="li_list"><a href="http://xiaozhao.yeahworld.com/index.html">校园招聘</a></div> </li> <li class="nav_li"><a href="work.html">商务合作</a><div></div></li> <li class="nav_li"><a href="contact.html">联系我们</a><div></div></li> </ul> </div> </div> <div class="lunbanner"> <a class="lunbo_a" href="http://fantasy.yeahworld.com/"> <div class="lunbo"> </div> </a> <div class="lun_list"> <ul> <li class="foucus_list"></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="lun_nav"> <ul> <a class="a1" href="game.html"> <li> <div class="lun_nav_title">悦世界游戏</div> <div class="lun_nav_infro">致力打造<br>多样化、创作性游戏</div> </li> </a> <a class="a2" href="work.html"> <li> <div class="lun_nav_title">商务合作</div> <div class="lun_nav_infro">真诚 合作 共赢<br>期待与您建立全面的商务关系</div> </li> </a> <a class="a3" href="http://xiaozhao.yeahworld.com/index.html"> <li> <div class="lun_nav_title">悦世界招聘</div> <div class="lun_nav_infro">悦世界精英训练营,<br>打造最TOP的你!</div> </li> </a> </ul> </div> <div class="recommend"> <div class="r_title">热门推荐</div> <div class="r_infro">RECOMMEND GAME</div> <div class="r_pic"> <div class="feng_pic"> <div class="r_c_cover"> <div class="r_c_c_title_one">《风暴幻想》<br/>风暴来袭 集结救世</div> <span class="r_c_line_one"></span> <div class="r_c_c_font_one">千人屠龙战一触即发</div> <div class="r_c_c_btn_one"><a href="http://fantasy.yeahworld.com/" target="_blank"><img src="./static/v4/images/right.png"/></a></div> </div> </div> <div class="find_pic"> <div class="r_c_cover"> <div class="r_c_c_title">《寻找前世之旅》<br/>同名电视剧正版授权</div> <span class="r_c_line"></span> <div class="r_c_c_font">剧情还原再现经典</div> <div class="r_c_c_btn"><a href="http://g.iqiyi.com/xzqszl" target="_blank"><img src="./static/v4/images/right.png"/></a></div> </div> </div> <div class="glod_pic"> <div class="r_c_cover"> <div class="r_c_c_title">《妖神传说》<br/>为爱入魔妖神出世</div> <span class="r_c_line"></span> <div class="r_c_c_font">全新坐骑惊艳登场</div> <div class="r_c_c_btn"><a href="http://yscs.yeahworld.com/" target="_blank"><img src="./static/v4/images/right.png"/></a></div> </div> </div> <div class="warm_pic"> <div class="r_c_cover"> <div class="r_c_c_title">《征战十三州》<br/>九月新版本手游发布</div> <span class="r_c_line"></span> <div class="r_c_c_font">裂图封王 君临十三州</div> <div class="r_c_c_btn"><a href="http://zzssz.yeahworld.com/" target="_blank"><img src="./static/v4/images/right.png"/></a></div> </div> </div> <div class="light_pic"> <div class="r_c_cover"> <div class="r_c_c_title">《神域之光》<br/>触摸会呼吸的魔幻世界</div> <span class="r_c_line"></span> <div class="r_c_c_font">新资料片震撼开启</div> <div class="r_c_c_btn"><a href="http://sky.yeahworld.com/" target="_blank"><img src="./static/v4/images/right.png"/></a></div> </div> </div> </div> </div> <div class="brang_video"> <div class="r_title">品牌视频</div> <div class="r_infro">BRANG VIDEO</div> <div class="b_content"> <div class="b_content_infro"> <div class="b_con_cover"> <div class="video_play2"> <img src="./static/v4/images/play.png"/> </div> </div> <div class="play_video2"> <video src="./static/v4/images/movie.mp4" width="100%" height="100%" controls></video> </div> </div> <div class="b_content_infro"> <div class="b_c_infro_t">风暴幻想</div> <div class="b_c_infro_con">《风暴英雄》游戏选用清晰独特的幻想题材,在延续经典的PVP、PVE玩法的基础上,加入革新的战斗模式,激爽畅快的竞技快感,让人欲罢不能。</div> <div class="b_c_btn"><a href="http://fantasy.yeahworld.com/" target="_blank"><img src="./static/v4/images/btn.png"></a></div> </div> <div class="b_content_infro"> <div class="b_c_infro_t b_c_t2">妖神传说</div> <div class="b_c_infro_con b_c_t2">《妖神传说》是悦世界清新唯美Q版MMO新作,以东方仙侠为背景,拥有跌岩起伏的剧情,绚丽的职业特色技能,独特创新的游戏成长系统,丰富多彩的任务以及各具特色的游戏玩法,带你体验一段激情四溢的仙侠战斗之旅。</div> <div class="b_c_btn b_c_t2"><a href="http://yscs.yeahworld.com/" target="_blank"><img src="./static/v4/images/btn.png"></a></div> </div> <div class="b_content_infro"> <div class="b_con_cover"> <div class="video_play"> <img src="./static/v4/images/play.png"/> </div> </div> <div class="play_video"> <video src="./static/v4/images/movie2.mp4" width="100%" height="100%" controls></video> </div> </div> </div> </div> <div class="contact_us"> <div class="contact_con"> <div class="con_list c_c_one"> <div class="con_list_title">联系我们</div> <div class="c_l_wx"> <img src="./static/v4/images/wx.png"/> <div class="wx_font">关注官方微信<br>获得更多资讯</div> <img class="wx_img" src="./static/v4/images/ewm1.jpg"/> </div> <div class="c_l_wx c_l_wb"> <img src="./static/v4/images/wb.png"/> <div class="wx_font">关注官方微博<br>获得更多资讯</div> </div> </div> <div class="con_list c_c_two"> <div class="c_c_t_con"> <img src="./static/v4/images/mail.png"/> <div class="c_mail">E-mail:advice@yeahworld.com</div> </div> <div class="c_c_t_con c_c_address"> <img src="./static/v4/images/address.png"/> <div class="c_mail">地址:浙江省杭州市海珠区新港东路琶洲新村</div> </div> </div> <div class="con_list c_c_three"> <a href="work.html?en"> <ul> <li class="three_special_li">business</li> <li>CPS、CPA and other cooperation in China</li> <li>Media cooperation</li> <li>Global market business</li> </ul> </a> </div> </div> </div> <div class="footer"> <div class="footer_con"> <div class="foote_logo"> <img src="./static/v4/images/logo.png"/> </div> <div class="footer_font"> <ul> <li><a href="about.html" target="_blank">关于悦世界 </a><span class="np">|</span> <a href="" target="_blank"></a>服务条款<span class="np">|</span> <a href="work.html" target="_blank">商务合作</a><span class="np">|</span> <a href="contact.html" target="_blank">联系我们</a></li> <li><a href="http://sky.yeahworld.com/news/2015/0211/1190.html" target="_blank">《网络游戏管理暂行办法》</a>&nbsp;<a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/gameNetTag/386615A1709B41BF989E35C4D54E9522" target="_blank"><img src="./static/v4/images/wen2.png"/></a> &nbsp;<a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/gameNetTag/4028c08b525431c6015281d9acbd4cb9" target="_blank">文网游备字[2016]M-RPG415号</a></li> <li>杭州悦世界信息科技有限公司 版权所有 粤网文 【2013】 0785-185号 粤ICP备13055200号-1</li> </ul> </div> </div> </div></body></html><script> $(function() { function play() { this.a = -1; this.url = ["banner1.jpg","banner2.jpg","banner3.jpg","banner4.jpg"]; this.aurl = ["http://fantasy.yeahworld.com/","http://zzssz.yeahworld.com/","http://g.iqiyi.com/xzqszl","join.html"]; }; play.prototype = { Lun:function() { $(".lunbanner .lunbo_a").attr("href",Play.aurl[Play.a]); $(".lunbanner .lunbo").css({"background":"url(./static/v4/images/"+Play.url[Play.a]+") no-repeat center"},"backgroundSize","auto 100%"); if(Play.a > 2) { Play.a = -1; } Play.a++; $(".lun_list ul li").removeClass("foucus_list"); $(".lun_list ul li").eq(Play.a-1).addClass("foucus_list"); // console.log(Play.a); }, Inval:function() { setInterval(Play.Lun(),2000); }, Click:function() { $(".lun_list ul li").click(function() { console.log($(this).index()); $(".lun_list ul li").removeClass("foucus_list"); $(".lun_list ul li").eq($(this).index()).addClass("foucus_list"); Play.a = $(this).index(); $(".lunbo").css({"background":"url(./static/v4/images/"+Play.url[Play.a]+") no-repeat center"},"backgroundSize","100%"); $(".lunbanner .lunbo_a").attr("href",Play.aurl[Play.a]); }); }, NavHover:function() { $(".nav_li").hover(function() { $(this).find('div').stop().animate({"width":"100%"},300); },function() { $(this).find('div').stop().animate({"width":"0px"},200); }); }, Video:function(a,b) { $(a).click(function() { console.log($(this).find("video")); $(b).fadeIn(); $(this).parent().parent().find("video")[0].play(); }); } } var Play = new play() Play.Lun(); Play.Inval(); setInterval(Play.Inval,5000); Play.Click(); Play.NavHover(); Play.Video(".video_play2",".play_video2"); Play.Video(".video_play",".play_video"); })</script>






四、获取更多源码

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

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !




五、学习资料

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





六、更多源码

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



关键词:游戏,世界,设计,作业

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭