主队	比分	客队	联赛	时间(北京)
近期暂无比赛，请稍后再来查看。

简介

立即探索黑白体育，开启您的足球观赛新篇章，享受最流畅、最清晰的赛事直播体验。

快速上手指南

下载黑白体育APP，一站式满足您对足球赛事的所有需求，从实时比分到深度战术分析，助您成为真正的懂球帝。

CSS

将此基础样式表 `<link>` 标签置于 `<head>` 区域，优先加载，确保所有直播与数据显示的视觉一致性。

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

JS

为确保所有动态数据和交互功能正常运行，请务必在 `</body>` 标签前引入 jQuery、Bootstrap 核心脚本及黑白体育专属JS插件。脚本加载顺序至关重要。

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

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

基础布局配置

遵循HTML5标准构建您的页面，并集成视口meta标签，以保证在各种设备上都能获得最佳的响应式观赛体验。

HTML 结构 :

<!doctype html>
<html lang="zh-TW">
    <head>

        <meta charset="utf-8" />
        <title>黑白体育：您的专属足球观赛入口</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="黑白体育：高清足球直播、实时比分、赛事资讯" />
        <meta name="keywords" content="黑白直播, 黑白体育, 看球直播, 欧联直播, 足球直播在线直播观看免费, 中超直播, NBA直播, 德甲直播" />

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

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

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

    <body>

        <!-- Loader Start -->
        <div id="loader">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="hero">
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="container">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="btn btn-primary btn-pills" id="download-app">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        精选高清无插件直播，尽享极致观赛体验内容，黑白体育与你一同发现更多精彩。
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

RTL 布局支持

RTL 布局 :

要切换至阿拉伯语或希伯来语等右到左显示的语言，请将主样式表 `style.css` 替换为 `style-rtl.css`。

暗黑模式

暗黑模式 :

启用暗黑模式，让您的观赛界面在低光环境下更加舒适，只需将 `style.css` 替换为 `style-dark.css` 即可。

暗黑 RTL 布局 :

融合暗黑模式与RTL布局，为全球用户提供全方位的沉浸式观赛体验。替换 `style.css` 为 `style-dark-rtl.css`。

菜单

导航居中右对齐

将导航栏的对齐方式从居中调整至右侧，只需在导航容器的class中添加 `nav-right` 属性。

导航居中左对齐

将导航栏的对齐方式从居中调整至左侧，只需在导航容器的class中添加 `nav-left` 属性。

浅色导航居中

若需将导航栏设为浅色主题并居中显示，请在导航容器的class中添加 `nav-light`。

浅色导航右对齐

若需将导航栏设为浅色主题并右对齐，请同时添加 `nav-right` 和 `nav-light` class。

浅色导航左对齐

若需将导航栏设为浅色主题并左对齐，请同时添加 `nav-left` 和 `nav-light` class。

⚽ 足球实时 (0)

文档

简介