2026世界杯赛事中心 - 官方指南
Introduction
Landrick is a Powerful Saas & Software Bootstrap Template. It is an excellent HTML template for startup, Social media marketing, Digital markering/agency, Email Templates, Online Learning Course, coworking space, cloud hosting, car ride, classic saas, classic application, event, business, application, educational course, personal portfolio, services, enterprise, minimal portfolio single product, saas, marketing, agency, Careers, Customer Supports, Onepage Landing etc. Landrick is fully updated with latest bootstrap v4.5. It is 100% responsive and looks stunning on all types of screens and devices. Users will love your site because it gives them a unique user experience (UX), clean, modern & beautiful design. They are also easy to customize and to combine with other components.
我们已加入支持RTL的暗黑模式，并兼容浅色与暗黑版本。
我们新增了多个演示页面及重要内页，并修复了响应式问题。
若您有任何疑问或建议，请随时与我们联系。
平台结构
在开发过程中，我们遵循了行业标准与模块化结构。以下章节将详细介绍平台的文件夹结构、整体布局、HTML文件结构及所用插件。
文件与文件夹结构
2026世界杯赛事中心
|
├── html files
│ └── Something 113 html pages
│
├── css/
│ └── colors
│ │ └── default.css
│ │ └── cyan.css
│ │ └── green.css
│ │ └── red.css
│ │ └── skobleoff.css
│ │ └── skyblue.css
│ │ └── slateblue.css
│ │ └── purple.css
│ │
│ └── bootstrap.css
│ └── animate.css
│ └── animation-delay.css
│ └── aos.css
│ └── flatpickr.min.css
│ └── flexslider.css
│ └── magnific-popup.css
│ └── materialdesignicons.min.css
│ └── materialdesignicons.css
│ └── owl.carousel.min.css
│ └── owl.theme.default.min.css
│ └── owl.transitions.css
│ └── slick-theme.css
│ └── slick.css
│ └── swiper.min.css
│ └── style-dark.css
│ └── style-dark-rtl.css
│ └── style-rtl.css
│ └── style.css
│
├── fonts/
│ └── ajex-loader.gif
│ └── materialdesignicons-webfont.eot
│ └── materialdesignicons-webfont.svg
│ └── materialdesignicons-webfont.ttf
│ └── materialdesignicons-webfont.woff
│ └── materialdesignicons-webfont.woff2
│ └── slick.ttf
│ └── slick.woff
│
├── images/
│ └── All dummy images
│
├── scss/
│ └── dark
│ │ └── rtl
│ │ │ └── _bootstrap-custom-rtl.scss
│ │ │ └── _components-rtl.scss
│ │ │ └── _general-rtl.scss
│ │ │ └── _helper-rtl.scss
│ │ │ └── _menu-rtl.scss
│ │ │
│ │ └── _bootstrap-custom.scss
│ │ └── _components.scss
│ │ └── _general.scss
│ │ └── _helper.scss
│ │ └── _menu.scss
│ │ └── _variables.scss
│ │
│ └── rtl
│ │ └── _bootstrap-custom-rtl.scss
│ │ └── _components-rtl.scss
│ │ └── _general-rtl.scss
│ │ └── _helper-rtl.scss
│ │ └── _menu-rtl.scss
│ │
│ └── _blog.scss
│ └── _bootstrap-custom.scss
│ └── _components.scss
│ └── _contact.scss
│ └── _countdown.scss
│ └── _cta.scss
│ └── _features.scss
│ └── _footer.scss
│ └── _general.scss
│ └── _helper.scss
│ └── _home.scss
│ └── _menu.scss
│ └── _price.scss
│ └── _team.scss
│ └── _testi.scss
│ └── _user.scss
│ └── _variables.scss
│ └── _work.scss
│ └── style-dark-rtl.scss
│ └── style-dark.scss
│ └── style-rtl.scss
│ └── style.scss
│
├── php/
│ └── contact.php file
│
└── js/
└── app.js
└── bootstrap-bundle.min.js
└── jquery-3.4.1.js
└── jquery.easing.min.js
└── scrollspy.min.js
└── aos.js
└── contact.js
└── counter.init.js
└── feather.min.js
└── flatpickr.min.js
└── flatpickr.init.js
└── flexslider.min.js
└── flexslider.init.js
└── jquery.countdown.min.js
└── jquery.countdown.js
└── countdown.init.js
└── isotope.js
└── jquery.magnific-popup.min.js
└── magnific.init.js
└── portfolio.init.js
└── jquery.mb.YTPlayer.min.js
└── maintenance.init.js
└── owl.carousel.min.js
└── owl.init.js
└── swiper.min.js
└── swiper.init.js
└── parallax.js
└── slick.min.js
└── slick.init.js
└── small_menu.js
└── typed.js
└── typed.init.js
HTML结构详解
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Landrick - Saas & Software Landing Page Template </title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="Site description" /> <meta name="keywords" content="Your tags" /> <!-- 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" /> <link href="css/colors/worldcup.css" rel="stylesheet" id="color-opt" /> </head> <body> <!-- Loader Start --> <div id="#--------"> -------- -------- </div> <!-- Loader End --> <!-- Navbar Start --> <header> <div class="--------"> -------- -------- -------- -------- </div> </header> <!-- Navbar End --> <!-- Hero Start --> <section class="--------"> <div class="--------"> -------- -------- -------- -------- </div> </section> <!-- Hero End --> <!-- Footer Start --> <footer> <div class="--------"> -------- -------- -------- -------- </div> </footer> <!-- Footer End --> <!-- Back To Home Start --> <a href="#" class="--------" id="#--------"> -------- -------- </a> <!-- Back To Home End --> <!-- Javascript Start --> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> -------- -------- -------- <script src="js/app.js"></script> <!-- Javascript End --> </body> </html>
CSS
文件说明如下：
| 文件名 | Description |
|---|---|
bootstrap.min.css
|
2026世界杯赛事中心采用最新的Bootstrap v4.4.1框架，核心框架文件已集成至所有页面。 |
style.css
|
此文件包含所有页面的通用样式。 |
style-rtl.css
|
为启用暗黑模式，请将引用替换为 |
style-dark.css
|
为启用暗黑模式，请将引用替换为 |
style-dark-rtl.css
|
为启用暗黑模式，请将引用替换为 |
JavaScript应用
文件说明如下：
| 文件名 | Description |
|---|---|
app.js
|
这是主JavaScript文件，包含布局、侧边栏等功能所需的自定义JS代码。 |
Menu
部分更新说明：
导航居中至右侧
若需将导航菜单从居中移至右侧，请在导航元素上添加 `navigation-menu` 和 `nav-right` 类。
导航居中
导航右对齐
导航居中至左侧
若需将导航菜单从居中移至左侧，请在导航元素上添加 `navigation-menu` 和 `nav-left` 类。
导航左对齐
导航浅色模式
若您希望导航菜单居中且采用浅色模式，请在导航元素上添加 `navigation-menu` 和 `nav-light` 类。
浅色导航居中
浅色导航右对齐
若您希望导航菜单右对齐且采用浅色模式，请在导航元素上添加 `navigation-menu`、`nav-right` 和 `nav-light` 类。
浅色导航左对齐
若您希望导航菜单左对齐且采用浅色模式，请在导航元素上添加 `navigation-menu`、`nav-left` 和 `nav-light` 类。
加载动画设置
要添加加载动画，请在 `<body>` 标签后插入以下代码。
<-- loader start -->
<div id="preloader"">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<-- loader end -->
版权与官方文档
我们使用了以下资源，感谢社区的精彩创作。
- Bootstrap 4.5
- Jquery
- Feather Icons
- Material Design Icons
- Flaticon Icons
- Iconscout图标
- Owl Carousel
- Swiper Slider
- Flex Slider
- Slick Slider
- 视差效果
- 倒计时插件
- Magnific Popup
- Typed Text
- Lukaszadam插画图片
- Stories插画图片
- Manypixels插画图片
- Isometric插画图片
- Flatpickr - 日期选择器
- Freepic图片
- Unsplash图片
- 动画插件
- AOS动画插件
支持服务
再次感谢您的支持。若您在使用过程中有任何疑问，我们乐意为您解答。若您有任何功能建议或需求，请随时告知我们，我们将努力在未来的更新中实现。
若您的问题超出本帮助文档范围，请随时通过电子邮件或我们的页面与我们联系。
保持卓越
2026世界杯赛事中心
Changelog
版本 v2.5.1 - 2020年8月1日
- 修复：修复部分菜单及响应式问题（CSS修改）
版本 v2.5 - 2020年7月31日
- 新增：IT解决方案落地页
- 新增：企业商务落地页
- 新增：邮箱收件箱落地页
- 赛事中心
- 球队动态
- 新闻资讯
- 比分查询
- 赛程表
- 数据统计
- 用户指南 账户注册 投注流程 充值提现
- 平台优势 实时数据 深度分析 流畅体验
- Added : New Blog Details Page
- Added : New About Us Page
- Added : New Company History Page
- 常见问题 账户相关 支付问题 赛事疑问
- Fixed : Fixed issue in Comingsoon page
- Fixed : Fixed issue in Comingsoon two page
- Fixed : Fixed issue in Maintenance page
- Added : 8 Elegent Color schemes
版本 v2.2 - 2020年5月26日
- Update Latest Bootstrap v4.5
- 最新更新
- Update Latest Material Design Icons v5.3.45
- 关于我们
- 联系我们 在线客服 邮件支持 服务热线
- New Insurance Landing Live Preview
- New E-Book Landing Live Preview
- 隐私政策 数据安全 用户协议
- Fixed some menu issues
- Menu easily move center to right (css based) and add light menu (css based)
- Fixed some responsive issues
版本 v2.1 - 2020年4月1日
- Update Latest Jquery v3.4.1
- 合作伙伴
- 技术支持
- 平台优势
- 安全保障 账户安全 交易安全
- 平台介绍 公司愿景 发展历程
- 服务条款 用户协议 免责声明
- 联系方式 客服中心 商务合作
- Added new components in Components Page
- Update Documentation
- Fixed couples of issues
版本 v2.0 - 2020年2月5日
- 官方公告
- 关于我们
- 赛事资讯
- Add New Job page in Careers pages
- Added new components in Components Page
- 网站地图
- 语言选择
- 繁简体切换
- Fixed couple of issues in One Page Menu
- Fixed couple of issues in mega Menu
版本 v1.6 - 2019年12月11日
- Update Bootstrap to v4.4.1
- 帮助中心
- 用户协议
- 服务条款
- 账户管理 个人资料 安全设置 账单记录
- 常见问题
- 招贤纳士 人才招聘 公司文化
- Fixed Responsive Issue
版本 v1.5 - 2019年11月20日
- Added RTL Supported Version
- Added Payments Landing Page
- Added Cryptocurrency Landing Page
- Added Software Landing Page
- Added Comingsoon Page
- Fixed Responsive and Menu Issue
版本 v1.4 - 2019年10月15日
- 企业合作
- 品牌故事
- 服务范围
- 联系我们
- 文档中心 操作指南 更新日志
- 反馈建议
版本 v1.3 - 2019年10月1日
- 教育资源
- 个人中心
- 产品详情
- 用户中心
- Fixed Menu Issue
版本 v1.2 - 2019年9月17日
- 合作空间
- 活动发布
- 云服务
- 作品展示
- Added Some Utility Pages
- Added Some Components
版本 v1.1 - 2019年9月7日
- 酒店预订
- 现代商业
- 客户支持，单页着陆页
- 优化导航与响应式布局
版本 v1.0 - 2019年8月29日
- Initial Released
SCSS文件更新日志 v2.5
SCSS文件中的部分新增与修改说明：
- 核心样式
- 组件样式
- 特性样式
- 辅助样式
- 首页样式
- 导航样式
- 用户样式
- 变量配置
- 作品集样式
注意：请完整替换暗黑模式的SCSS文件和RTL模式的SCSS文件。
图片资源更新日志 v2.5
将部分.png图片替换为.svg图片：
- 客户图标资源
- 登录图标资源
- 密码恢复图标资源
- 注册图标资源
- 联系方式图标资源
- 404页面图标资源