web期末作业网页设计——APEX（网页源码）

待我称王封你为后i 2024-03-29 16:30 75阅读 0赞

大学生网页制作期末作业-HTML+CSS+JavaScript（包含源码）-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>

Apex-legends

*  欢迎来到Apex英雄
 *  \+86 6658 234 4567
 *  [mail@apex.com][mail_apex.com]

*  
 *  
 *

但是自由却是有代价的：当 IMC 和反抗军离开时，他们取走了一切有价值的东西并让边境陷入混乱。没有办法求生，许多边境的人们被迫离开家乡。而一些勇者前往了边疆。

了解更多关于我们

![video-popup][]

<section class="w3l-homeblock1 py-5">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <h3 class="title-style">玩家进入《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 class="row">
                        <div class="col-6">
                            <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 class="col-6">
                            <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>
    
    
    
    <section class="w3l-video-sec" id="video">
        <div class="container">
            <div class="row w3l-video">
                <div class="col-12">
                    <div class="videow3-right">
                        <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 class="video-play-icon">
                                            <span class="fa fa-play"></span>
                                        </span>
                                    </a>
                                    
                                    <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>
    
    
    
    <section class="w3l-whyblock py-5">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <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 class="grids_info">
                            
                            <div class="detail">
                                <h4>Q技能：以自身为圆心小范围内</h4>
                                <p>Q技能：以自身为圆心小范围内探索敌人，范围较小，一般在资源集中的房区使用。会放出一道红光特效，敌人也能看见。</p>
                            </div>
                        </div>
                        <div class="grids_info mt-xl-5 mt-4">
                           
                            <div class="detail">
                                <h4>Z技能：狩猎野兽，强化感知</h4>
                                <p>提升移动速度并标示玩家的猎物。这个技能对于看不到敌人的萌新来说简直就是神技能，只要有人出现在玩家的视野里，就能有红色人物轮廓显现，但除了敌人全屏黑白，范围不清楚有多大。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    
    
    
    
    
    <footer class="w3l-footer9">
        <div class="footer-inner-main py-5">
            <div class="container pt-lg-5 pt-md-4 pt-2 pb-2">
                <div class="row">
                    <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 class="copy-text">《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>
    
    
    
    
    <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>
    
    
    
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    
    
    
    <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>
    
    
    
    <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>
    
    
    
    <script src="assets/js/theme-change.js"></script>
    
    
    
    <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>
    
    
    
    <script>
        $(function () {
            $('.navbar-toggler').click(function () {
                $('body').toggleClass('noscroll');
            })
        });
    </script>
    
    
    
    <script src="assets/js/bootstrap.min.js"></script>

[mail_apex.com]: mailto:mail@Apex.com
[video-popup]: