2026世界杯中文平台 - 官方帮助中心

帮助中心

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

欢迎！首先，我们非常感谢您选择我们的2026世界杯中文平台。您的支持对我们至关重要。如果您喜欢我们的服务，请不要忘记给予评价，这将帮助我们不断改进和提供更优质的赛事资讯与竞猜体验。

关于基础的HTML、JavaScript或CSS编辑问题，建议您先通过搜索引擎或访问相关技术文档进行查询。平台相关问题将获得优先处理。您需要具备一定的HTML/CSS基础知识才能更好地进行平台定制。

建议使用Firebug或Chrome开发者工具进行调试。

请勿从零开始，建议参考现有演示页面进行修改，以便更快地理解平台运作方式。

您可以通过浏览器内置的“页面查找”功能（通常是Ctrl+F）快速定位文档中的信息。

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

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

请将下载的文件解压到您的本地计算机。解压后的文件夹中将包含一个文档文件夹和一个包含平台HTML文件的文件夹。

2026世界杯中文平台是一个基于HTML的平台，它结合了CSS样式表和多个JavaScript插件，包含多个演示页面和内部页面。以下是对文件和一些主要功能的简要概述。

• CSS 文件（主要 CSS 文件、Bootstrap4 CSS 文件等）
• 字体（Flaticons）
• 图片资源
• JavaScript 文件（模板 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和JavaScript文件，可帮助您快速开发出在任何尺寸屏幕上都美观的网站，无论是17英寸笔记本电脑屏幕还是手机。

Bootstrap的网格系统非常灵活且跨浏览器兼容性强，尤其擅长响应式布局。您可以轻松定制网站的各个部分或构建新功能。

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

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

HTML标记

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

所有CSS文件均存储在“css”文件夹中。以下是平台使用的样式表文件列表。您可以通过打开每个文件来获取更多信息：

1. dropdown-effects - 包含响应式巨型菜单下拉效果的文件夹。
2. animate.css - 跨浏览器 CSS3 动画库。
3. bootstrap.min.css - 这是必需的主要样式表，用于表单、输入框、div、列表项等基本模板样式。
4. brick-theme.css - 砖红色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
5. dimgreen-theme.css - 暗绿色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
6. flaticon.css - 一套完整的 200+ 精简矢量图标。
7. green-theme.css - 绿色主题的主要 CSS 文件。
8. indigo-theme.css - 靛蓝色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
9. magnific-popup.css - 响应式灯箱样式表。
10. menu.css - 响应式巨型菜单的 CSS 文件。
11. orangered-theme.css - 橙红色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
12. owl.carousel.css - 响应式轮播滑块。
13. owl.theme.default.min.css - 响应式轮播滑块自定义文件（如果您需要默认导航控件，如点或下一按钮，则需要此文件）。
14. pink-theme.css - 粉色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
15. red-theme.css - 红色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
16. responsive.css - 此样式表包含响应式规则，用于将模板适配到从桌面到小型移动设备的任何分辨率。
17. royalblue-theme.css - 皇家蓝主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
18. skyblue-theme.css - 天蓝色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。
19. violet-theme.css - 紫色主题的主要 CSS 文件（包含一些通用样式，如锚点颜色、字体大小等）。

如果您创建自己的样式，请务必检查所有响应式尺寸的兼容性，以确保一切正常。如果您需要在特定尺寸下更改样式，请在响应式CSS文件中进行修改。

每个CSS文件的区块都有注释，相信您在编辑时不会遇到问题。例如，标记区块开始的注释如下所示：

如何修改样式

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

如果发现新样式未生效，很可能是因为选择器特异性问题。请在您正在使用的CSS文件中向下滚动，并确保没有具有更高优先级的相似样式。

