HTML+CSS+JS制作仿英雄联盟游戏官方网站（内附源码，含6个页面）

WebDesign_Mu

于 2024-12-30 21:07:13 发布

阅读量727

点赞数 8

文章标签： javascript html css

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144834114

版权

一、作品介绍

HTML+CSS+JS制作一个仿英雄联盟游戏官方网站，包含首页、游戏资讯页、英雄介绍页、赛事中心页、社区互动页、游戏下载页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部导航栏

包含Logo、游戏下载按钮、新闻资讯、英雄资料、游戏资料、电竞赛事、社区互动等主要导航选项

2. 主视觉横幅

展示最新版本更新、热门活动或赛事的大型轮播图，配有简短描述和快速进入按钮

3. 新闻资讯模块

分为'最新消息'、'游戏更新'、'活动公告'三个标签页，每个分类显示4-5条最新信息

4. 英雄展示区

以网格形式展示游戏中的英雄角色，提供搜索和筛选功能（按角色定位分类），鼠标悬停时显示英雄简介

5. 赛事直播板块

展示正在进行的比赛直播、近期赛程安排，以及赛事要闻

6. 社区互动区

显示热门视频、攻略、精选作品等用户生成内容，融入官方社交媒体动态

7. 底部信息

包含游戏下载链接、服务条款、隐私政策、社交媒体图标、版权信息等

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="chinese">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>英雄联盟 - 首页</title>
  <link type="text/css" href="css/family.css" rel="stylesheet" />
  <link type="text/css" href="css/all.min.css" rel="stylesheet" />
</head>

<body class="bg-gray-900 text-white">
  <div class="water-mark water-mark-left">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <div class="water-mark water-mark-right">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <header class="fixed w-full z-50 bg-gray-900/95">
    <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
      <div class="flex items-center space-x-8 text-gray-400">
        <a href="#" class="text-2xl font-['Pacifico']">logo</a>
        <div class="hidden md:flex space-x-6">
          <a href="./index.html" class="text-white hover:text-white transition-colors">首页</a>
          <a href="./game-information.html" class="hover:text-white transition-colors">游戏资讯</a>
          <a href="./hero-introduction.html" class="hover:text-white transition-colors">英雄介绍</a>
          <a href="./event-center.html" class="hover:text-white transition-colors">赛事中心</a>
          <a href="./community-interaction.html" class="hover:text-white transition-colors">社区互动</a>
          <a href="./game-downloads.html" class="hover:text-white transition-colors">游戏下载</a>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <button class="!rounded-button px-4 py-2 bg-custom hover:bg-custom/90 transition-colors">登录</button>
        <button class="!rounded-button px-4 py-2 border border-custom hover:bg-custom/10 transition-colors">注册</button>
      </div>
    </nav>
  </header>

  <main>
    <div class="glide h-screen">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          <li class="glide__slide">
            <img src="./images/b1.jpg"
              class="w-full h-screen object-cover object-center" alt="英雄联盟战斗场景">
          </li>
          <li class="glide__slide">
            <img src="./images/b2.jpg"
              class="w-full h-screen object-cover object-center" alt="英雄展示">
          </li>
          <li class="glide__slide">
            <img src="./images/b3.jpg"
              class="w-full h-screen object-cover object-center" alt="电竞赛事">
          </li>
        </ul>
      </div>
      <div class="glide__bullets absolute bottom-4 w-full flex justify-center" data-glide-el="controls[nav]">
        <button class="glide__bullet mx-2 w-3 h-3 rounded-full bg-white/50" data-glide-dir="=0"></button>
        <button class="glide__bullet mx-2 w-3 h-3 rounded-full bg-white/50" data-glide-dir="=1"></button>
        <button class="glide__bullet mx-2 w-3 h-3 rounded-full bg-white/50" data-glide-dir="=2"></button>
      </div>
    </div>

    <section class="py-20 bg-gray-800">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12">热门英雄</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div class="bg-gray-900 rounded-lg overflow-hidden group">
            <img src="./images/h1.jpg"
              class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" alt="亚索">
            <div class="p-4">
              <h3 class="text-xl font-bold mb-2">亚索</h3>
              <p class="text-gray-400">不羁剑客</p>
              <button
                class="!rounded-button mt-4 w-full py-2 bg-custom hover:bg-custom/90 transition-colors">查看详情</button>
            </div>
          </div>
          <div class="bg-gray-900 rounded-lg overflow-hidden group">
            <img src="./images/h11.jpg"
              class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" alt="金克丝">
            <div class="p-4">
              <h3 class="text-xl font-bold mb-2">金克丝</h3>
              <p class="text-gray-400">暴走萝莉</p>
              <button
                class="!rounded-button mt-4 w-full py-2 bg-custom hover:bg-custom/90 transition-colors">查看详情</button>
            </div>
          </div>
          <div class="bg-gray-900 rounded-lg overflow-hidden group">
            <img src="./images/h2.jpg"
              class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" alt="劫">
            <div class="p-4">
              <h3 class="text-xl font-bold mb-2">劫</h3>
              <p class="text-gray-400">影流之主</p>
              <button
                class="!rounded-button mt-4 w-full py-2 bg-custom hover:bg-custom/90 transition-colors">查看详情</button>
            </div>
          </div>
          <div class="bg-gray-900 rounded-lg overflow-hidden group">
            <img src="./images/h3.jpg"
              class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" alt="拉克丝">
            <div class="p-4">
              <h3 class="text-xl font-bold mb-2">拉克丝</h3>
              <p class="text-gray-400">光辉女郎</p>
              <button
                class="!rounded-button mt-4 w-full py-2 bg-custom hover:bg-custom/90 transition-colors">查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-20 bg-gray-900">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12">最新资讯</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-gray-800 rounded-lg overflow-hidden">
            <img src="./images/z1.jpg"
              class="w-full h-48 object-cover" alt="赛事新闻">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3">2024全球总决赛即将开启</h3>
              <p class="text-gray-400 mb-4">全球最顶尖的战队将在上海展开激烈对决，争夺最高荣誉！</p>
              <a href="#" class="text-gray-500 hover:underline">了解更多</a>
            </div>
          </div>
          <div class="bg-gray-800 rounded-lg overflow-hidden">
            <img src="./images/z2.jpg"
              class="w-full h-48 object-cover" alt="新英雄预告">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3">新英雄预告：暗影收割者</h3>
              <p class="text-gray-400 mb-4">来自暗影岛的神秘力量即将降临召唤师峡谷！</p>
              <a href="#" class="text-gray-500 hover:underline">了解更多</a>
            </div>
          </div>
          <div class="bg-gray-800 rounded-lg overflow-hidden">
            <img src="./images/z3.jpg"
              class="w-full h-48 object-cover" alt="版本更新">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3">14.8版本更新说明</h3>
              <p class="text-gray-400 mb-4">全新平衡性调整及系统优化，带来更好的游戏体验！</p>
              <a href="#" class="text-gray-500 hover:underline">了解更多</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="bg-gray-900 py-12 border-t border-gray-800">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">关于我们</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white">公司简介</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">加入我们</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">联系方式</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">玩家支持</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white">客服中心</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">反馈建议</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">账号安全</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">赛事资讯</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white">职业联赛</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">赛事日程</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white">解说团队</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white text-2xl">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white text-2xl">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white text-2xl">
              <i class="fab fa-qq"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
        <p>© 2024 英雄联盟 版权所有</p>
      </div>
    </div>
  </footer>
</body>

</html>