HTML+CSS+JS制作仿王者荣耀官方网站（内附源码，含5个页面）

WebDesign_Mu

于 2024-12-26 13:12:40 发布

阅读量683

点赞数 8

文章标签： html css 前端

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

版权

一、作品介绍

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>