【静态页面】仿第五人格官网(简易版)

Alpaca_i

已于 2024-08-01 20:42:47 修改

阅读量435

点赞数 9

文章标签：前端 javascript html

于 2024-08-01 20:40:27 首次发布

本文链接：https://blog.csdn.net/qq_54698661/article/details/140855729

版权

完整展示

1 导航栏

<header>
        <nav>
            <div class="logo"><a href="#"><img src="img/logo.webp" width="100px" height="60px" alt="dwrg"></a></div>
            <ul class="menu">
                <li><a href="#home">首页</a></li>
                <li class="dropdown">
                    <a href="#about">游戏介绍</a>
                    <ul class="dropdown-menu">
                        <li><a href="#story">故事背景</a></li>
                        <li><a href="#characters">角色介绍</a></li>
                        <li><a href="#world">游戏世界</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#features">游戏特色</a>
                    <ul class="dropdown-menu">
                        <li><a href="#feature1">特色1</a></li>
                        <li><a href="#feature2">特色2</a></li>
                        <li><a href="#feature3">特色3</a></li>
                    </ul>
                </li>
                <li><a href="#screenshots">游戏截图</a></li>
                <li><a href="#videos">视频展示</a></li>
                <li><a href="#news">新闻动态</a></li>
                <li><a href="#faq">常见问题</a></li>
                <li><a href="#download">下载</a></li>
                <li><a href="#team">开发团队</a></li>
                <li><a href="#testimonials">玩家评价</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
            <div class="search-container">
                <input type="text" id="search-bar" placeholder="搜索...">
                <button id="search-button">搜索</button>
            </div>
        </nav>
    </header>

2 banner

<div class="banner">
        <div class="banner-item active">
            <img src="img/新枪弹辩驳V3联动开屏海报.jpg" alt="Banner 1">
            <div class="banner-text">欢迎来到《第五人格》的神秘世界</div>
        </div>
        <div class="banner-item">
            <img src="img/夏日夜晚主题公共地图.jpg" alt="Banner 2">
            <div class="banner-text">探索恐怖与解谜的乐趣</div>
        </div>
        <div class="banner-item">
            <img src="img/深渊的呼唤VI.jpg" alt="Banner 3">
            <div class="banner-text">立即下载并加入我们</div>
        </div>
        <div class="banner-nav">
            <span class="banner-dot active" data-index="0"></span>
            <span class="banner-dot" data-index="1"></span>
            <span class="banner-dot" data-index="2"></span>
        </div>
    </div>

3 内容部分

<main>
        <section id="home">
            <h1>欢迎来到《第五人格》</h1>
            <p>在《第五人格》中，你将进入一个充满谜团和恐惧的世界，体验惊心动魄的逃生与追捕之旅。</p>
        </section>
        <section id="about">
            <h1>游戏介绍</h1>
            <p>《第五人格》是一款非对称对抗竞技游戏，玩家将在一个神秘的庄园中展开逃生与追捕的较量，每一局游戏都是一场智慧与勇气的对决。</p>
            <img src="img/2023新版本登录页面.jpg" alt="游戏介绍图片">
        </section>
        <section id="features">
            <h1>游戏特色</h1>
            <div class="features-container">
                <div class="feature-item">
                    <h2>独特的非对称对抗</h2>
                    <p>1V4的非对称对抗模式，让你体验不同的游戏乐趣。</p>
                </div>
                <div class="feature-item">
                    <h2>丰富的角色</h2>
                    <p>多样的角色选择，每个角色都有独特的技能和背景故事。</p>
                </div>
                <div class="feature-item">
                    <h2>精美的画面</h2>
                    <p>哥特式的美术风格，带给你沉浸式的游戏体验。</p>
                </div>
                <div class="feature-item">
                    <h2>悬疑的剧情</h2>
                    <p>解开庄园背后的谜团，探索每个角色的过去。</p>
                </div>
                <div class="feature-item">
                    <h2>多样的地图</h2>
                    <p>丰富的游戏地图，每张地图都有独特的机关和地形。</p>
                </div>
                <div class="feature-item">
                    <h2>持续更新</h2>
                    <p>定期更新新角色、新地图和新活动，保持游戏的新鲜感。</p>
                </div>
            </div>
        </section>

4 游戏截图

        <section id="screenshots">
            <h1>游戏截图</h1>
            <div class="screenshots-container">
                <div class="screenshot" data-info="十七赛季精华3-渔女">
                    <img src="img/十七赛季精华3-渔女.jpg" alt="游戏截图1">
                </div>
                <div class="screenshot" data-info="第十一赛季精华2——密林深处">
                    <img src="img/第十一赛季精华2——密林深处.jpg" alt="游戏截图2">
                </div>
                <div class="screenshot" data-info="二十三赛季精华2-夏夜怪谈">
                    <img src="img/二十三赛季精华2-夏夜怪谈.jpg" alt="游戏截图3">
                </div>
                <div class="screenshot" data-info="二十五赛季精华1-猎龙者传说">
                    <img src="img/二十五赛季精华1-猎龙者传说.jpg" alt="游戏截图4">
                </div>
            </div>
        </section>
        
        <section id="videos">
            <h1>视频展示</h1>
            <div class="videos-container">
                <video width="560px" height="315px" controls poster="./img/【深渊的呼唤VI】CG .jpg">
                    <source src="https://nie.v.netease.com/nie/2023/0309/ff855d2465cd3918c650c63b1431a603.mp4" type="video/mp4">
                    您的浏览器不支持 HTML5 视频。
                </video>
                <video width="560px" height="315px" controls poster="./img/2023主线概念CG-记忆余烬·上篇.jpg">
                    <source src="https://nie.v.netease.com/nie/2023/0321/802e987b855364479c777b1d432b888a.mp4" type="video/mp4">
                    您的浏览器不支持 HTML5 视频。
                </video>
            </div>
        </section>

