8.web前端网页制作王者荣耀游戏网页设计实例大学生期末大作业 html+css+js

仙女网页制作

已于 2024-05-10 19:50:44 修改

阅读量2.3k

点赞数 29

分类专栏： Web网页设计实例游戏文章标签：前端课程设计 html5 javascript css java jquery

于 2024-03-14 16:15:55 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/136605844

版权

Web网页设计实例同时被 2 个专栏收录

788 篇文章

订阅专栏

游戏

24 篇文章

订阅专栏

前言

本实例为HTML网页代码。该实例应用html+css+js设计，jquery、scoll、导航栏效果、图片轮翻效果、点击事件、视频元素、登录页面等的应用,本文以“游戏”为主题来设计实践，介绍如何通过从头开始设计游戏网站并将其转换为代码的过程。

一、网页介绍

1.网页简介

此实例系统文件种类包含：html结构文件、css网页样式文件、js网页特效文件、images网页图片文件；画面精明，代码简短，供大家参考借鉴。

2.网页编辑

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用

技术方面主要应用了网页知识中的: html+css+js，jquery、scroll、导航栏效果、轮番效果、点击事件、视频元素、登录页面等要点。

提示：以下是本篇文章正文内容，下面案例可供参考

二、网页效果

三、代码展示（节选）

1.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />

<title>王者荣耀</title>
</head>
<body>
<div class="main">
<div class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="jieshao.html">介绍</a></li>
<li><a href="meitu.html">壁纸</a></li>
<li><a href="jiaocheng.html">游戏视频</a></li>
<li><a href="denglu.html">登录</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</div>
<div class="banner">
<div class="top_img">
<div class="focus" id="focus">
<div id="focus_m" class="focus_m">
<ul>
<li style="display:block"> <a href="news.html"> <img src="images/timg1.jpg" width="100%" /></a> </li>
<li style="display:none"> <a href="news.html"><img src="images/timg2.jpg" width="100%" /></a></li>
<li style="display:none"> <a href="news.html"><img src="images/timg3.jpg" width="100%" /></a> </li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" title="上一张"><b></b><span></span></a> <a
href="javascript:;" class="focus_r" id="focus_r" title="下一张"><b></b><span></span></a> </div>
</div>
</div>
<div class="content">
<div class="bar">热门活动</div>
<div class="pad">
<div class="padle">
<ul>
<li> <a href="news.html"><img src="images/h5.jpg" alt=""></a> </li>
<li> <a href="news.html"><img src="images/timg1.jpg" width="603px" alt=""></a> </li>
</ul>
<div class="clear"></div>
</div>
<div class="padri">
<h3> <a href="news.html"> 孙尚香-水果甜心优化海报...</a></h3>
<ul>
<li> <span class="lnk"> <a href="news.html">老亚瑟的答疑时间: 孙尚香-水果甜...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">【狄仁杰封神榜】第53期诈骗团伙...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">狄某有话说｜瑶：射手只会影响我...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">老亚瑟的答疑时间: 青白蛇设计稿票...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">腾讯看点|新英雄“云缨”优质内容...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">狄某有话说 | 姜子牙怎么玩？一局4...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">投稿赢好礼，B站视频征集活动火...</a> </span> <span> 新闻 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">7月1日体验服停机更新公告</a> </span> <span> 热门 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">石梁长在无谓浮沉，夏日炎炎好礼...</a> </span> <span> 活动 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">6月30日全服不停机更新公告</a> </span> <span> 公告 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">6月29日体验服停机更新公告</a> </span> <span> 公告 </span>
<div class="clear"> </div>
</li>
<li> <span class="lnk"> <a href="news.html">赢下喝彩，奔赴未来!第三届王者...</a> </span> <span> 赛事 </span>
<div class="clear"> </div>
</li>
</ul>
</div>
<div class="clear"></div>
<ul class="box">
<li> <a href="news.html"> <img src="images/h1.jpg" alt=""> </a> </li>
<li> <a href="news.html"> <img src="images/h2.jpg" alt=""> </a> </li>
<li> <a href="news.html"> <img src="images/h7.jpg" alt=""> </a> </li>
<li> <a href="news.html"> <img src="images/h8.jpg" alt=""> </a> </li>
</ul>
</div>
<div class="clear"></div>
<div class="bar"><span>美图</span></div>
<div class="cc" >
<ul>
<li> <img src="images/0.jpg" width="330" height="240"/> </li>
<li> <img src="images/1.jpg" width="330" height="240"/> </li>
<li> <img src="images/2.jpg" width="330" height="240"/> </li>
<li> <img src="images/3.jpg" width="330" height="240"/> </li>
<li> <img src="images/4.jpg" width="330" height="240"/> </li>
<li> <img src="images/5.jpg" width="330" height="240"/> </li>
</ul>
</div>
<div class="clear"></div>
</div>

......

2.CSS代码

@charset "utf-8";

/* CSS Document */
ul,li,h1,h2,h3,p {
padding: 0;
margin: 0;
list-style: none
}

a {
text-decoration: none;
color: #000
}

html {
background: rgb(163, 131, 131);
}

audio {
position: fixed;
bottom: -400px
}

body {
width: 100%;
margin: 0 auto;
line-height: 31px
}

.clear {
clear: both
}

.menu li {
list-style: none
}

.head .fr {
margin-top: 50px
}

.banner {
position: relative;
clear: both;
}

.main {
width: 1200px;
margin: auto;
}

.menu {
width: 100%;
text-align: center;
position: relative;
z-index: 55;
float: left
}

