静态页面仿第五人格官网(简易版)
资源内容介绍
静态页面仿第五人格官网(简易版) <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《第五人格》官方网站</title> <link rel="icon" href="img/icon.webp" type="image/x-icon"> <link rel="stylesheet" href="style.css"></head><body> <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> <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> <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> <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> <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> <