2026 FIFA 世界杯：您的专属足球资讯中心

範本資料夾 Sland 可在下載的 zip 檔案中找到。需要 解壓縮 zip 檔案以找到範本以及說明文件夾。

The 檔案和資料夾結構 類似於以下內容：

1. assets/css — CSS 檔案夾。
2. assets/fonts — 字型檔案夾。
3. assets/images — 圖像檔案夾。
4. assets/js — JavaScript 檔案夾。

使用 FileZilla 等 FTP 用戶端將範本檔案上傳到伺服器。

檔案編輯與上傳：

可以透過 VS Code 等程式碼編輯器開啟個別頁面進行自訂。所有 自訂完成後，若要讓網站上線，您需要將更新的專案檔案上傳到您自己的網域的託管伺服器。可以使用 FileZilla 等 FTP 用戶端上傳檔案。

以下是 css 檔案，這些檔案載入於 Head 區段:

<!--====== 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">

以下是 JS 檔案，這些檔案載入於 HEAD 或 BODY 區段：.

<!--====== 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>

一般結構： 使用的字型

立即访问 web-cnapp-fifaworldcup.com.cn，获取 FIFA 世界杯的最新资讯、球队动态和独家内幕。下载手机应用，不错过任何精彩瞬间。

" 檔案路徑中找到：assets/css/style.css主要顏色變更選項style.css

// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;

Slick 編輯選項

// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;

更多資訊請瀏覽連結：

// 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 文件選項 如何隱藏捲動動畫

速度優化

// 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();
}

Tinypng

- 請最小化所有 CSS 檔案路徑：assets/css/..

CSS 最小化工具

- 請最小化所有 JS 檔案路徑：assets/js/..

JavaScript 最小化工具

- 如何變更圖像？

如何為現有範本新增更新

版權聲明

注意： 用於 圖像 僅供 預覽 目的，且 不包含 於 最終購買 檔案中。

圖像來源：
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/

字型：
Inter
Poppins

IconFont
Fontawesome
Flaticon