当前位置：首页 > news >正文

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

news 2025/10/15 14:38:45

一、作品介绍

使用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><buttonclass="!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><buttonclass="!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><buttonclass="!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><buttonclass="!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>