html+css+js前端作业和平精英官网1个页面（带js）有轮播图tab切换等功能 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89597007
2，点击上方下载
目录1
目录2
项目视频
html+css+js前端作业和平精英官网1个页面（带js）
页面1
代码展示
<body>
<div id="top">
<div class="container">
<div class="left">
<a href="#" class="logo"><img src="images/logo.png" alt=""></a>
<span>
<img src="images/img_01.jpg" alt="">
<a href="#"><img src="images/img_02.jpg" alt=""></a>
</span>
</div>
<div class="right">
<h3 class="text1"><a href="#">成长守护平台</a></h3>
<h3 class="text2">
<span>腾讯游戏排行榜</span>
<iframe src="https://game.gtimg.cn/images/js/title/title_game_rank.html?rd=0.5387871893477456" frameborder="0"></iframe>
</h3>
</div>
</div>
</div>
<div id="nav">
<div class="container">
<div class="title">
<a href="#"><img src="images/logo2.png" alt=""></a>
<h1>和平精英<span>全球玩家的竞技冒险世界</span></h1>
</div>
<ul>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
<li><a href="#">版本资讯</a></li>
</ul>
</div>
</div>
<div id="section1">
<div class="container">
<a href="#" class="btn">进入官网</a>
<div class="video">
<div class="play">
<a href="#"><img src="images/img_03.jpg" alt=""></a>
</div>
<img src="images/downqrcode.jpg" class="erweima" alt="">
<div class="down">
<a href="#"><img src="images/ios.png" alt=""></a>
<a href="#"><img src="images/and.png" alt=""></a>
</div>
</div>
</div>
</div>
<!-- 弹出视频 -->
<div class="dialog">
<div class="movie">
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=y3023hikn7h" width="1046" height="640" allowFullScreen="true"></iframe>
</div>
<div class="closeBtn"></div>
</div>
<div class="shadow"></div>
<!-- section2 -->
<div id="section2">
<h2>版本资讯</h2>
<div class="container">
<!--
通用的选项卡
1、选项为ul.tabBtn
2、选项对应的内容为div.tabContent
3、选中的内容需要添加.active
-->
<ul class="tabBtn tabList">
<li class="active">最新活动</li>
<li>商城新品</li>
</ul>
<div class="tabContent con">
<div class="active subTab_1"> <!-- 最新活动的内容 -->
<ul class="tabBtn">
<li class="active">抢占据点</li>
<li>烤鸡大师</li>
</ul>
<div class="tabContent">
<div class="active"> <!-- 抢占据点的内容 -->
<img src="images/img_04.jpg" alt="">
<div class="text">
<h3>11月22日-11月29日</h3>
<p>活动期间，活动页面内每日首次占领任意据点可抽奖1次，传递给好友捷报前5名打开均可抽奖1次，有机会赢取永久深海格斗者套装，每日游戏内参与占点竞技更有累计奖励。</p>
</div>
</div>
<div> <!-- 烤鸡大师的内容 -->
<img src="images/img_05.jpg" alt="">
<div class="text">
<h3>11月22日-11月29日</h3>
<p>活动期间，活动页面内每日首次占领任意据点可抽奖1次，传递给好友捷报前5名打开均可抽奖1次，有机会赢取永久深海格斗者套装，每日游戏内参与占点竞技更有累计奖励。</p>
</div>
</div>
</div>
</div>
<div class="subTab_2"> <!-- 商城新品的内容 -->
<ul class="tabBtn">
<li class="active">
<img src="images/edition_01.png" alt="">
<p>未来战士-套装</p>
</li>
<li>
<img src="images/edition_02.png" alt="">
<p>M24未来战士</p>
</li>
<li>
<img src="images/edition_03.png" alt="">
<p>S686未来战士</p>
</li>
<li>
<img src="images/edition_04.png" alt="">
<p>Scar-L未来战士</p>
</li>
</ul>
<div class="tabContent">
<div>
<img src="images/edition_05.png" alt="">
<p>未来战士-套装</p>
</div>
<div class="active">
<img src="images/edition_02_big.png" alt="">
<p>M24未来战士</p>
</div>
<div>
<img src="images/edition_03_big.png" alt="">
<p>S686未来战士</p>
</div>
<div>
<img src="images/edition_04_big.png" alt="">
<p>Scar-L未来战士</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- section3 -->
<div id="section3" class="public">
<h2>新增玩法模式</h2>
<div class="container">
<div class="btn prev"></div>
<div class="wrap">
<ul>
<li>
<img src="images/pic_01.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_02.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_03.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_04.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
</ul>
</div>
<div class="btn next"></div>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- section4 -->
<div id="section4">
<h2>新增场景</h2>
<ul>
<li class="active">
<img src="images/section4_small_01.png" alt="">
<p>团竞小镇</p>
</li>
<li>
<img src="images/section4_small_02.png" alt="">
<p>暮色小镇</p>
</li>
<li>
<img src="images/section4_small_03.png" alt="">
<p>旋转木马</p>
</li>
<li>
<img src="images/section4_small_04.png" alt="">
<p>超级武器箱</p>
</li>
<li>
<img src="images/section4_small_05.png" alt="">
<p>停机坪</p>
</li>
</ul>
<div class="bottom"></div>
</div>
<!-- section5 -->
<div id="section5" class="public">
<h2>新增枪械载具</h2>
<div class="container">
<div class="btn prev"></div>
<div class="wrap">
<ul>
<li>
<img src="images/img_06.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_02.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_03.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
<li>
<img src="images/pic_04.png" alt="">
<div class="text">
<h3>创意工坊暗夜危机升级优化</h3>
<p>具体优化内容：1.随机圈：开放全图随机圈，更多地点等您探索！2.震爆弹：可以眩晕丧尸一定时间，救队友的神器！（此道具效果只在暗夜危机中生效）3.南瓜丧尸：一定几率遇到南瓜丧尸，击杀后会掉落惊喜装备！4.新怪物：渡鸦，一种可以飞行的感染鸟类！</p>
</div>
</li>
</ul>
</div>
<div class="btn next"></div>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- section6 -->
<div id="section6">
<h2>新增内容</h2>
<ul>
<li>
<img src="images/img_06.jpg" alt="">
<h3>淘汰回放系统</h3>
<p>战斗内，己方队伍全部被淘汰后，在结算界面可以查看自己被淘汰前的视频片段，便于玩家了解自己被淘汰的全过程。目前该功能仅在部分机型中开放，需要在基础设置中开启才能体验，未来将逐步开放更多机型，敬请期待。</p>
</li>
<li>
<img src="images/img_07.jpg" alt="">
<h3>淘汰回放系统</h3>
<p>战斗内，己方队伍全部被淘汰后，在结算界面可以查看自己被淘汰前的视频片段，便于玩家了解自己被淘汰的全过程。目前该功能仅在部分机型中开放，需要在基础设置中开启才能体验，未来将逐步开放更多机型，敬请期待。</p>
</li>
<li>
<img src="images/img_08.jpg" alt="">
<h3>淘汰回放系统</h3>
<p>战斗内，己方队伍全部被淘汰后，在结算界面可以查看自己被淘汰前的视频片段，便于玩家了解自己被淘汰的全过程。目前该功能仅在部分机型中开放，需要在基础设置中开启才能体验，未来将逐步开放更多机型，敬请期待。</p>
</li>
</ul>
</div>
<!-- section7 -->
<div id="section7">
<h2>系统优化</h2>
<ul>
<li class="active">
<h3><p>经典模式体验优化</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
<li>
<h3><p>团队竞技体验优化</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
<li>
<h3><p>暗夜危机体验优化</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
<li>
<h3><p>队友召回模式优化</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
<li>
<h3><p>赛季战斗平衡性调整</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
<li>
<h3><p>新增功能及优化</p></h3>
<div>
<p>●随机圈调整：开放全图随机圈，更多地点等您探索；<br>●新增震爆弹：可以眩晕丧尸一定时间，救队友的神器！该道具效果只在暗夜危机模式中生效；<br>●限时丧尸上线：战斗内一定几率会遇到南瓜丧尸，击杀后会掉落惊喜装备！南瓜丧尸只在《奇趣派对》版本周期内存在；<br>●新增怪物：渡鸦，一种可以飞行的感染鸟类。</p>
</div>
</li>
</ul>
</div>
<!-- section8 -->
<div id="section8" class="public">
<h2>游戏特色</h2>
<div class="container">
<div class="btn prev"></div>
<div class="wrap">
<ul>
<li><img src="images/section8_pic_img1.png" alt=""></li>
<li><img src="images/section8_pic_img2.png" alt=""></li>
<li><img src="images/section8_pic_img3.png" alt=""></li>
<li><img src="images/section8_pic_img4.png" alt=""></li>
<li><img src="images/section8_pic_img5.png" alt=""></li>
<li><img src="images/section8_pic_img6.png" alt=""></li>
<li><img src="images/section8_pic_img7.png" alt=""></li>
<li><img src="images/section8_pic_img8.png" alt=""></li>
<li><img src="images/section8_pic_img9.png" alt=""></li>
<li><img src="images/section8_pic_img10.png" alt=""></li>
</ul>
</div>
<div class="btn next"></div>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="footleft">
<div class="logo">
<a href="#"><img src="images/foot-dark.png" alt=""></a>
<a href="#"><img src="images/foot-logo3.png" alt=""></a>
</div>
<ul>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
<li>谨防受骗上当</li>
</ul>
</div>
<div class="footright">
<p>
<a href="#">腾讯互动娱乐</a> | <a href="#">腾讯互动娱乐</a> | <a href="#">腾讯互动娱乐</a> | <a href="#">腾讯互动娱乐</a>
</p>
<p><a href="#">腾讯公司版权所有</a></p>
<p>COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</p>
<p>深圳市市场监督管理局企业主体身份公示工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</p>
<p>国新出审[2019]1394号|ISBN 978-7-498-06474-5|全国文化市场统一举报电话：12318</p>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
