CSGO主题网页源码（大作业html）

最新推荐文章于 2025-05-27 21:54:09 发布

Pan_peter

最新推荐文章于 2025-05-27 21:54:09 发布

阅读量278

点赞数 8

分类专栏：前端demo 前端文章标签：课程设计 html 前端

本文链接：https://blog.csdn.net/pan_peter/article/details/147859498

版权

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

前端demo

14 篇文章

订阅专栏

「cogo主题网站」
链接：https://pan.quark.cn/s/98c457c15158

链接：https://pan.quark.cn/s/98c457c15158

链接：https://pan.quark.cn/s/98c457c15158

之前代做的大作业（doge），全部放出来，放着也是吃灰~

纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！

<body>

    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="images/logo.png" alt="CS:GO Logo"> </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="weapons.html">武器库</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="maps.html">地图</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="esports.html">电竞</a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link" href="guides.html">指南</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main>
        <section class="hero-section d-flex align-items-center text-center text-light" style="background: url('images/bg.png') no-repeat center center/cover;">
             <div class="overlay"></div>
            <div class="container position-relative fade-in-scroll">
                <h1 class="display-4 mb-3">《反恐精英：全球攻势》</h1>
                <p class="lead mb-4">不止是一场游戏，更是一种态度。</p>
                <a href="#" class="btn btn-primary btn-lg">立即加入</a> <a href="guides.html" class="btn btn-outline-light btn-lg ms-3">新手指南</a>
            </div>
        </section>

        <section class="news-section container my-5">
            <h2 class="text-center mb-4 fade-in-scroll">最新资讯</h2>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                <div class="col fade-in-scroll">
                    <div class="card h-100">
                         <div class="image-container card-img-top" style="height: 180px;">
                            <img src="images/111.jpg" class="card-img-top" alt="资讯图片1"> </div>
                        <div class="card-body">
                            <h5 class="card-title">神龙携宝现世</h5>
                            <p class="card-text   small">国服年度活动货币神龙币已率先开启年末福利大放送！</p>
                            <a href="#" class="btn btn-sm btn-outline-light mt-3">阅读更多</a> </div>
                    </div>
                </div>
                <div class="col fade-in-scroll">
                    <div class="card h-100">
                         <div class="image-container card-img-top" style="height: 180px;">
                            <img src="images/222.jpg" class="card-img-top" alt="资讯图片2"> </div>
                        <div class="card-body">
                            <h5 class="card-title">2024 创作设计大赛</h5>
                            <p class="card-text   small">只要你的作品通过审核就可以瓜分万元现金！</p>
                            <a href="#" class="btn btn-sm btn-outline-light mt-3">阅读更多</a> </div>
                    </div>
                </div>
                 <div class="col fade-in-scroll">
                    <div class="card h-100">
                         <div class="image-container card-img-top" style="height: 180px;">
                            <img src="images/333.jpg" class="card-img-top" alt="资讯图片3"> </div>
                        <div class="card-body">
                            <h5 class="card-title">2023 新春会来啦</h5>
                            <p class="card-text   small">现在就预约直播，更有重量级新春礼盒抽奖！</p>
                            <a href="#" class="btn btn-sm btn-outline-light mt-3">阅读更多</a> </div>
                    </div>
                </div>
                </div>
        </section>

        <section class="featured-section container my-5">
            <h2 class="text-center mb-4 fade-in-scroll">游戏特色</h2>
            <div class="row g-5"> <div class="col-md-7 fade-in-scroll"> <div class="card">
                         <div class="image-container card-img-top" style="height: 400px;">
                            <img src="images/map_big04.jpg" class="card-img-top" alt="特色地图"> </div>
                        <div class="card-body">
                            <h5 class="card-title">【地图精选】Mirage</h5>
                            <p class="card-text  ">探索经典的对战地点，每一次博弈都在这里展开。熟悉地图结构、点位和投掷物是获胜的关键。</p>
                             <a href="maps.html" class="btn btn-primary mt-3">查看更多地图</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 fade-in-scroll"> <div class="row row-cols-1 g-4">
                        <div class="col">
                            <div class="card h-100">
                                 <div class="image-container card-img-top" style="height: 150px;">
                                    <img src="images/444.jpg" class="card-img-top" alt="特色武器"> </div>
                                <div class="card-body">
                                    <h5 class="card-title">武器库</h5>
                                    <p class="card-text   small">从手枪到步枪，每种武器都有其独特的定位和手感。</p>
                                     <a href="weapons.html" class="btn btn-outline-light btn-sm mt-2">浏览全部武器</a>
                                </div>
                            </div>
                        </div>
                         <div class="col">
                            <div class="card h-100">
                                 <div class="image-container card-img-top" style="height: 150px;">
                                    <img src="images/5555.png" class="card-img-top" alt="电竞赛事"> </div>
                                <div class="card-body">
                                    <h5 class="card-title">电竞赛事</h5>
                                    <p class="card-text   small">关注全球顶尖赛事，学习职业哥的战术和操作。</p>
                                    <a href="esports.html" class="btn btn-outline-light btn-sm mt-2">进入电竞中心</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </section>

    </main>

    <footer class="mt-auto py-3">
        <div class="container">
            <p>&copy; 2023 CS:GO 主题网站 (学习作品)</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Scroll Reveal 动画
            function checkScrollReveal() {
                $('.fade-in-scroll').each(function() {
                    var element = $(this);
                    if (element.hasClass('is-visible')) return;

                    var windowHeight = $(window).height();
                    var scrollTop = $(window).scrollTop();
                    var elementOffset = element.offset().top;

                    if (elementOffset < scrollTop + windowHeight * 0.9) {
                        element.addClass('is-visible');
                    }
                });
            }

            $(window).on('scroll', checkScrollReveal);
            checkScrollReveal(); // 页面加载时检查一次

            // 其他首页特定 JS (如果需要轮播图控制等)
             // Bootstrap Carousel 功能由 Bootstrap JS 提供，通常无需额外 JS 激活。
        });
    </script>

</body>
</html>