文档

简介

欢迎使用鲸鱼直播,开启您的精彩赛事直播体验。我们致力于提供最流畅、最全面的体育赛事观看服务。

快速开始

鲸鱼直播助您全面提升观赛体验,驱动用户增长,实现高效互动。立即下载,探索无限可能。

CSS

将此行加入您的 `<head>` 部分,确保鲸鱼直播的视觉风格优先加载。

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

JS

为确保所有组件正常运作,请在 `</body>` 标签前引入 jQuery 及我们的 JavaScript 插件。请依照 jQuery、`bootstrap.bundle.min.js`、我们的插件的顺序加载。

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

快速入门

遵循最新的网页设计标准,使用 HTML5 doctype 并加入视口元标签,以保证响应式布局的完美呈现。整合所有元素,您的基础页面结构应如下所示。

核心结构 :
<!doctype html>
<html lang="en">
    <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直播, 足球直播" />

        <!-- 网站图标 -->
        <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="#--------">
            --------
            --------
        </div>
        <!-- 加载动画 结束 -->

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

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

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

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

        <!-- JavaScript 开始 -->
        <script src="js/jquery-3.4.1.min.js"></script>
        鲸鱼直播围绕鲸鱼直播不断创新,回应用户的真实需求。
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript 结束 -->
    </body>
</html>
                        
多语言支持
多语言支持 :

欲启用多语言支持,请将 `style.css` 替换为 `style-rtl.css`。

暗黑模式
暗黑模式 :

切换至暗黑模式,只需将 `style.css` 替换为 `style-dark.css`。

暗黑多语言模式 :

结合暗黑与多语言模式,请将 `style.css` 替换为 `style-dark-rtl.css`。

菜单
导航居中右对齐

要将导航栏移至右侧,请在导航类名中添加 `nav-right`。

导航居中左对齐

要将导航栏移至左侧,请在导航类名中添加 `nav-left`。

浅色导航居中

若需浅色且居中的导航栏,请在导航类名中添加 `nav-light`。

浅色导航右对齐

结合浅色与右对齐,请在导航类名中同时添加 `nav-right` 与 `nav-light`。

浅色导航左对齐

结合浅色与左对齐,请在导航类名中同时添加 `nav-left` 与 `nav-light`。