为了庆祝2025英雄联盟全球总决赛开启，我用HTML+CSS+JS制作了LOL官方网站

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 738 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

一、作品介绍

使用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>© 2025 木番薯科技 版权所有</p>
          </div>
        </div>
      </footer>
    </body>
     
    </html>

六、获取代码

内附源码，含6个页面。欢迎留言，欢迎关注。