世界杯外围资讯网站 - 官方指南
简介
世界杯外围 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的暗黑版本，以及浅色与暗黑版本的RTL模式。
我们新增了多个演示页面和重要的内部页面，并修复了响应式问题。
如果您有任何疑问或反馈，请随时与我们联系。
网站结构
在开发本平台时，我们严格遵循了行业标准和模块化结构。以下章节将详细介绍平台的文件夹结构、整体架构、HTML文件结构及所使用的插件。
文件与文件夹结构
世界杯外围 v2.5
|
├── 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>世界杯外围资讯有限公司 - 2026世界杯最新外围资讯网站</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" /> 皮肤样式 </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
|
世界杯外围采用最新的Bootstrap v4.4.1框架，所有页面均使用核心Bootstrap文件。 |
style.css
|
此文件包含所有页面的通用样式。 |
style-rtl.css
|
启用暗黑模式，请将链接指向暗黑模式的CSS文件。 |
style-dark.css
|
启用暗黑模式，请将链接指向暗黑模式的CSS文件。 |
style-dark-rtl.css
|
启用暗黑模式，请将链接指向暗黑模式的CSS文件。 |
JavaScript功能
文件说明如下：
| 文件名 | Description |
|---|---|
app.js
|
这是主JavaScript文件，包含布局、侧边栏等功能所需的自定义JavaScript代码。 |
菜单
部分更新说明：
菜单居中至右侧
若需将菜单从居中调整至右侧，请在导航类中添加 `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
- Parallax
- Countdown
- Magnific Popup
- Typed Text
- Lukaszadam 插画
- Stories 插画
- Manypixels 插画
- Isometric 插画
- Flatpickr - 日期选择器
- Freepic 图片
- Unsplash 图片
- 动画插件
- AOS 动画插件
支持服务
再次感谢您的支持！我们非常乐意解答您关于本平台的问题。若有任何建议或功能需求，请随时与我们联系，我们将努力在未来的更新中实现。
如果您有超出本帮助文档范围的问题，请随时通过电子邮件或联系我们。
保持卓越
Shreethemes 资源
更新日志
版本 v2.5.1 - 2020年8月1日
- 修复：调整了部分菜单和响应式问题（CSS更新）
版本 v2.5 - 2020年7月31日
- 新增：IT解决方案落地页
- 新增：企业商务落地页
- 新增：邮件收件箱落地页
- 赛事动态
- 球队分析
- 专家观点
- 直播指南
- 积分榜
- 球员聚焦
- 赛事讨论区 热门话题 精彩评论
- 赛程回顾 全部赛程 赛程详情
- 新增：新的博客详情页
- 新增：新的关于我们页面
- 新增：新的公司历史页面
- 用户中心 个人资料 我的收藏 消息中心 订阅管理
- 修复：修复了即将上线页面的问题
- 修复：修复了即将上线两个页面的问题
- 修复：修复了维护页面的问题
- 新增：8种优雅的配色方案
版本 v2.2 - 2020年5月26日
- 更新至最新Bootstrap v4.5
- 更新至最新技术
- 更新至最新Material Design Icons v5.3.45
- 赛事资讯
- 赛事相关页面 赛事概览 赛况详情 精彩集锦 赛程安排 我的关注
- 新的保险着陆页实时预览
- 新的电子书着陆页实时预览
- 帮助中心 服务概览 常见问题 使用指南 联系客服
- 修复了一些菜单问题
- 菜单可轻松从中心移至右侧（基于CSS），并添加了浅色菜单（基于CSS）
- 修复了一些响应式问题
版本 v2.1 - 2020年4月1日
- 更新至最新Jquery v3.4.1
- 媒体报道
- 深度分析
- 球迷社区
- 通知模板 赛前提醒 赛况播报 赛果通知 密码重置
- 新闻资讯 最新头条 专题报道
- 精彩集锦 经典瞬间 进球集锦 赛事精华
- 注册与登录 登录页面 注册页面 找回密码
- 在组件页面中添加了新组件
- 更新文档
- 修复了几个问题
版本 v2.0 - 2020年2月5日
- 赛事中心
- 专业分析
- 直播频道
- 在招聘页面中添加了新的职位页面
- 在组件页面中添加了新组件
- 国际版支持
- 暗黑模式
- 暗黑国际版
- 修复了单页菜单中的几个问题
- 修复了巨型菜单中的几个问题
版本 v1.6 - 2019年12月11日
- 更新Bootstrap至v4.4.1
- 赛程速查
- 客户服务
- 实时资讯
- 账户管理 个人中心 账户设置 账单记录
- 特色功能
- 职业发展 球员通道 俱乐部介绍
- 修复响应式问题
版本 v1.5 - 2019年11月20日
- 添加了RTL支持版本
- 添加了支付着陆页
- 添加了加密货币着陆页
- 添加了软件着陆页
- 添加了即将上线页面
- 修复响应式和菜单问题
版本 v1.4 - 2019年10月15日
- 企业级服务
- 精选案例
- 服务介绍
- 联系我们
- 文档中心 官方文档 更新日志
- 常见问题解答
版本 v1.3 - 2019年10月1日
- 学习专区
- 个人中心
- 单品推荐
- 用户展示
- 修复菜单问题
版本 v1.2 - 2019年9月17日
- 共享空间
- 活动发布
- 云服务
- 作品展示
- 添加了一些实用页面
- 添加了一些组件
版本 v1.1 - 2019年9月7日
- 酒店预订
- 商务中心
- 客户服务与实时资讯
- 导航优化
版本 v1.0 - 2019年8月29日
- 初始发布
SCSS文件更新 v2.5
SCSS文件中的部分添加与修改如下：
- 核心样式
- 组件样式
- 特色样式
- 辅助样式
- 首页样式
- 导航样式
- 用户样式
- 变量定义
- 作品样式
注意：完整的文件夹替换了暗黑版本SCSS和RTL版本SCSS。
图片资源更新 v2.5
将部分.png图片替换为.svg图片：
- 客户头像路径
- 登录图标路径
- 密码找回图标路径
- 注册图标路径
- 联系我们图标路径
- 404页面图标路径