一、作品介绍
HTML+CSS+JS制作一个仿王者荣耀官方网站，包含游戏资讯首页、英雄资料页、赛事中心页、社区互动页、充值中心页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。
二、页面结构
1. 顶部导航栏
包含Logo、主要导航菜单（游戏资讯、英雄资料、赛事中心、社区互动、充值中心）以及用户登录/注册入口
2. 英雄宣传横幅
大型轮播图展示最新英雄、皮肤和活动，配有动态特效和视频背景
3. 新闻公告区
左侧展示游戏新闻、版本更新、活动资讯，右侧显示游戏公告、维护通知
4. 英雄展示模块
网格布局展示游戏英雄头像，可按战士、法师、坦克、刺客、射手、辅助分类筛选
5. 赛事专区
展示KPL职业联赛、城市赛等赛事信息，包含赛程表、直播入口和精彩集锦
6. 游戏资料区
包含攻略文章、装备介绍、铭文搭配等游戏攻略内容
7. 互动社区
展示玩家作品、精彩视频、玩家讨论等用户生成内容
8. 底部信息
包含腾讯游戏Logo、版权信息、客服入口、合作伙伴、社交媒体图标等
三、作品演示
四、代码目录
五、首页代码
<!DOCTYPE html>
<html lang="zh">
<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-100">
<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>
<nav class="bg-white shadow-lg fixed w-full z-50">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="text-3xl font-['Pacifico'] text-custom">logo</span>
<div class="hidden md:flex items-center space-x-8 ml-12">
<a href="./index.html" class="text-custom hover:text-custom/80">游戏资讯</a>
<a href="./hero-profile.html" class="text-gray-700 hover:text-custom">英雄资料</a>
<a href="./event-center.html" class="text-gray-700 hover:text-custom">赛事中心</a>
<a href="./community-interaction.html" class="text-gray-700 hover:text-custom">社区互动</a>
<a href="./top-up-center.html" class="text-gray-700 hover:text-custom">充值中心</a>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="!rounded-button px-4 py-2 text-sm text-gray-700 hover:text-custom">登录</button>
<button
class="!rounded-button bg-custom text-white px-4 py-2 text-sm hover:bg-opacity-90">注册</button>
</div>
</div>
</div>
</nav>
<div class="pt-16">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img src="./images/b1.jpg"
alt="英雄展示" class="w-full h-[600px] object-cover object-top">
</li>
<li class="glide__slide">
<img src="./images/b2.jpg"
alt="英雄展示" class="w-full h-[600px] object-cover object-top">
</li>
</ul>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
</div>
</div>
</div>
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="md:col-span-2 bg-white rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6">最新资讯</h2>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<img src="./images/z1.jpg"
alt="新闻图片" class="w-48 h-28 object-cover rounded">
<div>
<h3 class="font-semibold">新英雄上线：天策上将-李广</h3>
<p class="text-gray-600 text-sm mt-2">全新英雄李广即将降临王者峡谷，带来全新的游戏体验！</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img src="./images/z2.jpg"
alt="新闻图片" class="w-48 h-28 object-cover rounded">
<div>
<h3 class="font-semibold">KPL春季赛即将开战</h3>
<p class="text-gray-600 text-sm mt-2">2024年KPL春季赛3月15日开战，群雄逐鹿，谁将问鼎巅峰？</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6">游戏公告</h2>
<div class="space-y-4">
<div class="border-b pb-4">
<span class="text-custom px-2 py-1 rounded text-sm bg-custom bg-opacity-10">系统</span>
<p class="mt-2">3月8日全服停机维护公告</p>
</div>
<div class="border-b pb-4">
<span class="text-custom px-2 py-1 rounded text-sm bg-custom bg-opacity-10">活动</span>
<p class="mt-2">白色情人节活动开启公告</p>
</div>
<div class="border-b pb-4">
<span class="text-custom px-2 py-1 rounded text-sm bg-custom bg-opacity-10">更新</span>
<p class="mt-2">游戏版本更新内容一览</p>
</div>
</div>
</div>
</div>
<div class="mt-12">
<h2 class="text-2xl font-bold mb-8">英雄阵容</h2>
<div class="flex space-x-4 mb-6">
<button class="!rounded-button px-4 py-2 bg-custom text-white">全部</button>
<button class="!rounded-button px-4 py-2 bg-white">战士</button>
<button class="!rounded-button px-4 py-2 bg-white">法师</button>
<button class="!rounded-button px-4 py-2 bg-white">坦克</button>
<button class="!rounded-button px-4 py-2 bg-white">刺客</button>
<button class="!rounded-button px-4 py-2 bg-white">射手</button>
<button class="!rounded-button px-4 py-2 bg-white">辅助</button>
</div>
<div class="grid grid-cols-2 md:grid-cols-6 gap-4">
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h1.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">吕布</p>
</div>
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h2.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">王昭君</p>
</div>
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h3.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">张飞</p>
</div>
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h4.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">李白</p>
</div>
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h5.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">后羿</p>
</div>
<div class="bg-white p-4 rounded-lg text-center">
<img src="./images/h6.jpg" alt="英雄头像"
class="w-full h-auto rounded-lg">
<p class="mt-2">大乔</p>
</div>
</div>
</div>
</div>
<footer class="bg-gray-800 text-white mt-12">
<div class="container mx-auto px-6 py-8">
<div class="flex flex-col md:flex-row justify-between">
<div>
<span class="text-3xl font-['Pacifico'] text-white">logo</span>
<p class="mt-4 text-gray-400">腾讯游戏 版权所有</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-8 md:mt-0">
<div>
<h3 class="font-semibold 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="font-semibold 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="font-semibold mb-4">赛事中心</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">KPL职业联赛</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="font-semibold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-qq"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>六、获取代码
内附源码，含5个页面。欢迎留言，欢迎关注。
725
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
