900字范文 > HTML5期末大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScr

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

时间：2020-08-27 16:23:48

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

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

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

文章目录

HTML5期末大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业作品介绍一、作品展示二、文件目录三、代码实现五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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="/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="/"><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="/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="/" 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="/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="/" 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="/" 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="/" 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="/" 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="/" 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@</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="/news//0211/1190.html" target="_blank">《网络游戏管理暂行办法》</a> <a href="http://sq./ccnt/sczr/service/business/emark/gameNetTag/386615A1709B41BF989E35C4D54E9522" target="_blank"><img src="./static/v4/images/wen2.png"/></a>  <a href="http://sq./ccnt/sczr/service/business/emark/gameNetTag/4028c08b525431c6015281d9acbd4cb9" target="_blank">文网游备字[]M-RPG415号</a></li><li>广州悦世界信息科技有限公司版权所有粤网文【】 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 = ["/","/","/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>