web期末作業(yè)網(wǎng)頁(yè)設(shè)計(jì)——APEX（網(wǎng)頁(yè)源碼）
歡迎來(lái)到Apex英雄
? ?
Apex-legends
充滿各種機(jī)會(huì)的世界
邊境遠(yuǎn)方
偏僻星球群
歡迎來(lái)到諸王峽谷
于2019年2月5日發(fā)行。玩家在游戲中將扮演外星戰(zhàn)場(chǎng)上的星空戰(zhàn)士。
《Apex英雄》是由《泰坦天降》制作組Respawn研發(fā)的一款戰(zhàn)術(shù)競(jìng)技游戲。
支持 PS4/Xbox One/Nintendo Switch/Steam/Origin跨平臺(tái)聯(lián)機(jī)。
《Apex英雄》于 2020 年秋季登陸Nintendo Switch和 Steam 平臺(tái)
三名玩家組成一個(gè)小隊(duì)，第一個(gè)賽季將從3月份開(kāi)始，并會(huì)推出季票，每個(gè)賽季會(huì)帶來(lái)新的武器、角色和皮膚等內(nèi)容。
《Apex英雄》共有18個(gè) [25] 傳奇角色
支持4K輸出和HDR等功能，次世代版提供原生4K畫(huà)質(zhì)、全60Hz游戲、更高分辨率的陰影貼圖以及更高的LOD距離，游戲還將在未來(lái)更新120FPS，并對(duì)視覺(jué)、聽(tīng)覺(jué)和觸覺(jué)進(jìn)行優(yōu)化。
《Apex英雄》次世代升級(jí)將于2022年3月30日上線
邊境戰(zhàn)爭(zhēng)結(jié)束了。
邊境戰(zhàn)爭(zhēng)結(jié)束了。IMC 與反抗軍在數(shù)百年后的紛爭(zhēng)后，太空中這個(gè)偏遠(yuǎn)的邊境終于恢復(fù)了平靜。 但是自由卻是有代價(jià)的：當(dāng) IMC 和反抗軍離開(kāi)時(shí)，他們?nèi)∽吡艘磺杏袃r(jià)值的東西并讓邊境陷入混亂。沒(méi)有辦法求生，許多邊境的人們被迫離開(kāi)家鄉(xiāng)。而一些勇者前往了邊疆。
一些邊境遠(yuǎn)方的偏僻星球群，邊疆并未遭戰(zhàn)火侵襲且充滿了資源與契機(jī)。但是人命在這里卻一文不值，而危險(xiǎn)也隱藏在各個(gè)角落。這里的開(kāi)拓者、探索者與匪徒們不停地爭(zhēng)斗著，而且現(xiàn)在他們將透過(guò) Apex 競(jìng)賽來(lái)解決紛爭(zhēng)，這是一種競(jìng)技運(yùn)動(dòng)，而選手們?yōu)榱私疱X、名聲與榮耀來(lái)從邊境各處來(lái)到此處。
video-popup
玩家進(jìn)入《Apex英雄》游戲后
共有9個(gè)人物可供選擇，要想存活到最后
機(jī)動(dòng)性高，跑起來(lái)很快
機(jī)動(dòng)性高，跑起來(lái)很快（只是感覺(jué)上，其實(shí)所有角色移動(dòng)速度是一樣的），隊(duì)伍中的突擊手，偵察兵。
Q技能：以自身為圓心小范圍內(nèi)
Q技能：以自身為圓心小范圍內(nèi)探索敵人，范圍較小，一般在資源集中的房區(qū)使用。會(huì)放出一道紅光特效，敵人也能看見(jiàn)。
Z技能：狩獵野獸，強(qiáng)化感知
提升移動(dòng)速度并標(biāo)示玩家的獵物。這個(gè)技能對(duì)于看不到敵人的萌新來(lái)說(shuō)簡(jiǎn)直就是神技能，只要有人出現(xiàn)在玩家的視野里，就能有紅色人物輪廓顯現(xiàn)，但除了敵人全屏黑白，范圍不清楚有多大。
《Apex英雄》是由《泰坦天降》制作組Respawn研發(fā)的一款戰(zhàn)術(shù)競(jìng)技游戲。 [1-2] 于2019年2月5日發(fā)行。玩家在游戲中將扮演外星戰(zhàn)場(chǎng)上的星空戰(zhàn)士。Apex-legends
<!doctype html>
<html>
<head>
? ? <!-- Required meta tags -->
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <title>Apex-legends</title>
? ? <!-- Google fonts -->
? ? <link href=//fonts.googleapis.com/css2?family=Londrina+Outline&display=swap" rel="stylesheet">
? ? <!-- Template CSS Style link -->
? ? <link rel="stylesheet" href="assets/css/style-starter.css">
</head>
<body>
? ? <!-- top header -->
? ? <section>
? ? ? ? <div>
? ? ? ? ? ? <div class="top-content-w3ls d-flex align-items-center justify-content-between">
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="d-md-block d-none">歡迎來(lái)到Apex英雄</p>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="fa fa-phone"></i><a href="tel:+86 6654? 65547">+86 6658 234 4567</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="fa fa-envelope"></i><a href="mailto:mail@Apex.com">mail@apex.com</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="top-headers top-headers-2">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#facebook"><span class="fab fa-facebook-f"></span></a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#twitter"><span class="fab fa-twitter"></span></a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#instagram"><span class="fab fa-instagram""></span></a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li class=" me-0">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#linkedin"><span class="fab fa-linkedin-in"></span></a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </section>
? ? <!-- //top header -->
? ? <!-- header -->
? ? <header id="site-header">
? ? ? ? <div>
? ? ? ? ? ? <nav class="navbar navbar-expand-lg navbar-light">
? ? ? ? ? ? ? ? <a href="index.html">
? ? ? ? ? ? ? ? ? ? Apex-legends
? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
? ? ? ? ? ? ? ? ? ? data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false"
? ? ? ? ? ? ? ? ? ? aria-label="Toggle navigation">
? ? ? ? ? ? ? ? ? ? <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
? ? ? ? ? ? ? ? ? ? <span class="navbar-toggler-icon fa icon-close fa-times"></span>
? ? ? ? ? ? ? ? </button>
? ? ? ? ? ? ? ? <div class="collapse navbar-collapse" id="navbarScroll">
? ? ? ? ? ? ? ? ? ? <ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll">
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a class="nav-link active" aria-current="page" href="index.html">充滿各種機(jī)會(huì)的世界</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="about.html">邊境遠(yuǎn)方</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="classes.html">偏僻星球群</a>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? <form action="#error" method="GET" class="d-flex search-header ms-lg-2">
? ? ? ? ? ? ? ? ? ? ? ? <input type="search" placeholder="歡迎來(lái)到諸王峽谷" aria-label="Search"
? ? ? ? ? ? ? ? ? ? ? ? ? ? required>
? ? ? ? ? ? ? ? ? ? ? ? <button class="btn btn-style" type="submit"><i class="fas fa-search"></i></button>
? ? ? ? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- toggle switch for light and dark theme -->
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <nav>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="checkbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" id="checkbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i></i>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </nav>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- //toggle switch for light and dark theme -->
? ? ? ? ? ? </nav>
? ? ? ? </div>
? ? </header>
? ? <!-- //header -->
? ? <!-- banner section -->
? ? <div>
? ? ? ? <div class="slide current">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h6>于2019年2月5日發(fā)行。玩家在游戲中將扮演外星戰(zhàn)場(chǎng)上的星空戰(zhàn)士。</h6>
? ? ? ? ? ? ? ? ? ? <h3>《Apex英雄》是由《泰坦天降》制作組Respawn研發(fā)的一款戰(zhàn)術(shù)競(jìng)技游戲。</h3>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-4">了解更多</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h6>支持 PS4/Xbox One/Nintendo Switch/Steam/Origin跨平臺(tái)聯(lián)機(jī)。</h6>
? ? ? ? ? ? ? ? ? ? <h3>《Apex英雄》于 2020 年秋季登陸Nintendo Switch和 Steam 平臺(tái)</h3>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-4">了解更多</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h6>三名玩家組成一個(gè)小隊(duì)，第一個(gè)賽季將從3月份開(kāi)始，并會(huì)推出季票，每個(gè)賽季會(huì)帶來(lái)新的武器、角色和皮膚等內(nèi)容。</h6>
? ? ? ? ? ? ? ? ? ? <h3>《Apex英雄》共有18個(gè) [25]? 傳奇角色</h3>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-4">了解更多</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h6>支持4K輸出和HDR等功能，次世代版提供原生4K畫(huà)質(zhì)、全60Hz游戲、更高分辨率的陰影貼圖以及更高的LOD距離，游戲還將在未來(lái)更新120FPS，并對(duì)視覺(jué)、聽(tīng)覺(jué)和觸覺(jué)進(jìn)行優(yōu)化。</h6>
? ? ? ? ? ? ? ? ? ? <h3>《Apex英雄》次世代升級(jí)將于2022年3月30日上線</h3>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-4">了解更多</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <div>
? ? ? ? <button id="prev"><i class="fas fa-arrow-left"></i></button>
? ? ? ? <button id="next"><i class="fas fa-arrow-right"></i></button>
? ? </div>
? ? <!-- //banner section -->
? ? <!-- about section -->
? ? <section class="w3l-about py-5" id="about">
? ? ? ? <div class="container py-lg-5 py-md-4 py-2">
? ? ? ? ? ? <div class="row align-items-center">
? ? ? ? ? ? ? ? <div class="col-lg-6 section-width pe-xl-5 pt-lg-4">
? ? ? ? ? ? ? ? ? ? <h3>邊境戰(zhàn)爭(zhēng)結(jié)束了。</h3>
? ? ? ? ? ? ? ? ? ? <p>邊境戰(zhàn)爭(zhēng)結(jié)束了。IMC 與反抗軍在數(shù)百年后的紛爭(zhēng)后，太空中這個(gè)偏遠(yuǎn)的邊境終于恢復(fù)了平靜。
但是自由卻是有代價(jià)的：當(dāng) IMC 和反抗軍離開(kāi)時(shí)，他們?nèi)∽吡艘磺杏袃r(jià)值的東西并讓邊境陷入混亂。沒(méi)有辦法求生，許多邊境的人們被迫離開(kāi)家鄉(xiāng)。而一些勇者前往了邊疆。
</p>
? ? ? ? ? ? ? ? ? ? <p class="mt-4 pb-dm-3">一些邊境遠(yuǎn)方的偏僻星球群，邊疆并未遭戰(zhàn)火侵襲且充滿了資源與契機(jī)。但是人命在這里卻一文不值，而危險(xiǎn)也隱藏在各個(gè)角落。這里的開(kāi)拓者、探索者與匪徒們不停地爭(zhēng)斗著，而且現(xiàn)在他們將透過(guò) Apex 競(jìng)賽來(lái)解決紛爭(zhēng)，這是一種競(jìng)技運(yùn)動(dòng)，而選手們?yōu)榱私疱X、名聲與榮耀來(lái)從邊境各處來(lái)到此處。</p>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-5"> 了解更多關(guān)于我們</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="col-lg-6 history-info mt-lg-0 mt-5 pt-md-4 pt-2">
? ? ? ? ? ? ? ? ? ? <div class="position-relative img-border">
? ? ? ? ? ? ? ? ? ? ? ? <img src="assets/images/about.jpg" class="img-fluid radius-image" alt="video-popup">
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </section>
? ? <!-- //about section -->
? ?
? ? <!-- homeblock1 section -->
? ? <section class="w3l-homeblock1 py-5">
? ? ? ? <div class="container py-lg-5 py-md-4 py-2">
? ? ? ? ? ? <div class="row align-items-center">
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h3>玩家進(jìn)入《Apex英雄》游戲后</h3>
? ? ? ? ? ? ? ? ? ? <h6 class="sub-title mt-md-4 mt-md-5 mt-4">共有9個(gè)人物可供選擇，要想存活到最后</h6>
? ? ? ? ? ? ? ? ? ? <a href="about.html" class="btn btn-style mt-lg-5 mt-4">選擇一個(gè)適合自己的人物是必不可少的</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="col-lg-7 mt-lg-0 mt-5 ps-lg-5">
? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="column-w3-img position-relative">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#image"><img src="assets/images/img1.jpg" alt=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="radius-image img-fluid"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="column-w3-img position-relative mt-4">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#image"><img src="assets/images/img3.jpg" alt=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="radius-image img-fluid"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="column-w3-img position-relative">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#image"><img src="assets/images/img4.jpg" alt=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="radius-image img-fluid"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="column-w3-img position-relative mt-4">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#image"><img src="assets/images/img2.jpg" alt=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="radius-image img-fluid"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </section>
? ? <!-- //homeblock1 section -->
? ? <!-- video section -->
? ? <section id="video">
? ? ? ? <div>
? ? ? ? ? ? <div class="row w3l-video">
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="w3l-index5 py-5">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="history-info align-self text-center py-5">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="position-relative py-5">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#small-dialog1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="popup-with-zoom-anim play-view text-center position-absolute">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="fa fa-play"></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div id="small-dialog1" class="zoom-anim-dialog mfp-hide">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <iframe src="#"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? allowfullscreen></iframe>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </section>
? ? <!-- //video section -->
? ? <!-- join section -->
? ? <section class="w3l-whyblock py-5">
? ? ? ? <div class="container py-lg-5 py-md-4 py-2">
? ? ? ? ? ? <div class="row align-items-center">
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <img src="assets/images/about4.jpg" alt="" class="img-fluid radius-image">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="col-lg-6 ps-xl-5 ps-lg-4 mt-lg-0 mt-5">
? ? ? ? ? ? ? ? ? ? <h3 class="title-style mb-4">機(jī)動(dòng)性高，跑起來(lái)很快</h3>
? ? ? ? ? ? ? ? ? ? <p>機(jī)動(dòng)性高，跑起來(lái)很快（只是感覺(jué)上，其實(shí)所有角色移動(dòng)速度是一樣的），隊(duì)伍中的突擊手，偵察兵。</p>
? ? ? ? ? ? ? ? ? ? <div class="two-grids mt-5">
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>Q技能：以自身為圓心小范圍內(nèi)</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>Q技能：以自身為圓心小范圍內(nèi)探索敵人，范圍較小，一般在資源集中的房區(qū)使用。會(huì)放出一道紅光特效，敵人也能看見(jiàn)。</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="grids_info mt-xl-5 mt-4">
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>Z技能：狩獵野獸，強(qiáng)化感知</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>提升移動(dòng)速度并標(biāo)示玩家的獵物。這個(gè)技能對(duì)于看不到敵人的萌新來(lái)說(shuō)簡(jiǎn)直就是神技能，只要有人出現(xiàn)在玩家的視野里，就能有紅色人物輪廓顯現(xiàn)，但除了敵人全屏黑白，范圍不清楚有多大。</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </section>
? ? <!-- //join section -->
??
??
? ? <!-- footer -->
? ? <footer>
? ? ? ? <div class="footer-inner-main py-5">
? ? ? ? ? ? <div class="container pt-lg-5 pt-md-4 pt-2 pb-2">
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <div class="col-lg-4 sub-one-left pe-lg-5">
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="copyright-footer mt-lg-5 mt-sm-4 mt-2 text-center">
? ? ? ? ? ? ? ? ? ? <p>《Apex英雄》是由《泰坦天降》制作組Respawn研發(fā)的一款戰(zhàn)術(shù)競(jìng)技游戲。 [1-2]? 于2019年2月5日發(fā)行。玩家在游戲中將扮演外星戰(zhàn)場(chǎng)上的星空戰(zhàn)士。<a target="_blank" href="https://www.ea.com/games/apex-legends/about?isLocalized=true">Apex-legends</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </footer>
? ? <!-- //footer -->
? ? <!-- Js scripts -->
? ? <!-- move top -->
? ? <button onclick="topFunction()" id="movetop" title="Go to top">
? ? ? ? <span class="fas fa-level-up-alt" aria-hidden="true"></span>
? ? </button>
? ? <script>
? ? ? ? // When the user scrolls down 20px from the top of the document, show the button
? ? ? ? window.onscroll = function () {
? ? ? ? ? ? scrollFunction()
? ? ? ? };
? ? ? ? function scrollFunction() {
? ? ? ? ? ? if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
? ? ? ? ? ? ? ? document.getElementById("movetop").style.display = "block";
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? document.getElementById("movetop").style.display = "none";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // When the user clicks on the button, scroll to the top of the document
? ? ? ? function topFunction() {
? ? ? ? ? ? document.body.scrollTop = 0;
? ? ? ? ? ? document.documentElement.scrollTop = 0;
? ? ? ? }
? ? </script>
? ? <!-- //move top -->
? ? <!-- common jquery plugin -->
? ? <script src="assets/js/jquery-3.3.1.min.js"></script>
? ? <!-- //common jquery plugin -->
? ? <!-- banner slider -->
? ? <script>
? ? ? ? const slides = document.querySelectorAll(".slide");
? ? ? ? const nextButton = document.getElementById("next");
? ? ? ? const prevButton = document.getElementById("prev");
? ? ? ? const auto = true;
? ? ? ? const intervalTime = 5000;
? ? ? ? let slideInterval;
? ? ? ? const nextSlide = () => {
? ? ? ? ? ? const current = document.querySelector(".current");
? ? ? ? ? ? current.classList.remove("current");
? ? ? ? ? ? if (current.nextElementSibling) {
? ? ? ? ? ? ? ? current.nextElementSibling.classList.add("current");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? slides[0].classList.add("current");
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? const prevSlide = () => {
? ? ? ? ? ? const current = document.querySelector(".current");
? ? ? ? ? ? current.classList.remove("current");
? ? ? ? ? ? if (current.previousElementSibling) {
? ? ? ? ? ? ? ? current.previousElementSibling.classList.add("current");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? slides[slides.length - 1].classList.add("current");
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? nextButton.addEventListener("click", () => {
? ? ? ? ? ? nextSlide();
? ? ? ? ? ? if (auto) {
? ? ? ? ? ? ? ? clearInterval(slideInterval);
? ? ? ? ? ? ? ? slideInterval = setInterval(nextSlide, intervalTime);
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? prevButton.addEventListener("click", () => {
? ? ? ? ? ? prevSlide();
? ? ? ? ? ? if (auto) {
? ? ? ? ? ? ? ? clearInterval(slideInterval);
? ? ? ? ? ? ? ? slideInterval = setInterval(nextSlide, intervalTime);
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? if (auto) {
? ? ? ? ? ? slideInterval = setInterval(nextSlide, intervalTime);
? ? ? ? }
? ? </script>
? ? <!-- //banner slider -->
? ? <!-- video popup -->
? ? <script src="assets/js/jquery.magnific-popup.min.js"></script>
? ? <script>
? ? ? ? $(document).ready(function () {
? ? ? ? ? ? $('.popup-with-zoom-anim').magnificPopup({
? ? ? ? ? ? ? ? type: 'inline',
? ? ? ? ? ? ? ? fixedContentPos: false,
? ? ? ? ? ? ? ? fixedBgPos: true,
? ? ? ? ? ? ? ? overflowY: 'auto',
? ? ? ? ? ? ? ? closeBtnInside: true,
? ? ? ? ? ? ? ? preloader: false,
? ? ? ? ? ? ? ? midClick: true,
? ? ? ? ? ? ? ? removalDelay: 300,
? ? ? ? ? ? ? ? mainClass: 'my-mfp-zoom-in'
? ? ? ? ? ? });
? ? ? ? ? ? $('.popup-with-move-anim').magnificPopup({
? ? ? ? ? ? ? ? type: 'inline',
? ? ? ? ? ? ? ? fixedContentPos: false,
? ? ? ? ? ? ? ? fixedBgPos: true,
? ? ? ? ? ? ? ? overflowY: 'auto',
? ? ? ? ? ? ? ? closeBtnInside: true,
? ? ? ? ? ? ? ? preloader: false,
? ? ? ? ? ? ? ? midClick: true,
? ? ? ? ? ? ? ? removalDelay: 300,
? ? ? ? ? ? ? ? mainClass: 'my-mfp-slide-bottom'
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
? ? <!-- //video popup -->
? ??
? ? <!-- theme switch js (light and dark)-->
? ? <script src="assets/js/theme-change.js"></script>
? ? <!-- //theme switch js (light and dark)-->
? ? <!-- MENU-JS -->
? ? <script>
? ? ? ? $(window).on("scroll", function () {
? ? ? ? ? ? var scroll = $(window).scrollTop();
? ? ? ? ? ? if (scroll >= 80) {
? ? ? ? ? ? ? ? $("#site-header").addClass("nav-fixed");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? $("#site-header").removeClass("nav-fixed");
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? //Main navigation Active Class Add Remove
? ? ? ? $(".navbar-toggler").on("click", function () {
? ? ? ? ? ? $("header").toggleClass("active");
? ? ? ? });
? ? ? ? $(document).on("ready", function () {
? ? ? ? ? ? if ($(window).width() > 991) {
? ? ? ? ? ? ? ? $("header").removeClass("active");
? ? ? ? ? ? }
? ? ? ? ? ? $(window).on("resize", function () {
? ? ? ? ? ? ? ? if ($(window).width() > 991) {
? ? ? ? ? ? ? ? ? ? $("header").removeClass("active");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
? ? <!-- //MENU-JS -->
? ? <!-- disable body scroll which navbar is in active -->
? ? <script>
? ? ? ? $(function () {
? ? ? ? ? ? $('.navbar-toggler').click(function () {
? ? ? ? ? ? ? ? $('body').toggleClass('noscroll');
? ? ? ? ? ? })
? ? ? ? });
? ? </script>
? ? <!-- //disable body scroll which navbar is in active -->
? ? <!-- bootstrap -->
? ? <script src="assets/js/bootstrap.min.js"></script>
? ? <!-- //bootstrap -->
? ? <!-- //Js scripts -->
</body>
</html>
