2026世界杯直播｜高清足球直播｜操作指南

帮助中心

• 创建日期：2020年8月14日

欢迎！首先，感谢您购买我们的2026世界杯直播平台。我们非常感谢您的每一次支持。如果您喜欢我们的工作，请不要忘记评分。这将帮助我们开发出更好、更创新的内容。

关于基础HTML、JavaScript或CSS编辑的问题，请先尝试在搜索引擎搜索或访问W3Schools，因为模板相关问题将获得最高优先级。您需要具备一定的HTML/CSS知识来编辑本模板。

利用Firebug或Chrome开发者工具进行调试。

不要从零开始，尝试修改现有的演示页面，以便了解其工作原理。

通过浏览器“页面查找”功能（通常是Ctrl+F），快速定位您需要的信息。

许多问题可能由第三方插件引起，如果您遇到无法解决的错误，请尝试禁用所有第三方插件。

别忘了再次浏览在线演示，获取布局、使用灵感和示例代码。

将下载的文件解压到您的本地磁盘。解压后的文件夹中包含一个文档文件夹和一个HTML模板文件夹。

2026世界杯直播平台是一个HTML模板，它结合了多个HTML页面（18个演示页面+9个附加内页）、CSS样式表和多个JavaScript插件。以下是对文件及其主要功能的简要概述。

• css（主CSS文件、Bootstrap4 CSS文件等）
• fonts（Flaticons）
• images（所有图片）
• js（模板JS）
• php（heroForm.php等 - 表单PHP文件）
• demo-x.html - 18个HTML文件（演示数量）

将下载的文件解压到您的本地磁盘。解压后的文件夹中包含一个文档文件夹和一个HTML模板文件夹。2026世界杯直播平台是HTML模板，无需真正“安装”，只需解压您从官方渠道下载的主文件，即可立即使用。

1. 选择您将在项目中使用的布局和附加内页。
2. 将demo-x.html重命名为index.html。
3. 进行必要的更改（添加您的文本、图片等）。
4. 使用FTP客户端或文件管理器（或类似工具），将您将在项目中使用的所有文件夹和HTML页面复制到您的服务器或本地计算机的www或public_html目录。

2026世界杯直播平台模板基于Bootstrap v4.5.0构建，这是一系列CSS和JS文件，可以帮助您快速开发出在任何尺寸设备上都美观的网站，无论是17英寸笔记本屏幕还是iPhone。

Bootstrap的基础网格系统是其网格系统的变体。其语法简单，跨浏览器兼容性好，最棒的是它还具有出色的移动端响应能力。您可以非常轻松地自定义网站的任何部分或构建新功能。

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它基于Flexbox构建，并且完全响应式。

index.html是包含模板HTML结构的主文件。以下是其通用结构（已简化）：

HTML结构

如需更多信息，请访问：https://getbootstrap.com/docs/4.0/layout/grid/

所有CSS文件都存储在“css”文件夹中。以下是我们在此模板中使用的样式表文件列表。您可以打开每个文件查看更多信息：

1. dropdown-effects - 一个用于响应式Mega菜单的下拉效果文件夹。
2. animate.css - 一个跨浏览器CSS3动画库。
3. bootstrap.min.css - 这是必需的主要样式表，用于基本模板样式，如表单、输入框、div、列表项等。
4. brick-theme.css - Brick配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
5. dimgreen-theme.css - Dimgreen配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
6. flaticon.css - 一套完整的200+精简矢量图标。
7. green-theme.css - Green配色方案的主要CSS文件。
8. indigo-theme.css - Indigo配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
9. magnific-popup.css - 响应式弹窗样式表。
10. menu.css - 响应式Mega菜单的CSS文件。
11. orangered-theme.css - Orangered配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
12. owl.carousel.css - 响应式轮播滑块。
13. owl.theme.default.min.css - 响应式轮播滑块自定义文件（如果您需要默认的导航控件，如圆点或前进/后退按钮，则需要此文件）。
14. pink-theme.css - Pink配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
15. red-theme.css - Red配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
16. responsive.css - 此样式表包含响应式规则，用于将模板适配到任何分辨率，从桌面到小型移动设备。
17. royalblue-theme.css - Royalblue配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
18. skyblue-theme.css - Skyblue配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。
19. violet-theme.css - Violet配色方案的主要CSS文件（包含一些通用样式，如链接颜色、字体大小等）。

如果您创建自己的样式，请务必检查所有响应式尺寸设置，以确保一切正常。如果您需要在特定尺寸下更改自定义样式，请在responsive.css文件中进行。

每个CSS文件的部分都进行了注释，相信您在编辑时不会遇到问题。例如，标记页面头部区域开始的注释如下所示：

如何修改样式

