web期末作业网页设计——APEX（网页源码）
欢迎来到Apex英雄
Apex-legends
充满各种机会的世界
边境远方
偏僻星球群
欢迎来到诸王峡谷
于2019年2月5日发行。玩家在游戏中将扮演外星战场上的星空战士。
《Apex英雄》是由《泰坦天降》制作组Respawn研发的一款战术竞技游戏。
支持 PS4/Xbox One/Nintendo Switch/Steam/Origin跨平台联机。
《Apex英雄》于 2020 年秋季登陆Nintendo Switch和 Steam 平台
三名玩家组成一个小队，第一个赛季将从3月份开始，并会推出季票，每个赛季会带来新的武器、角色和皮肤等内容。
《Apex英雄》共有18个 [25] 传奇角色
支持4K输出和HDR等功能，次世代版提供原生4K画质、全60Hz游戏、更高分辨率的阴影贴图以及更高的LOD距离，游戏还将在未来更新120FPS，并对视觉、听觉和触觉进行优化。
《Apex英雄》次世代升级将于2022年3月30日上线
边境战争结束了。
边境战争结束了。IMC 与反抗军在数百年后的纷争后，太空中这个偏远的边境终于恢复了平静。 但是自由却是有代价的：当 IMC 和反抗军离开时，他们取走了一切有价值的东西并让边境陷入混乱。没有办法求生，许多边境的人们被迫离开家乡。而一些勇者前往了边疆。
一些边境远方的偏僻星球群，边疆并未遭战火侵袭且充满了资源与契机。但是人命在这里却一文不值，而危险也隐藏在各个角落。这里的开拓者、探索者与匪徒们不停地争斗着，而且现在他们将透过 Apex 竞赛来解决纷争，这是一种竞技运动，而选手们为了金钱、名声与荣耀来从边境各处来到此处。
video-popup
玩家进入《Apex英雄》游戏后
共有9个人物可供选择，要想存活到最后
机动性高，跑起来很快
机动性高，跑起来很快（只是感觉上，其实所有角色移动速度是一样的），队伍中的突击手，侦察兵。
Q技能：以自身为圆心小范围内
Q技能：以自身为圆心小范围内探索敌人，范围较小，一般在资源集中的房区使用。会放出一道红光特效，敌人也能看见。
Z技能：狩猎野兽，强化感知
提升移动速度并标示玩家的猎物。这个技能对于看不到敌人的萌新来说简直就是神技能，只要有人出现在玩家的视野里，就能有红色人物轮廓显现，但除了敌人全屏黑白，范围不清楚有多大。
《Apex英雄》是由《泰坦天降》制作组Respawn研发的一款战术竞技游戏。 [1-2] 于2019年2月5日发行。玩家在游戏中将扮演外星战场上的星空战士。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">欢迎来到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">充满各种机会的世界</a>
</li>
<li>
<a href="about.html">边境远方</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="欢迎来到诸王峡谷" 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日发行。玩家在游戏中将扮演外星战场上的星空战士。</h6>
<h3>《Apex英雄》是由《泰坦天降》制作组Respawn研发的一款战术竞技游戏。</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跨平台联机。</h6>
<h3>《Apex英雄》于 2020 年秋季登陆Nintendo Switch和 Steam 平台</h3>
<a href="about.html" class="btn btn-style mt-4">了解更多</a>
</div>
</div>
</div>
<div>
<div>
<div>
<h6>三名玩家组成一个小队，第一个赛季将从3月份开始，并会推出季票，每个赛季会带来新的武器、角色和皮肤等内容。</h6>
<h3>《Apex英雄》共有18个 [25] 传奇角色</h3>
<a href="about.html" class="btn btn-style mt-4">了解更多</a>
</div>
</div>
</div>
<div>
<div>
<div>
<h6>支持4K输出和HDR等功能，次世代版提供原生4K画质、全60Hz游戏、更高分辨率的阴影贴图以及更高的LOD距离，游戏还将在未来更新120FPS，并对视觉、听觉和触觉进行优化。</h6>
<h3>《Apex英雄》次世代升级将于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>边境战争结束了。</h3>
<p>边境战争结束了。IMC 与反抗军在数百年后的纷争后，太空中这个偏远的边境终于恢复了平静。
但是自由却是有代价的：当 IMC 和反抗军离开时，他们取走了一切有价值的东西并让边境陷入混乱。没有办法求生，许多边境的人们被迫离开家乡。而一些勇者前往了边疆。
</p>
<p class="mt-4 pb-dm-3">一些边境远方的偏僻星球群，边疆并未遭战火侵袭且充满了资源与契机。但是人命在这里却一文不值，而危险也隐藏在各个角落。这里的开拓者、探索者与匪徒们不停地争斗着，而且现在他们将透过 Apex 竞赛来解决纷争，这是一种竞技运动，而选手们为了金钱、名声与荣耀来从边境各处来到此处。</p>
<a href="about.html" class="btn btn-style mt-5"> 了解更多关于我们</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>玩家进入《Apex英雄》游戏后</h3>
<h6 class="sub-title mt-md-4 mt-md-5 mt-4">共有9个人物可供选择，要想存活到最后</h6>
<a href="about.html" class="btn btn-style mt-lg-5 mt-4">选择一个适合自己的人物是必不可少的</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">机动性高，跑起来很快</h3>
<p>机动性高，跑起来很快（只是感觉上，其实所有角色移动速度是一样的），队伍中的突击手，侦察兵。</p>
<div class="two-grids mt-5">
<div>
<div>
<h4>Q技能：以自身为圆心小范围内</h4>
<p>Q技能：以自身为圆心小范围内探索敌人，范围较小，一般在资源集中的房区使用。会放出一道红光特效，敌人也能看见。</p>
</div>
</div>
<div class="grids_info mt-xl-5 mt-4">
<div>
<h4>Z技能：狩猎野兽，强化感知</h4>
<p>提升移动速度并标示玩家的猎物。这个技能对于看不到敌人的萌新来说简直就是神技能，只要有人出现在玩家的视野里，就能有红色人物轮廓显现，但除了敌人全屏黑白，范围不清楚有多大。</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研发的一款战术竞技游戏。 [1-2] 于2019年2月5日发行。玩家在游戏中将扮演外星战场上的星空战士。<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>
