<!--HTML代码-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>《风暴英雄》官方网站_暴雪出品 明星汇聚 MOBA竞技新篇章</title> <link rel="shortcut icon" href="heroes.ico" type="image/x-icon"> <link rel="stylesheet" href="font/iconfont.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"></head><body> <div class="header"> <div class="headerTop"> </div> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <div class="logo"> <img src="images/logo.png" alt=""> </div> <a href="#"></a> </div> <div class="main"> <div class="slogn"></div> <ul class="eyeList"> <li class="eyeItem"> <!--<img src="images/borde1.png" alt="">--> <a href="#"><img src="images/eye1.jpg" alt=""></a> <h3>颠覆传统 MOBA 2.0</h3> </li> <li class="eyeItem"> <!--<img src="images/borde1.png" alt="">--> <a href="#"><img src="images/eye2.jpg" alt=""></a> <h3>赛季性枢纽异变：经验球</h3> </li> <li class="eyeItem"> <!--<img src="images/borde1.png" alt="">--> <a href="#"><img src="images/eye3.jpg" alt=""></a> <h3>2020暴雪打折季</h3> </li> </ul> </div> <div class="footer"> <div class="footer_in"> <div class="footer_top clearfix"> <div class="fl"> <a href="#"> <i></i> 在线客服 </a> <a href="#"> <i></i> 反馈 </a> <a href="#"> <i></i> 加入我们 </a> </div> <div class="fr"> <span>合作品牌</span> <i></i> <b class="iconfont icon-jiahao"></b> <span>|</span> <b class="iconfont icon-sanjiaodown"></b> </div> </div> <div class="footer_middle clearfix"> <div class="fl middle_left"> <img src="images/blizzard.png" alt=""> <img src="images/163.png" alt=""> </div> <div class="rl middle_right"> <p> <a href="#">隐私</a> <span>|</span> <a href="#">法律条款</a> <span>|</span> <a href="#">API</a> </p> <div> <p>©2019 暴雪娱乐有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 | 新广出审[2014]1356号</p> <p> <a href="#">文网进字[2014]0115号</a> | <a href="#">沪网文号〔2017〕9633-727号</a> | <a href="#">增值电信业务经营许可证编号：沪B2－20080012</a> </p> <p>互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号 | <a href="#">上海市网络游戏行业自律公约</a> </p> <p> <img src="images/footer1.png" alt=""> <img src="images/footer2.png" alt=""> <img src="images/footer3.png" alt=""> <img src="images/footer4.png" alt=""> <img src="images/footer5.png" alt=""> <span>|</span>适龄提示：适合13岁及以上使用 <a href="#">家长监护工程></a> </p> </div> <div class="bottom"></div> </div> </div> <div class="footer_bottom"> <p>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。</p> <p>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p> </div> </div> </div> <video autoplay loop muted poster="images/bg.jpg"> <source src="images/bg.mp4" type="video/mp4"> <source src="images/bg.webm" type="video/webm"> </video></body></html>
/*CSS代码*/
/*背景开始*/video{ width: 100%; height: 1080px; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 3;}/*背景结束*//*头部开始*/.header>.headerTop{ width: 100%; height: 150px; background-image: url(../images/headerTop.png); background-repeat: repeat-x; position: absolute; z-index: 4; top: 0;}.header>ul{ width: 1260px; height: 98px; margin: 0 auto; padding: 0; padding-top: 85px; list-style: none; z-index: 10; position: absolute; left: 50%; transform: translateX(-50%); /*position: relative;*/}.header>ul>li{ margin: 0; padding: 0; width: 215px; float: left; height: 98px; font-size: 18px; /*position: relative;*/}.header>ul>li:nth-child(2){ margin-right: 398px;}.header>ul>li>a{ display: block; width: 100%; height: 100%; text-align: center; background: url("../images/hover.png"); transition: background-position 0s;}.header>ul>li:nth-child(2)>a{ background-position: 0 0;}.header>ul>li:nth-child(1)>a:hover{ background-position: 0 -98px;}.header>ul>li:nth-child(2)>a{ background-position: -215px 0;}.header>ul>li:nth-child(2)>a:hover{ background-position: -215px -98px;}.header>ul>li:nth-child(3)>a{ background-position: -825px 0;}.header>ul>li:nth-child(3)>a:hover{ background-position: -825px -98px;}.header>ul>li:nth-child(4)>a{ background-position: -1040px 0;}.header>ul>li:nth-child(4)>a:hover{ background-position: -1040px -98px;}.header>.logo{ width: 768px; position: absolute; left: 50%; margin-left: -394px; top: 0; z-index: 9;}.header>a{ width: 393px; height: 248px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 11;}/*头部结束*//*内容开始*/.main{ width: 100%; height: 1080px; position: relative; /*background-color: skyblue;*/}.main>.slogn{ /*width: 100%;*/ background: url(../images/slogan.png) no-repeat 0 0; width: 1372px; height: 419px; position: absolute; left: 50%; margin-left: -698px; top: 300px; z-index: 5;}.main>.eyeList{ /*width: 100%;*/ /*background-color: skyblue;*/ width: 1061px; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; z-index: 7; text-align: center;}.main>.eyeList>.eyeItem{ /*background-color: brown;*/ width: 347px; height: 219px; float: left; background-image: url("../images/borde1.png"); background-repeat: no-repeat; position: relative;}.main>.eyeList>.eyeItem>a{ position: absolute; top: 25px; left: 25px;}.main>.eyeList>.eyeItem>h3{ position: absolute; top: 160px; left: 100px; font-size: 16px; font-weight: 400; color: #feda03; text-align: center; height: 25px; line-height: 25px;}/*内容结束*//*底部开始*/.footer{ width: 100%; height: 502px; background-color: #0D0017; position: absolute; left: 0; top: 1080px; border-top: 2px solid #ff7e00;}.footer>.footer_in{ width: 1000px; height: 422px; margin: 0 auto;}.footer_in>.footer_top{ padding-top: 125px; padding-bottom: 45px;}.footer>.footer_in>.footer_top>.fl>a{ display: inline-block; text-decoration: none; font-size: 14px; color: #fff; margin-right: 10px;}.footer>.footer_in>.footer_top>.fl i{ display: inline-block; width: 19px; height: 19px; background: url("../images/footer-top.png") no-repeat; background-position: -6px -7px; margin-right: 7px; vertical-align: text-top;}.footer>.footer_in>.footer_top>.fl a:nth-child(2)>i{ background-position: -36px -8px;}.footer>.footer_in>.footer_top>.fl a:nth-child(3)>i{ background-position: -6px -100px;}.footer>.footer_in>.footer_top>.fr{ float: right; height: 30px; line-height: 30px;}.footer>.footer_in>.footer_top>.fr>span{ font-size: 14px; color: #fff; margin: 0 10px;}.footer>.footer_in>.footer_top>.fr>i{ display: inline-block; width: 95px; height: 26px; background: url("../images/footer-top.png") no-repeat; background-position: -142px -44px; vertical-align: top;}.footer>.footer_in>.footer_top>.fr>b{ display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 12px; color: #fff; background: #2b0473; border: 1px solid #462385;}.footer .footer_middle .rl{ float: left;}.middle_left{ margin-right: 75px;}.footer_middle>.rl>p>a{ display: inline-block; text-decoration: none; color: #ccc; font-size: 12px; margin-left: 10px;}.footer_middle>.rl>p>span{ font-size: 14px; color: #ccc; margin: 0 10px;}.footer_middle>.rl>div>p{ font-size: 12px; color: #8eb1bc;}.footer_middle>.rl>div>p>a{ text-decoration: none; color: #8eb1bc;}.footer_middle>.rl>div>p>a:hover{ color: #fff;}.footer_in>.footer_bottom{ color: #417aa1; /*padding-top: 35px;*/ font-size: 12px; text-align: center; margin-top: 35px;}/*底部结束*/
联系客服