.menu li a {
color: #fff
}

.menu li {
float: left;
font-weight: bold;
font-size: 18px;
background: #000000;
padding: 15px 15px;
width: 200px
}

.content {
padding-bottom: 20px;
font-size: 14px;
display: inline-block;
width: 100%
}

.content a {
text-align: center;
font-size: 20px;
}
.banner img{ display:block}
.end {
clear: both;
background: #3e558c;
color: #fff;
padding: 20px 0;
text-align: center;
}

.pad {
display: block;
background-color: rgb(121, 47, 63);
}

.scrollleft li {
width: 383px;
margin: 5px;
float: left
}

.zhuce {
padding: 50px 0;
}

.zhuce li {
text-align: center;
margin-left: -100px;
padding: 15px 0;
}

.zhuce li span {
width: 160px;
font-size: 18px;
text-align: right;
display: inline-block;
margin-right: 10px;
}

.zhuce li .phone2 {
width: 50%;
height: 50px;
line-height: 50px;
border: 1px solid #999;
display: inline-block;
font-size: 18px;
padding: 0 10px;
}

.zhuce li button {
background: #264665;
width: 30%;
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
border-radius: 5px;
border: none;
}
......

3.JS

auto=null;
timer=null;
var focus=new Function();
focus.prototype={
init:function(){

this.aTime=this.aTime || 10;

this.sTime=this.sTime || 5000;

this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
this.oImgLi=this.oImg.getElementsByTagName("li");

this.oL=document.getElementById('focus_l');
this.oR=document.getElementById('focus_r');

this.createTextDom();

this.target=0;

this.autoMove();

       this.oAction();
   },
   createTextDom:function(){
       var that=this;

       this.oText=document.createElement("div");
       this.oText.className="focus_s";
       var ul=document.createElement('ul');
       var frag=document.createDocumentFragment();
       for (var i=0;i<this.oImgLi.length;i++) {
           var li=document.createElement("li");
           li.innerHTML='<b></b>';
           if (i==0) {
               li.className="active";
           };
           frag.appendChild(li);
       };
       ul.appendChild(frag);
       this.oText.appendChild(ul);
       this.o.insertBefore(this.oText,this.o.firstChild);

       this.oTextLi=this.oText.getElementsByTagName("li");
   },
   autoMove:function(){
       var that = this;
       auto=setInterval(function(){that.goNext()},that.sTime);
   },
   goNext:function() {
       this.target=this.nowIndex();
       this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
       this.aStep=(this.target-this.nowIndex())*this.step;
       this.removeClassName();
       this.oTextLi[this.target].className="active";
       this.startMove();
   },
   goPrev:function() {
       this.target=this.nowIndex();
       this.target==0 ? this.target=this.oTextLi.length-1 : this.target--;
       this.aStep=(this.target-this.nowIndex())*this.step;
       this.removeClassName();
       this.oTextLi[this.target].className="active";
       this.startMove();
   },
   startMove:function (){
       var that=this;
       var t=0;
       this.timer='';
       function set(){
           if (t>100) {
               clearInterval(that.timer);
           }else {
               for (var i=0;i<that.oImgLi.length;i++) {
                   that.oImgLi[i].style.display='none';
               };
               that.oImgLi[that.target].style.display='block';
               that.setOpacity(that.oImg,t);
               t+=5;
           };
       };
       timer=setInterval(set,that.aTime);
   },
   setOpacity:function(elem,level){
       if(elem.filters){
           elem.style.filter = 'alpha(opacity=' + level + ')';
           elem.style.zoom = 1;
       } else {
           elem.style.opacity = level / 100;
       };
   },
   nowIndex:function(){
       for (var i=0;i<this.oTextLi.length;i++) {
           if (this.oTextLi[i].className=='active') {
               return i;
               break;
           }
       };
   },
   oAction:function(){
       var that=this;
       for (var i=0;i<this.oTextLi.length;i++) {
           this.oTextLi[i].index=i;
           this.oTextLi[i].οnclick=function(){
               clearInterval(auto);
               clearInterval(timer);
               that.setOpacity(that.oImg,100);
               that.target=this.index;
               that.removeClassName();
               this.className='active';
               that.startMove();
           }
       };
       mouseEnter (that.o,'mouseleave',function(e){
               clearInterval(auto);
               that.autoMove();
           }
       );
       this.oL.οnclick=function(){
           that.goPrev();
       };
       this.oR.οnclick=function(){
           that.goNext();
       };
   },
   removeClassName:function(){
       for (var i=0;i<this.oTextLi.length;i++) {
           this.oTextLi[i].className=""
       };
   }
};
var focusRun=new focus();
focusRun.o=document.getElementById("focus");
function mouseEnter(ele,type,func){
   if(window.document.all)
       ele.attachEvent('on'+type,func);
   else{//ff
       if(type==='mouseenter')
           ele.addEventListener('mouseover',this.withoutChildFunction(func),false);
       else if(type==='mouseleave')
           ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
       else
           ele.addEventListener(type,func,false);
   };
};
function withoutChildFunction(func){
   return function(e){
       var parent=e.relatedTarget;
       while(parent!=this&&parent){
           try{
               parent=parent.parentNode;}
           catch(e){
               break;
           }
       }
       if(parent!=this)
       func(e);
   };
};

window.οnlοad=function(){
focusRun.init();
};

......

四、总结

1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到二级或三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同。 8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

五、交流分享

1.如果我的博客对你有帮助，【关注作者|获取更多源码（2000+个网页源码）|优质文章】；
2. 您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等；更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。