世界杯比分:实时掌握全球赛场脉搏
感谢选择世界杯比分信息服务有限公司,如需任何协助,请访问我们的官方支持论坛。
精彩赛事,尽在掌握
解压文件后,您将在“HTML”文件夹中找到以下重要组件:
- CSS样式文件
- 图标字体文件
- 图片资源文件
- jQuery脚本文件
- Slider Revolution插件
- 联系表单处理
本站数据实时同步,毫秒级更新,确保您第一时间掌握赛场最新动态。
赛事主题风格
我们已为您准备了多种预设的赛事主题颜色。您可以在HTML文档的`<head>`部分找到CSS样式链接,并替换为 `/colors/turquoise.css` 或 `/colors/violet.css` 等,以切换至您偏好的视觉风格。
<!-- Css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="revolution/css/settings.css" />
<link rel="stylesheet" href="css/font-icons.css" />
<link rel="stylesheet" href="css/rev-slider.css" />
<link rel="stylesheet" href="css/sliders.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/spacings.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/colors/red.css" />
主导航菜单
基础导航结构包含以下代码。若要将透明背景切换为实色,请移除 `transparent` 类名并替换浅色Logo。
<header class="nav-type-1 transparent">
<div class="search-wrap">
...
</div>
<nav class="navbar navbar-static-top">
<div class="navigation">
<div class="container-fluid semi-fluid relative">
<div class="row">
<div class="navbar-header">
<!-- Logo -->
<div class="logo-container">
...
</div>
</div> <!-- end navbar-header -->
<div class="col-md-12 nav-wrap">
<div class="collapse navbar-collapse text-center" id="navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
</div> <!-- end nav-wrap -->
<ul class="nav-right hidden-sm hidden-xs">
...
</ul>
</div>
</div>
</div>
</nav>
</header>
即时比分反馈
使用文本编辑器打开 `contact.php` 文件,并在第4行填入您的邮箱地址,然后保存。
$to = "[email protected]"; // Your email here
世界杯比分信息服务有限公司,自2014年成立以来,始终致力于为全球球迷提供最权威、最全面的赛事资讯。
球迷使用指南
如果您無法收到電子郵件,請打開 contact.php 並刪除第 45 行:$headers = 'From: ' . $mail .''. "\r\n".
赛场动态概览
在地图 `div` 标签中,将您的地址信息填入 `data-address` 属性。
<div id="google-map" class="gmap" data-address="V Tytana St, Manila, Philippines"></div>
数据接口密钥
自2016年7月起,Google Maps API需要密钥。您可以免费获取,请遵循此处的指引。获取密钥后,将其粘贴到Google Maps脚本中。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=PASTE-YOUR-KEY-HERE"></script>
地图集成脚本
Google地图的代码位于HTML文档底部,所有其他脚本之后。
<!-- jQuery Scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="js/gmap3.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/rev-slider.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- Google Map -->
<script type="text/javascript">
$(document).ready( function(){
var gmapDiv = $("#google-map");
var gmapMarker = gmapDiv.attr("data-address");
gmapDiv.gmap3({
zoom: 16,
address: gmapMarker,
oomControl: true,
navigationControl: true,
scrollwheel: false,
styles: [
{
"featureType":"all",
"elementType":"all",
"stylers":[
{ "saturation":"0" }
]
}]
})
.marker({
address: gmapMarker,
icon: "img/map_pin.png"
})
.infowindow({
content: "V Tytana St, Manila, Philippines"
})
.then(function (infowindow) {
var map = this.get(0);
var marker = this.get(1);
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
});
</script>
获取经纬度,请访问此优秀服务
完整功能列表可在以下網址找到 - 此處调整视觉主题
更改主题主色调的两种方法
快速切换模式
手动修改 `color.css` 中的所有颜色值。
在HTML的`<head>`中引入 `color.css`。
<link rel="stylesheet" href="css/colors/color.css" />
深度定制选项
使用Sass进行配置。详细流程请参考此链接。
更新图标样式
更改图标的步骤如下。
准备阶段
从列表中选择您想要的图标,点击此链接。
参数配置
获取图标的类名。
应用与生效
将类名粘贴到图标代码中。
视频背景直播
要设置YouTube背景视频,请找到“Revolution BACKGROUND VIDEO LAYER”部分,并将您的域名粘贴到 `origin` 参数中。
請確保網域名稱結尾沒有斜線。正確格式為:
data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&ref=0;;origin=http://yourdomain.com;"
视频背景播放设置
data-ytid="RIQqVqQs9Xs"
实时球迷互动
首先,您需要获取Twitter ID。请在您的个人资料页面创建一个新的Widget,然后将获取到的Twitter ID粘贴到 `data-twitter-id` 属性中。
<div id="tweets" data-twitter-id="594366594521804800" class="col-md-12"></div>
致谢与贡献者
- jQuery
- Bootstrap
- gMap3
- Scroll reveal
- Images loaded
- Isotope
- Final Countdown
- Typed
- Local scroll
- Scroll to
- Appear
- Count to
- Easing
- Easy pie chart
- Fitvids
- FlexSlider
- Owl carousel
- Flickity slider
- Revolution slider
- Magnific popup
- Twitter post fetcher
- Smooth Scroll
官方支持中心
如果您有任何疑问,欢迎随时访问我们的支持论坛。