满足（html+css+javaScript）期末课程设计要求，数据来自崩坏3官网；使用python3网络爬虫，获取数据。由于崩坏3第二部开了，界面结构也与之对应的改变了（抽卡天天让我吃保底。
资源链接：https://pan.baidu.com/s/1c8SQi2O53_wSjz2Pcx-iXg?pwd=ic3j
提取码：ic3j
需求分析
1.1 首页
展示基本信息：显示游戏logo、标语、主要角色图片等。
导航栏：提供到其他页面的链接，如“剧情介绍”、“角色介绍”、“动画制作”等。
首页布局图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>崩坏3</title>
<link rel="shortcut icon" href="images/index_img/favicon.ico">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="big_box">
<nav>
<div class="nav_box">
<div class="nav_list">
<!-- 为了解决vscoode格式化问题把nav_list_firstly和nav_list_secondly换位 -->
<div class="nav_list_secondly">
<div>
<a href="https://jiazhang.mihoyo.com/index.html" target="_self"">
<P>成长关爱系统</P>
<span>PROGRESS</span>
</a>
</div>
<div>
<a href=" 登录.html" target="_blank"">
<P>米哈游通行证</P>
<span> miHoYo PASS</span>
</a>
</div>
</div>
<div class=" nav_list_firstly">
<div class=" home">
<a href="index.html" target="_self"">
<p>官网首页</p>
<span>HOME</span>
<img src=" images/index_img/head_list_line.png" alt="">
</a>
</div>
<div>
<a href="https://www.bh3.com/news" target="_self"">
<p>作战资讯</p>
<span>NEWS</span>
<img src=" images/index_img/head_list_line.png" alt="">
</a>
</div>
<div>
<a href="女武神.html" target="_blank"">
<p>女武神</p>
<span>VALKYIES</span>
<img src=" images/index_img/head_list_line.png" alt="">
</a>
</div>
<div>
<a href="https://mihoyo.tmall.com/" target="_self"">
<P>周边商城</P>
<span>MERCH</span>
<img src=" images/index_img/head_list_line.png" alt="">
</a>
</div>
<div>
<a href="https://www.miyoushe.com/bh3/" target="_self"">
<P>官方社区</p>
<span>FORUM</span>
<img src=" images/index_img/head_list_line.png" alt="">
</a>
</div>
</div>
</div>
</div>
</nav>
<div class=" main">
<video class="video_bg" poster="images/index_img/first_bg.jpg" autoplay="autoplay" loop="loop" muted="muted">
<source src="video/background.mp4" type="video/mp4">
</video>
<div class="logo">
<img src="images/index_img/logo.png" alt="">
</div>
<div class="content">
<video class="introduce" autoplay="autoplay" loop="loop" muted="muted">
<source src="video/雷之律者.mp4" type="video/mp4">
</video>
<img class="video_play" src="images/index_img/main_video_play.png" alt="">
<div class="download">
<div class="down_one">
<img src="images/index_img/down_one.png" alt="">
</div>
<div class="down_photo">
<img src="images/index_img/download.png" alt="" srcset="">
</div>
<div class="sanma">
<a href="#" target="_self">模拟器下载</a>
</div>
<div class="down_way">
<div class="down_pc">
<img src="images/index_img/down_pc.png" alt="米哈游">
<p>崩坏3桌面版下载</p>
</div>
<div class="down_android">
<img src="images/index_img/down_android.png" alt="米哈游">
<p>Android下载</p>
</div>
</div>
</div>
<div class="age">
<img src="images/index_img/age.png" alt="年龄限制">
</div>
<!-- 轮播图 -->
<div class="bg_box">
<div class="container">
<!-- 先把第一张图片显示出来 -->
<img class="on" src="images/index_img/lunbo1.png" />
<img src="images/index_img/lunbo2.jpg" />
<img src="images/index_img/lunbo3.jpg" />
<img src="images/index_img/lunbo4.png" />
<img src="images/index_img/lunbo5.png" />
<img src="images/index_img/lunbo6.png" />
<!-- 焦点 -->
<ul>
<li class="active" role="button"></li>
<li role="button"></li>
<li role="button"></li>
<li role="button"></li>
<li role="button"></li>
<li role="button"></li>
</ul>
</div>
<!-- 公告 -->
<div class="new">
<div class="new_title">
<button class="button_bg">最新</button>
<button>动态</button>
<button>公告</button>
<button>活动</button>
<button>补给</button>
</div>
<div class="new_content">
<a href="">
<p>[ 公告 ] 《崩坏3》 同人衍生作品创作 2.0 </p>
<p class="time">2021-10-13</p>
</a>
<a href="">
<p>[ 动态 ] 精准补给 | 往世的苦因&芝诺 </p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] | 时间胶囊服装 「 魔法少女Seelel ] 等限时返场</p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] 【 补给 】 天命武库<跨年特辑> | 4★装备获取概率.</p>
<p class="time">2022-12-20</p>
</a>
</div>
<div class="new_content" style="display:none">
<a href="">
<p>[ 动态 ] 精准补给 | 往世的苦因&芝诺 </p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] | 时间胶囊服装 「 魔法少女Seelel ] 等限时返场</p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] 【 补给 】 天命武库<跨年特辑> | 4★装备获取概率.</p>
<p class="time">2022-12-20</p>
</a>
<a href="">
<p>[ 动态 ] V6.3作战凭证开后</p>
<p class="time">2022-12-17</p>
</a>
</div>
<div class="new_content" style="display:none">
<a href="">
<p>[ 公告 ] 补给概率与补给结果公示 </p>
<p class="time">2022-12-24</p>
</a>
<a href="">
<p>[ 公告 ]《扇坏3》同人衍生作品创作指引2.0</p>
<p class="time">2021-10-13</p>
</a>
<a href="">
<p>[ 公告 ] 封号名单 （2022年12月19日）</p>
<p class="time">2022-12-19</p>
</a>
<a href="">
<p>[ 动态 ]「真理交响」6.3版本更新公告</p>
<p class="time">2022-12-15</p>
</a>
</div>
<div class="new_content" style="display:none">
<a href="">
<p>[ 动态 ] | 时间胶囊服装 「 魔法少女Seelel ] 等限时返场</p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] V6.3作战凭证开后</p>
<p class="time">2022-12-17</p>
</a>
<a href="">
<p>「 动态 ] 商城特惠「真理之律者] 超值礼包限时上架！</p>
<p class="time">2022-12-14</p>
</a>
<a href="">
<p>「 动态 ] 回归活动 | 天元骑英加入角色增援</p>
<p class="time">2022-12-14</p>
</a>
</div>
<div class="new_content" style="display:none">
<a href="">
<p>[ 动态 ] 精准补给 | 往世的苦因&芝诺 </p>
<p class="time">2022-12-22</p>
</a>
<a href="">
<p>[ 动态 ] 【 补给 】 天命武库<跨年特辑> | 4★装备获取概率.</p>
<p class="time">2022-12-20</p>
</a>
<a href="">
<P>[ 补给 ] 补给公告 | [ 真理之律者 ] 登场</P>
<P>2022-12-15</P>
</a>
<a href="">
<p>「 动态 ] 回归活动 | 天元骑英加入角色增援</p>
<p class="time">2022-12-14</p>
</a>
</div>
<div class="look">
<a href="https://bh3.mihoyo.com/news">查看全部</a>
</div>
</div>
</div>
</div>
</div>
<!-- /* 角色部分 */ -->
<div class=" roles">
<div class="roles_bg">
<img src="images/index_img/yayi雷之律者.png" alt="">
<img src="images/index_img/薪炎之律者.png" alt="" style="display: none">
<img src="images/index_img/希尔.png" alt="" style="display: none">
</div>
<div class="roles_info">
<div class="roles_title">
<p class="name">雷电芽衣</span>
<p>角色卡：雷之律者</p>
</div>
<div class="roles_title" style="display: none">
<p class=" name">琪亚娜.卡斯兰娜</span>
<p>角色卡：薪炎之律者</p>
</div>
<div class="roles_title" style="display: none">
<p class=" name">希尔.芙乐艾</span>
<p>角色卡：幻海梦蝶</p>
</div>
<div class="roles_fightWay">
<div class="name">
<p>姓名：雷电芽衣</p>
<p>装甲：雷之律者</p>
<p>作战方式：太刀</p>
</div>
<div class="roles_video">
<img src="images/index_img/yayi2.png" alt="">
</div>
<div class="roles_introduce">
<div class="roles_introduce_bg">
<p class="introduce_first">
<span class="character1">角色介绍</span>
<span class="character2">Character Overview</span>
</p>
<p class="introduce_second">
<span></span><span class="rt"></span>
</p>
<p class="introduce_third">
S级异能属性装甲,拥有高持续高爆发的AOE雷伤
</p>
</div>
</div>
</div>
<div class="roles_fightWay" style="display: none">
<div class="name">
<p>姓名：琪亚娜.卡斯兰娜</p>
<p>装甲：薪炎之律者</p>
<p>作战方式：大剑</p>
</div>
<div class="roles_video">
<img src="images/index_img/薪炎之律者2.png" alt="">
</div>
<div class="roles_introduce">
<div class="roles_introduce_bg">
<p class="introduce_first">
<span class="character1">角色介绍</span>
<span class="character2">Character Overview</span>
</p>
<p class="introduce_second">
<span></span><span class="rt"></span>
</p>
<p class="introduce_third">
S级异能属性装甲,能够造成火焰元素伤害，可在空中进行作战，将敌人燃尽于空中</p>
</div>
</div>
</div>
<div class="roles_fightWay" style="display: none">
<div class="name">
<p>姓名：希尔.芙乐艾</p>
<p>装甲：幻海梦蝶</p>
<p>作战方式：镰刀</p>
</div>
<div class="roles_video">
<img src="images/index_img/xier2.png" alt="">
</div>
<div class="roles_introduce">
<div class="roles_introduce_bg">
<p class="introduce_first">
<span class="character1">角色介绍</span>
<span class="character2">Character Overview</span>
</p>
<p class="introduce_second">
<span></span><span class="rt"></span>
</p>
<p class="introduce_third">
量子属性A级装甲,
</p>
</div>
</div>
</div>
<div class="Valkyries_photo">
<img src="images/index_img/yayi.png" alt="">
<img src="images/index_img/薪炎之律者1.png" alt="">
<img src="images/index_img/xier1.png" alt="">
</div>
<div class="look_Valkyries">
<a href="女武神.html" target="_blank">查看全部女武神</a>
</div>
</div>
</div>
<!-- /* 联系米哈游 */ -->
<div class="contact">
<img src="images/index_img/info_role.png" alt="米哈游">
<div class="contact_content">
<div class="contact_content_bg">
<div class="contact_tu">
<div class="weChat">
<img src="images/index_img/contact_way1.png" alt="">
<p>官方微信</p>
</div>
<div class="QQ">
<img src="images/index_img/contact_way2.png" alt="">
<p>官方QQ</p>
</div>
<div class="weibo">
<img src="images/index_img/contact_way3.png" alt="">
<p>客服微博</p>
</div>
<div class="shequ">
<img src="images/index_img/contact_way4.png" alt="">
<p>官方社区</p>
</div>
</div>
<div class="contact_way">
<div class="contact_phone">
<div class="contact_phone_title">
<p class="contact_phone_title_character">联系我们</p>
<span></span>
</div>
<div class="contact_phone_number">
<p>客服电话：400-666-1122（工作时间：工作日10点 - 18点）</p>
<p>游戏客服：021-34203305（工作时间：每天10点 - 20点)</p>
<p>投诉电话：021-34203135（工作时间：每天10点 - 20点）</p>
<p>投诉邮箱：tousu@mihoyo.com</p>
<p>合作洽谈：bh3_contact@mihoyo.com</p>
</div>
</div>
<div class="contact_qq">
<div class="contact_qq_title">
<p class="contact_qq_title_character">官方QQ群</p>
<span></span>
</div>
<div class="contact_qq_number">
<div class="contact_qq_number_left">
<p>崩坏3官方③群：<span>322530480</span></p>
<p>崩坏3官方⑧群：<span>419960123</span></p>
<p>崩坏3官方⑩群：<span>586442980</span></p>
<p>崩坏3桌面服官方③群：<span>724886324</span></p>
</div>
<div class="contact_qq_number_right">
<p>崩坏3官方③群：<span>322530480</span></p>
<p>崩坏3官方⑧群：<span>419960123</span></p>
<p>崩坏3官方⑩群：<span>586442980</span></p>
<p>崩坏3桌面服官方③群：<span>724886324</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="my_footer">
<div class="footer_logo">
<img src="images/index_img/miHoYo.png" alt="" class="logo1">
<img src="images/index_img/logo.png" alt="" class="logo2">
</div>
<div class="footer_information">
<div class="link">
<a href="https://www.bh3.com/privacy" target="_blank">用户协议 |</a>
<a href="https://webstatic.mihoyo.com/upload/static-resource/2022/12/15/2b4376fead20d415647b738e366424da_8655799474680176722.pdf"
target="_blank">隐私政策 |</a>
<a href="https://webstatic.mihoyo.com/upload/static-resource/2021/11/02/12b248534bf31c5bb6e3e8619acc3330_3142832735865618871.pdf"
target="_blank" class="five">儿童隐私政策 |</a>
<a href="https://webstatic.mihoyo.com/upload/static-resource/2021/11/06/2bc5f2f06b88aea5380c4babe396cf16_1085792848868029218.pdf"
target="_blank">自律公约 |</a>
<a href="https://jiazhang.mihoyo.com/index.html#/" target="_blank">成长关爱
|</a>
<a href="https://www.mihoyo.com/?page=about" target="_blank">关于我们 |</a>
<a href="https://www.mihoyo.com/company/contact" target="_blank">联系我们
|</a>
<a href="https://www.mihoyo.com/?page=join" target="_blank">加入我们</a>
</div>
<div class="footer_content">
<p>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
<p>沪公网安备31010402001116号</p>
<p>沪ICP备14042301号-2 | 沪网文〔2020〕3720-270号 | 文网游备字〔2016〕Ｍ-CSG 1244 号 |
新广出审【2016】961号
</p>
<p>互联网违法不良信息举报邮箱: tousu@mihoyo.com 互联网违法不良信息举报电话: 021-60371750
（工作时间：每天10点 -
20点）
</p>
<p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</p>
<p>未成年成长关爱热线：021-60371740 （服务时间：10:00-20:00）</p>
<p>© 2016 米哈游版权所有 客服电话：400-666-6312</p>
</div>
<div class="footer_information_photo">
<img src="images/index_img/footer_icon_01.png" alt="">
<img src="images/index_img/footer_icon_02.png" alt="">
<img src="images/index_img/footer_icon_03.png" alt="">
<img src="images/index_img/footer_icon_04.png" alt="">
<img src="images/index_img/footer_icon_05.png" alt="">
<img src="images/index_img/footer_icon_06.png" alt="">
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript">
// 轮播图
var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var index = 0; //当前图片下标
var lastIndex = 0;
var time = window.setInterval(b, 2000);
function b() {
if (index > aImgs.length - 1) {
index = 0;
}
aImgs[lastIndex].className = '';
aLis[lastIndex].className = '';
aImgs[index].className = 'on';
aLis[index].className = 'active';
lastIndex = index;
index++;
}
for (var index = 0; index < aLis.length; index++) {
(function (j) {//闭包为了可以等到不同的index值
aLis[index].onclick = function () {
for (var index = 0; index < aLis.length; index++) {
aImgs[index].className = '';
aLis[index].className = '';
}
aImgs[j].className = 'on';
aLis[j].className = 'active';
}
}(index))
}
// 切换栏
var btn = document.querySelectorAll('.new_title button');
var div = document.querySelectorAll('.new_content');
console.log(btn);
for (var n = 0; n < btn.length; n++) {
//生成闭包的立即函数
(function (i) {
btn[n].onclick = function () {
for (var m = 0; m < btn.length; m++) {
btn[m].className = ""; //清空效果
div[m].style.display = "none";
}
//当前点击的p设置变化
this.className = "button_bg";
div[i].style.display = "block";
}
}(n))
}
// 切换角色
var roles = document.querySelectorAll('.Valkyries_photo img');
var roles_photo = document.querySelectorAll('.roles_bg img');
var roles_name = document.querySelectorAll('.roles_title');
var roles_info = document.querySelectorAll('.roles_fightWay');
for (var i = 0; i < roles.length; i++) {
(function (j) {
roles[i].onclick = function () {
for (var m = 0; m < roles.length; m++) {
roles[m].className = ""; //清空效果
roles_photo[m].style.display = "none";
roles_name[m].style.display = "none";
roles_info[m].style.display = "none";
}
//当前点击的p设置变化
this.className = "btn_img";
roles_photo[j].style.display = "block";
roles_name[j].style.display = "block";
roles_info[j].style.display = "block";
}
}(i))
}
//图片变色
var b = document.querySelectorAll('.contact_tu div');
for (var n = 0; n < b.length; n++) {
b[n].onmouseover = function () {
this.children[0].style.backgroundColor = 'rgb(97,212,250)';
}
b[n].onmouseout = function () {
this.children[0].style.backgroundColor = 'rgba(0, 165, 226, 0.8)';
}
}
</script>
</body>
</html>
1.2女武神
1.3登录
总结
- 1.用到的技术：
html,css,js的综合运用。 Html:相对路径的使用；
css:盒模型的建立，盒子的布局，定位属性（相对定位，绝对定位，固定定位还有z-index层叠属性），嵌入视频source标签，nth-child(n)
选择器匹配属于其父元素的第 N
个子元素，不论元素的类型。将行内元素变成行内块元素（inline-block),animation动画效果以及@keyframes规则的引用等；
js:节点的访问GetElementById(节点名)获取指定id的节点，querySelector（‘e’）和querySelectorAll(‘e’)前者获取为e类名的html中第一个标签后者则是获取全部。
事件和事件的调用如onlick(点击鼠标触发此事件)、onmousemove(移动鼠标触发此事件)、onmousemout(离开设置的元素触发此事件)。定时器setTimeout来实现轮播图和获取验证码的倒计时
- 2.遇到的问题：
> z-index使用时一不注意就会覆盖住某一界面，导致超链接的效果消失；
> 当页面的高度没有少于整个界面时页尾不能始终在最下面（footer下面留白）
> 解决办法:overflow：hidden把溢出的部分直接修剪（不可见）； 在animation做动画时（图片从左往右移动并渐显）失败；
> 登录界面中点击input框时内文字消失，点击下一个时上一个恢复原样，我的input框显示效果文字全部消失；
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