本平台使用了多个JavaScript脚本，其中许多脚本在平台代码中都有详细说明。如果您是开发者，这将特别有用。以下是包含的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 - jQuery响应式巨型菜单插件
15. modernizr.custom.js - 检测浏览器HTML5和CSS3特性的JavaScript库
16. owl.carousel.js - jQuery响应式轮播滑块插件
17. request-form.js - 请求表单jQuery插件
18. register-form.js - 注册表单jQuery插件
19. respond.min.js - 针对IE6-8的CSS3 Media Queries的快速轻量级Polyfill
20. wow.js - 滚动时显示CSS动画的jQuery插件

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

修改网站图标

网站图标（favicon）位于“/images/”目录下，文件名为“favicon.ico”。您无需修改HTML，只需用您自己的图标文件替换即可。请确保强制刷新浏览器缓存以查看新的网站图标。

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

请勿忘记替换iOS设备的图标文件：apple-touch-icon-152x152.png, apple-touch-icon-120x120.png, apple-touch-icon-76x76.webp 和 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。

2026世界杯中文平台为您提供详尽的帮助文档，助您轻松掌握平台各项功能，畅享世界杯观赛与竞猜乐趣。

1. 打开index.html文件
2. 在<head>部分查找这些代码行（默认设置天蓝色主题！）




3. 选择您喜欢的颜色（例如，您想将天蓝色主题更改为绿色），只需移除注释标签即可，如下所示：





4. 保存并查看结果

导航菜单背景色

Treko HTML Template includes 2 different styles for navigation (no background color and white background color). It's easy to change the header type, you just need to do following:

导航样式：背景色切换

HTML标记

默认导航：无背景色

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

HTML标记

白色背景导航

导航菜单：滚动定位

页面内跳转设置：通过设置元素的ID属性，您可以轻松实现页面内任意位置的平滑跳转。例如，使用 `href="#content-7"` 可以跳转到ID为 `content-7` 的元素。此功能无需JavaScript即可正常工作，确保了基础可用性。

页面区块背景色

部分内容区域默认无背景色，您可以根据需要手动添加背景色样式。

1. 在文本编辑器中打开index.html文件（我使用的是Sublime Text）
2. 查找您想更改背景颜色的部分（例如，content-1）




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




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




6. 保存并查看结果

灯箱定制

本平台采用 Magnific Popup jQuery 插件实现响应式灯箱效果，该插件专注于性能优化，为各类设备用户提供卓越体验。

HTML标记

轻松定制：为需要启用 Magnific Popup 的链接添加 `video-popup1`、`video-popup2` 或 `video-popup3` 类名，并将视频链接置于 `<a>` 标签内。

初始化弹窗

视频弹出窗口的初始化代码位于 `custom.js` 文件中。支持三种视频弹出方式（通过类名 `video-popup1`、`video-popup2` 或 `video-popup3` 识别），您只需在此处填入您的视频链接即可。

更多详情，请访问官方文档。

本平台集成了 Flaticons Pack（250+ 图标）、FontAwesome Icons（675+ 图标）及 Flat PNG 图标（300+ 图标）。

FlatIcons HTML标记

Flaticons 图标使用 `<span>` 元素，每个图标拥有独立的类名。完整类名列表请参见相关文档。

FontAwesome Icons HTML标记

本平台同样支持 FontAwesome 图标。使用这些图标包的关键在于了解正确的类名。如需更多信息，请访问：http://fontawesome.io/

FontAwesome 图标使用 `<i>` 元素，每个图标拥有独立的类名。完整类名列表请参见相关文档。

PNG图标 HTML标记

类名 `.img-85` 用于指定图片分辨率，例如 `.img-85` 表示 85x85 像素。

邮件订阅表单

如需使用邮件订阅功能，您需要拥有一个 MailChimp 账户（该功能仅支持 MailChimp，请访问 http://mailchimp.com/）。

请在您的代码编辑器中打开 `custom.js` 文件，进行以下修改：

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

需修改三处关键值

如何获取Mailchimp表单Action URL

请登录您的 MailChimp 账户，找到您的列表，然后选择“注册表单”，接着选择“嵌入式表单”。在此页面您将找到表单操作 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框架 - 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.

致以诚挚的问候，2026世界杯体育信息科技（北京）有限公司