快速入门
在下载的压缩包中，您可以找到澳客体育网的模板文件夹。请解压该文件以获取模板及文档。
文件和文件夹结构大致如下：
- assets/css — 包含 CSS 文件的文件夹。
- assets/fonts — 包含字体文件的文件夹。
- assets/images — 包含图片文件的文件夹。
- assets/js — 包含 JavaScript 文件的文件夹。
请使用 FileZilla 等 FTP 客户端将模板文件上传至服务器。
文件编辑与上传：
您可以通过代码编辑器（如 VS Code）打开单个页面进行定制。完成后，将更新的项目文件上传至您的域名托管服务器以使网站上线。文件上传同样可通过 FileZilla 等 FTP 客户端进行。
CSS 文件结构
以下是加载在 Head 部分的 CSS 文件：
<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">
JavaScript 文件结构
以下是加载在 HEAD 或 BODY 部分之前的 JS 文件：
<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>
HTML 文件结构
整体模板结构在各个页面保持一致，每个部分都包含在一个带有 section id 名称的区域内。这是通用结构：
<!--====== About Section Start ======-->
<section class="about-section rel z-1 pt-130 rpt-100 pb-45 rpb-15">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-7 col-lg-6">
<div class="about-image rmb-55 wow fadeInLeft delay-0-2s">
<img src="assets/images/about/what-we-provide.webp" alt="About">
</div>
</div>
<div class="col-xl-5 col-lg-6">
<div class="about-content wow fadeInRight delay-0-2s">
<div class="section-title mb-25">
<span class="sub-title">What We Provides</span>
<h2>User Friendly Experience For Your Attendies</h2>
</div>
<p>Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ainventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed <uia consequuntur magni dolores eos qui ratione voluptatem</p>
<ul class="list-style-one mt-30 mb-45">
<li>30-day free trial of our premium plan</li>
<li>100% Free - No payments required</li>
<li>Lifetime Upgradate</li>
</ul>
<a href="contact.html" class="theme-btn">Get Started <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!--====== About Section End ======-->
字体说明
字体代码可在 "style.css" 文件中找到，路径为：assets/css/style.css
// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;
主色调修改
文件路径：assets/css/style.css
// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;
轮播图（Slick）编辑
文件路径：assets/js/script.js
// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
$('.feedback-wrap').slick({
dots: true,
infinite: false,
autoplay: true,
fade: true,
autoplaySpeed: 5000,
arrows: false,
centerMode: false,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
});
}
更多信息请浏览：Slick 文档选项
如何隐藏滚动动画
请移除或注释掉以下代码文件路径：assets/js/script.js
// 15. WOW Animation
if ($('.wow').length) {
var wow = new WOW({
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true // act on asynchronously loaded content (default is true)
});
wow.init();
}
如何编辑/关闭加载动画
请移除或注释掉以下代码文件路径：assets/js/script.js
// 16. Preloader
function handlePreloader() {
if ($('.preloader').length) {
$('.preloader').delay(200).fadeOut(500);
}
}
handlePreloader();
另外，请移除或注释掉以上代码中的所有 HTML 文件
<!-- Preloader -->
<div class="preloader"></div>
性能优化
请优化所有图片的 KB/MB 大小，并使用占位符文件路径指定的图片尺寸：assets/images/..
- Tinypng 优化
请压缩所有 CSS 文件，路径：assets/css/..
- CSS 压缩工具
请压缩所有 JS 文件，路径：assets/js/..
- JavaScript 压缩工具
如何更换图片
请前往图片文件路径 'assets/images/...'，根据占位符图片的尺寸和名称替换您想要的图片。
如何添加现有模板的更新内容
我们会定期根据最新技术更新我们的项目，但如果您希望在您的模板中进行更新，您可以自行操作。
鸣谢
注意：所有图片仅用于预览目的，不包含在最终购买文件中。
图片来源： https://www.freepik.com/ https://pixabay.com/ https://unsplash.com/
字体： Inter Poppins
图标字体 Fontawesome Flaticon