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

仙女网页制作

已于 2024-05-11 14:00:57 修改

阅读量1.6k

点赞数 16

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

于 2024-03-25 19:57:36 首次发布

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

版权

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

788 篇文章

订阅专栏

游戏

24 篇文章

订阅专栏

一、前言

本实例以游戏角色为主题设计，应用html+css+js，包括DIV、图片轮翻效果、视频、音频、留言板、搜索等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

2000+案例推荐，主题涵盖30+种类型：

二、网页文件

三、网页效果

四、代码展示

1.HTML

代码如下（节选示例）：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>主页</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js" charset="gb2312"></script>
<script src="js/comment.js" ></script>
</head>
<body>
<embed src="audios/attack.mp3" width=0 height=0 type=audio/mpeg loop="true" autostart="true" volume="0"></embed>
<div id="container">
       <div id="header">
       <div id="logo"></div>
       <div id="select_search">
           <table height="80px" align="right" >
               <tr align="right">
                   <td colspan="4">
                       <select id="sel">
                           <option selected>简体中文</option>
                           <option >繁体中文</option>
                           <option >English</option>
                       </select>
                   </td>
               </tr>
               <tr align="right">
                   <td><font size="2">关键词:</font></td>
                   <td><input type="text" size="25"></td>
                   <td><input type="image" src="images/搜索.png"></td>
               </tr>
           </table>
       </div>
   </div>
   <div id="nav">
       <table>
           <td ><a href="index.html">首页</a></td>
           <td ><a href="game_introduction.html">游戏介绍</a></td>
           <td ><a href="game_tips.html">游戏攻略</a></td>
           <td ><a href="toy.html">手办商城</a></td>
           <td ><a href="survey.html">问卷调查</a></td>
           <td ><a href="join.html">加入我们</a></td>

       </table>
   </div>
       <div id="bao">
       <div id="photo">
           <img src="images/a.png" >
           <img src="images/b.png" >
           <img src="images/c.png" >
           <img src="images/e.png" >
           <img src="images/f.png" >
       </div>
   </div >

   <div id="main">
       <div id="left">       <
           <img src="images/游戏资料.png" width="262ox" height="50px">
           <ul>
               <li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=518558">打野位置能拿MVP的不传之秘！<a> 2021-05-09</li>
               <li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519143">新版梦奇铭文出装玩法全解析<a> 2021-05-09</li>
               <li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519427">如何理解斩杀线与控血概念？<a> 2021-05-09</li>
               <li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=512793">李白刮痧，操作太难,试试兰陵王<a> 2021-05-09</li>
               <li><a href="https://pvp.qq.com/v/detail.shtml?G_Biz=18&tid=719852&e_code=pvpweb.dpvlist.r4">“红烧流”庄周<a> 2021-05-09</li>
               <li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=362130">你强任你强，墨子东皇加张良<a> 2021-05-09</li>
           </ul>
       </div>
       <div id="center">
           <marquee οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
               <img src="images/滚1.png" border="0" width="400px" height="230px">
               <img src="images/滚2.jpg" border="0" width="400px" height="230px">
               <img src="images/滚3.jpg" border="0" width="400px" height="230px">
               <img src="images/滚4.jpg" border="0" width="400px" height="230px">
               <img src="images/滚5.png" border="0" width="400px" height="230px">
           </marquee>
       </div>
       <div id="right">
           <img id="ri" src="images/欢迎登录.png" width="250" height="50px"><br/>
           <form action="" id="fo">
               <table align="center" class="register">
                   <tr>
                       <td>用户名</td>
                       <td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/></td>
                       <td ><input type="submit" value="登录"></td>
                   </tr>

                   <tr id="fot">
                       <td>密码</td>
                       <td><input type="password" id="password01" maxlength="16" placeholder="请输入密码......" required/></td>   <td><input type="reset"></td>
                   </tr>
               </table>
           </form>
           <div class="wjmmzczh">
               <a href="#" >忘记密码</a>
               <a href="register.html" id="zc">注册账号</a>
           </div>
       </div>
   </div>
   <div id="comment">
       <h2 >留言板</h2>
       <hr size="2px" color="#b5b5b5" width="990px" align="left">
       <form>
           <table align="center">
               <tr>
                   <td>用户名：</td>
                   <td><input type="text" id="n"/></td>
                   <td>Wechat：</td>
                   <td><input type="text" id="x"/></td>
                   <td>留言时间：</td>
                   <td><input type="text" id="t" placeholder=""/></td>
               </tr>
               <tr>
                   <td >留言内容：</td>
                   <td colspan="5"><textarea id="txt" cols="100" rows="3" placeholder="评论的时候，请遵纪守法并注意语言文明"></textarea></td>

               </tr>

......

2.CSS

代码如下（节选示例）：

*{
   font-family:宋体;
   }
#container{
   width:990px;
   margin:0 auto;
   padding:0 auto;
   font-size:12px;
}
#header{
   width:990px;
   height:80px;
}
#logo{
   width:690px;
   height:80px;
   float:left;
   background:#FFFFFF url("../images/背景头.jfif") no-repeat left bottom;
   background-size: auto;


}
#select_search{
   width:300px;
   height:80px;
   font-size:20px
   background:#FFFFFF;
   float:left;
}
#nav{
   clear:both;
   width:990px;
   height:40px;
   font-size:18px;
   background-image:url("../images/导航背景.png")
}
#nav a:hover{
   color:#Bf0000;
   text-decoration:none;
}
#nav td{
   width:165px;
   height:40px;
   text-align:center;
   vertical-align:middle;
}
a:link,a:visited,a:active{
   text-decoration:none;
}
a:link,a:visited,a:active{
   color:#828282;
}
table{

   line-height:1.5em
}
#zuoyou{
   clear:both;
   width:990px;
   height:400px;
   float:left;
}
#zuo{
   width:578px;
   height:400px;
   float:left;

}
#you{
   width:410px;
   height:400px;
   float:left;
   background:#ffffff;
   border: 1px solid #dd8787;
   border-radius: 10px;
}
h2{
   padding-top:5px;
   font-size:30px;
   font-size:宋体;
   font-style:bolder;
   color:#ffff00
}
h1{
   font-size: 30px;

}
.youp{
   font-size:20px;
   text-align:center;
   padding:0 30px;
   line-height:30px

}
#role_class{
   clear:both;
   width:990px;
   height:auto;background-image: linear-gradient(135deg,red,blue);
   -webkit-background-clip:text;
   color: transparent;
}
#role_zuo{
   border: 1px solid #330099;
   border-radius: 10px;
   font-size:15px;
   color:black;
}
#thing{
   clear:both;
   width:990px;
   height:480px;
   float:left;
   background-image:url("../images/thing背景.jpg") ;
   background-repeat: no-repeat;
   background-size: 990px 480px;

}
#comment{
   clear:both;
   width:990px;
   height:200px;
   background-image:url("../images/留言底.jpg")
}
#footer{
   width:990px;
   height: 60px;
   background: #330033;
   text-align: center;
   line-height: 10px;
}
#footer p{
   color: #ffff00;
   font-size: 15px;
   opacity: 0.7;
}
.p1{
   margin: 0;
   padding: 15px 0 5px 0;
}
.p2{
   margin: 0;
   padding: 5px 0;
}
#footer span{
   color: #aaffff;
}