<!--HTML代碼-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>《風(fēng)暴英雄》官方網(wǎng)站_暴雪出品 明星匯聚 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>顛覆傳統(tǒng) MOBA 2.0</h3> </li> <li class="eyeItem"> <!--<img src="images/borde1.png" alt="">--> <a href="#"><img src="images/eye2.jpg" alt=""></a> <h3>賽季性樞紐異變：經(jīng)驗球</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 暴雪娛樂有限公司版權(quán)所有 由上海網(wǎng)之易網(wǎng)絡(luò)科技發(fā)展有限公司運營 著作權(quán)侵權(quán) | 新廣出審[2014]1356號</p> <p> <a href="#">文網(wǎng)進字[2014]0115號</a> | <a href="#">滬網(wǎng)文號〔2017〕9633-727號</a> | <a href="#">增值電信業(yè)務(wù)經(jīng)營許可證編號：滬B2－20080012</a> </p> <p>互聯(lián)網(wǎng)違法和不良信息舉報電話：0571-28090163 滬公網(wǎng)安備 31011502022167號 | <a href="#">上海市網(wǎng)絡(luò)游戲行業(yè)自律公約</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="#">家長監(jiān)護工程></a> </p> </div> <div class="bottom"></div> </div> </div> <div class="footer_bottom"> <p>積極健康的游戲心態(tài)是健康游戲的開端，本游戲故事情節(jié)設(shè)置緊湊，請您合理控制游戲時間，避免沉溺游戲影響生活，注意自我保護，防范網(wǎng)絡(luò)陷阱。</p> <p>健康游戲忠告：抵制不良游戲，拒絕盜版游戲。注意自我保護，謹(jǐn)防受騙上當(dāng)。適度游戲益腦，沉迷游戲傷身。合理安排時間，享受健康生活。</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;}/*背景結(jié)束*//*頭部開始*/.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;}/*頭部結(jié)束*//*內(nèi)容開始*/.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;}/*內(nèi)容結(jié)束*//*底部開始*/.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;}/*底部結(jié)束*/
聯(lián)系客服