如果您想编辑网站的特定部分，只需在CSS文件中找到相应的标签，然后向下滚动直到找到需要编辑的样式。例如，如果您想更改背景颜色，请打开*.css文件（文件名取决于您使用的配色方案），然后执行以下操作：

如果发现新样式未生效，很可能是因为特异性问题。在您的*.css文件中向下滚动（文件名取决于您使用的配色方案），并确保没有具有更高权重的相似样式。

本模板使用了多个脚本，其中许多脚本已在模板代码中进行了文档说明。如果您是开发者，这将非常有用。以下是包含的JavaScript文件：

1. bootstrap.min.js - 此框架提供额外的用户界面元素，如对话框、工具提示、轮播等。
2. comment-form.js - 用于评论表单的jQuery插件。
3. contact-form.js - 用于联系表单的jQuery插件。
4. custom.js - 此文件包含滚动向上插件、联系表单验证等通用jQuery设置。
5. html5shiv.js - 这是在旧版Internet Explorer中启用HTML5分节元素的标准方法。
6. jquery-3.4.1.min.js - 一个JavaScript库，可以大大减少您需要编写的代码量。
7. jquery.ajaxchimp.min.js - 用于MailChimp订阅表单的jQuery插件。
8. jquery.appear.js - 用于跟踪元素在浏览器视口中出现情况的jQuery插件。
9. jquery.easing.js - 一个提供高级缓动选项的jQuery插件。
10. jquery.magnific-popup.min.js - Magnific Popup是一个响应式弹窗和对话框脚本。
11. jquery.scrollto.js - 平滑滚动到DOM中的任何元素。
12. jquery.validate.min.js - jQuery表单验证插件。
13. jquery.vide.min.js - 用于视频背景的jQuery插件。
14. menu.js - 响应式Mega菜单的jQuery插件。
15. modernizr.custom.js - 一个JavaScript库，用于检测用户浏览器中的HTML5和CSS3功能。
16. owl.carousel.js - 响应式轮播滑块jQuery插件。
17. request-form.js - 用于咨询表单的jQuery插件。
18. register-form.js - 用于注册表单的jQuery插件。
19. respond.min.js - 一个快速轻量级的CSS3 Media Queries min/max-width polyfill（适用于IE 6-8及更高版本）。
20. wow.js - 一个jQuery插件，用于在页面滚动时显示CSS动画。

选择您想要的布局并进行以下更改。

修改网站图标（Favicon）

网站图标（Favicon）位于/images/文件夹下，文件名为favicon.ico。您无需更改HTML，只需用自己的图标文件替换即可。请务必强制刷新浏览器缓存以查看新图标。

您可以在此处轻松生成您的网站图标：Favicon & App Icon Generator

别忘了替换iOS设备的图标 - apple-touch-icon-152x152.png, apple-touch-icon-120x120.png, apple-touch-icon-76x76.png和apple-touch-icon.png。这些图标也位于/images文件夹中。

修改字体

2026世界杯直播平台使用了两种字体：“Roboto”作为文本的Google WebFont，以及“Noto+Sans+TC”作为标题的Google WebFont。要更改嵌入的字体，请查看网站的head部分，您会找到这个标签：

要更改字体，首先访问 http://www.google.com/fonts/ 选择您喜欢的字体，然后使用生成的代码。

修改Logo

打开images文件夹，用您的Logo替换logo-x.png和logo-white.png图片。Logo的尺寸为155 x 36像素。Retina图像的基本概念是使用尺寸加倍的图像（例如310 x 72像素），并将其显示为一半的尺寸（155 x 36像素）。

别忘了更改移动菜单的Logo：

选择页面布局

2026世界杯直播平台HTML模板包含18种不同的页面布局和9个附加内页：

注意！在此压缩包中，演示页面中显示的图片已被占位符替换。

1. 选择您将在项目中使用的布局和附加内页。
2. 将demo-x.html重命名为index.html。
3. 进行必要的更改（添加您的文本、图片等）。
4. 使用FTP客户端或文件管理器（或类似工具），将您将在项目中使用的所有文件夹和HTML页面复制到您的服务器或本地计算机的www或public_html目录。

选择配色方案

2026世界杯直播平台HTML模板包含10种配色方案。在css文件夹中，有10个不同配色方案的CSS文件。您可以使用预定义的颜色之一，或自定义CSS来构建您想要的颜色。

更改模板的配色方案非常简单，只需执行以下步骤：

1. 打开index.html文件。
2. 在<head>部分找到这些代码行（默认设置为skyblue配色方案！）：




3. 选择您喜欢的颜色（例如，您想将skyblue配色方案更改为green），通过删除其中一个注释标签来实现，如下所示：





4. 保存并查看结果！

导航菜单背景色

2026世界杯直播平台HTML模板包含2种不同的导航样式（无背景色和白色背景色）。更改头部类型很容易，只需执行以下步骤：

