立即購買
实时体育数据 数据来源：FIFA

⚽ 足球实时 (8)

主队比分客队联赛时间(北京)
FC圖森4:0明星FC美國足球聯賽二級10:00
天使城2:0奧蘭多驕傲美國全國女子足球聯賽10:00
塔科馬明星0:0斯諾霍米什聯隊美國足球聯賽二級10:00
科雷卡米諾斯大學自治大學0:0瓜達拉哈拉體育會友誼賽10:00
坎昆1:0托盧卡友誼賽09:00
丹佛峰會0:3堪薩斯城電流美國全國女子足球聯賽09:30
中湖聯隊2:0波特蘭邦格斯美國足球聯賽二級09:30
哥倫比亞1:0迦納國際足總世界盃09:30
更新于 2026-07-04 11:41（北京时间）

文档中心

简介

立即开始使用 FIFA 官方中文网。启动您的观赛体验，并从我们关于设计和管理以转化率为中心的 FIFA 官方网站的专业知识中获益。

快速启动

立即开始探索 FIFA 2026 世界杯，获取您所需的一切，驱动球迷热情，连接全球足球社群。前往下载页面。

CSS

将样式表 <link> 标签复制并粘贴到您的 <head> 部分，置于所有其他样式表之前，以加载 FIFA 官方网站的 CSS。

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

我们的许多组件需要使用 JavaScript 来实现功能。具体来说，它们需要 jQuery 和我们的 JavaScript 插件。将以下 <script> 标签放在页面末尾，关闭 </body> 标签之前，以启用它们。jQuery 必须首先加载，然后是 bootstrap.bundle.min.js，最后是我们的 JavaScript 插件。

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>

入门模板

请确保您的页面已按照最新的设计和开发标准进行设置。这意味着使用 HTML5 doctype 并包含 viewport meta 标签以实现适当的响应式行为。将所有这些整合在一起，您的页面应该会显示如下：

HTML 代码 :
<!doctype html>
<html lang="zh-TW">
    <head>

        <meta charset="utf-8" />
        <title>2026 世界杯 · FIFA 官方中文网</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="2026 世界杯 · FIFA 官方中文网 - 权威赛事资讯，一手掌握" />
        <meta name="keywords" content="2026世界杯, 世界杯官网, FIFA世界杯, 足球盛宴, 赛程, 票务, 新闻, 足球直播" />

        <!-- 网站图标 -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- 主CSS -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- 加载动画开始 -->
        <div id="loader">
            --------
            --------
        </div>
        <!-- 加载动画结束 -->

        <!-- 导航开始 -->
        <header>
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- 导航结束 -->

        <!-- 英雄区域开始 -->
        <section class="hero">
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- 英雄区域结束 -->

        <!-- 页脚开始 -->
        <footer>
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- 页脚结束 -->

        <!-- 返回顶部开始 -->
        <a href="#" class="------" id="------">
            --------
            --------
        </a>
        <!-- 返回顶部结束 -->

        <!-- JavaScript开始 -->
        <script src="js/jquery-3.4.1.min.js"></script>
        FIFA以珍贵历史档案，深度回溯为核心，带来高效便捷的体验。
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript结束 -->
    </body>
</html>
RTL 版本
RTL 版本 :

为了启用 RTL（从右到左）模式，请将 style.css 的引用替换为 style-rtl.css。

暗黑模式
暗黑模式 :

为了启用暗黑模式，请将 style.css 的引用替换为 style-dark.css。

暗黑 RTL 版本 :

为了启用暗黑 RTL 模式，请将 style.css 的引用替换为 style-dark-rtl.css。

菜单
导航居中至右侧

要将导航菜单从中心移动到右侧，只需在导航菜单中添加 class navigation-menu 和 nav-right。

导航居中至左侧

要将导航菜单从中心移动到左侧，只需在导航菜单中添加 class navigation-menu 和 nav-left。

浅色导航居中

如果您想要居中且浅色的导航菜单，只需在导航菜单中添加 class navigation-menu 和 nav-light。

浅色导航右对齐

如果您想要右对齐且浅色的导航菜单，只需在导航菜单中添加 class navigation-menu nav-right 和 nav-light。

浅色导航左对齐

如果您想要左对齐且浅色的导航菜单，只需在导航菜单中添加 class navigation-menu nav-left 和 nav-light。