5 动态新闻

        <section id="news">
            <h1>新闻动态</h1>
            <div class="news-container">
                <article class="news-item">
                    <h2>《第五人格》新版本上线</h2>
                    <p>《第五人格》迎来了全新版本，新增了多个角色和地图，优化了游戏体验。</p>
                    <a href="#">阅读更多</a>
                </article>
                <article class="news-item">
                    <h2>《第五人格》周年庆活动即将开始</h2>
                    <p>为了庆祝游戏上线一周年，我们将举行一系列精彩活动，敬请期待。</p>
                    <a href="#">阅读更多</a>
                </article>
                <article class="news-item">
                    <h2>开发团队访谈：揭秘《第五人格》背后的故事</h2>
                    <p>与《第五人格》开发团队一起，了解这款游戏的开发历程和背后的故事。</p>
                    <a href="#">阅读更多</a>
                </article>
            </div>
        </section>
        <section id="faq">
            <h1>常见问题</h1>
            <div class="faq-item">
                <h2>Q: 游戏是否免费？</h2>
                <p>A: 是的，《第五人格》是一款免费游戏，但游戏内有部分道具需要付费。</p>
            </div>
            <div class="faq-item">
                <h2>Q: 如何联系客户支持？</h2>
                <p>A: 您可以通过"联系我们"部分的表单来联系我们的客户支持团队。</p>
            </div>
            <div class="faq-item">
                <h2>Q: 游戏是否支持多种语言？</h2>
                <p>A: 是的，游戏目前支持多种语言，包括中文、英文、日文等。</p>
            </div>
        </section>
        <section id="download">
            <h1>游戏下载</h1>
            <p>立即下载《第五人格》，体验恐怖与解谜的魅力。</p>
            <a href="https://adl.netease.com/d/g/id5/c/gw?type=pc" class="download-button">下载游戏</a>
        </section>

6 团队开发

        <section id="team">
            <h1>开发团队</h1>
            <div class="team-container">
                <div class="team-member">
                    <img src="img/园丁.png" width="150px" height="150px" alt="团队成员1">
                    <h3>园丁</h3>
                    <p>制作人</p>
                </div>
                <div class="team-member">
                    <img src="img/渔女.png"  width="150px" height="150px" alt="团队成员2">
                    <h3>渔女</h3>
                      <p>美术总监</p>
                  </div>
                  <div class="team-member">
                      <img src="img/先知.png"  width="150px" height="150px" alt="团队成员3">
                      <h3>先知</h3>
                      <p>技术总监</p>
                  </div>
                  <div class="team-member">
                      <img src="img/机械师.png"  width="150px" height="150px" alt="团队成员4">
                      <h3>机械师</h3>
                      <p>策划总监</p>
                  </div>
                  <div class="team-member">
                      <img src="img/古董商.png"  width="150px" height="150px" alt="团队成员5">
                      <h3>古董商</h3>
                      <p>音效设计</p>
                  </div>
                  <div class="team-member">
                    <img src="img/调酒师.png"  width="150px" height="150px" alt="团队成员5">
                    <h3>调酒师</h3>
                    <p>特效设计</p>
                </div>
              </div>
          </section>

7 玩家评价

          <section id="testimonials">
              <h1>玩家评价</h1>
              <div class="testimonials-container">
                  <div class="testimonial">
                      <p>"《第五人格》是我玩过的最刺激的游戏之一，角色设计独特，玩法新颖！"</p>
                      <p>- 玩家A</p>
                  </div>
                  <div class="testimonial">
                      <p>"游戏的非对称对抗模式让我体验到了不同的策略和乐趣，非常好玩！"</p>
                      <p>- 玩家B</p>
                  </div>
                  <div class="testimonial">
                      <p>"每次更新都有新的角色和地图，让我一直对游戏充满期待！"</p>
                      <p>- 玩家C</p>
                  </div>
              </div>
          </section>

8 联系我们

          <section id="contact">
              <h1>联系我们</h1>
              <form>
                  <label for="name">姓名:</label>
                  <input type="text" id="name" name="name" required>
                  
                  <label for="email">邮箱:</label>
                  <input type="email" id="email" name="email" required>
                  
                  <label for="message">留言:</label>
                  <textarea id="message" name="message" rows="5" required></textarea>
                  
                  <button type="submit">提交</button>
              </form>
          </section>
  
          <footer>
              <p>&copy; 2024 《第五人格》官方版权所有 | <a href="#">隐私政策</a> | <a href="#">服务条款</a></p>
              <div class="social-media">
                  <a href="#"><img src="img/QQ.png" width="30px" height="30px" alt="QQ"></a>
                  <a href="#"><img src="img/微信.png" width="30px" height="30px" alt="WX"></a>
                  <a href="#"><img src="img/微博.png" width="30px" height="30px" alt="WB"></a>
              </div>
          </footer>
  
          <script src="script.js"></script>
      </body>
  </html>