1) 大多数头部没有背景色

HTML结构

tra-menu - 无背景色

2) 要为导航菜单设置白色背景色，只需将类名tra-menu更改为white-menu即可。

HTML结构

white-menu - 白色背景色

导航菜单：页面跳转

在HTML页面中滚动到特定位置非常简单。页面上有许多ID可供滚动。像往常一样编写您的锚点标签，并将href属性指向您想要跳转到的ID（例如，href="#content-7"）。这意味着即使JavaScript被禁用，您的菜单仍然可以正常工作。

页面区域背景色

大多数页面区域没有背景色。但如果您愿意，可以手动更改背景色：

1. 在您的文本编辑器中打开index.html文件（我使用的是Sublime Text (http://www.sublimetext.com/3)）。
2. 找到您想更改背景色的部分（例如content-1）：




3. 选择您想应用的背景颜色：




4. 将背景颜色类添加到该部分（例如，您想将白色背景色更改为skyblue，则可以将类名bg-skyblue添加到该部分）：
5. 向容器添加white-color类以将字体颜色从黑色更改为白色：




6. 保存并查看结果！

弹窗（Lightbox）定制

弹窗功能由Magnific Popup jQuery插件驱动。Magnific Popup是一个响应式的弹窗和对话框脚本，专注于性能，并为任何设备的用户的最佳体验。

HTML结构

定制非常简单，只需将合适的类名 video-popup1, video-popup2 或 video-popup3 添加到您希望启用Magnific Popup的链接上，并将视频链接放入a标签内。

初始化弹窗

弹窗初始化代码位于custom.js文件中。视频弹窗有3种方式（类名"video-popup1, video-popup2 或 video-popup3"）进行初始化（在此处您只需输入您的视频链接）：

更多信息请访问他们的网站并查看文档。

2026世界杯直播平台使用了Flaticons图标库（250+图标）、FontAwesome图标库（675+图标）和Flat PNG图标（300+图标）。

FlatIcons HTML标记

Flaticons图标使用'span'元素，每个都有其独特的类名。完整的类名列表请参见此处。

FontAwesome Icons HTML标记

UniSet也使用了FontAwesome图标。使用这些图标库的关键在于了解正确的类名。如需更多信息，请访问：http://fontawesome.io/

FontAwesome图标使用'i'元素，每个都有其独特的类名。完整的类名列表请参见此处。

Flat PNG Icons HTML标记

类名img-85显示了图像分辨率（例如：.img-85 = 85x85px 等）。

邮件订阅表单

如果您想使用新闻订阅功能，您需要有一个MailChimp账户（此功能仅与MailChimp配合使用 - http://mailchimp.com/）。

在您的代码编辑器中打开custom.js文件，需要在此处进行更改：

http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

您需要更改三个值。

如何获取Mailchimp的Form Action URL？

登录您的Mailchimp账户，然后选择您的列表，接着选择“Signup forms”（注册表单），再选择“Embedded forms”（嵌入式表单）。您将在该页面找到Form Action URL。

在此处您将学习如何将嵌入式表单添加到您的网站，以及哪些第三方网站支持Mailchimp。将嵌入式表单添加到您的网站。

请注意：此功能仅在您的服务器上可用，PHP文件无法在本地计算机上执行。

联系/注册/咨询/评论表单

Treko also uses the PHP engine for activate contact process. The message direct send to your email address, so you can edit your email address in php/contactForm.php, php/registerForm.php, php/requestForm.php 或 php/commentForm.php file. This will not be available for anyone to see, it is only used by the server to send your email. You can also specify an email subject line (or just leave the one which is there). To do this, please open php/contactForm.php, php/registerForm.php, php/requestForm.php 或 php/commentForm.php file and change these lines:

请注意：此功能仅在您的服务器上可用，PHP文件无法在本地计算机上执行。

文件名：contactForm.php, quickForm 或 commentForm（您必须使用这些确切的文件名）。

字体：

Google Fonts - http://www.google.com/webfonts 图标 Font-face - http://fortawesome.github.com/Font-Awesome/

脚本：

• Bootstrap Framework - http://twitter.github.com/bootstrap/
• Lightbox - http://dimsemenov.com/plugins/magnific-popup/
• jQuery - http://www.jquery.com/
• jQuery.ScrollTo - https://github.com/yckart/jquery.scrollto.js
• jQuery scrollUp - https://github.com/markgoodyear/scrollup
• 表单验证 - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

支持包括修复bug以及解决模板官方销售页面中解释的功能性问题。

支持不包含

• 解决与未包含在我们框架和模板中的插件相关的问题；
• 插件集成；
• 添加新功能或扩展现有功能；
• 任何类型的修改或定制。

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

诚挚问候，Jthemes