Appie

App Landing HTML 模板

建立日期： 16/09/2021
作者： Coreal

感謝您購買 Appie - App Landing HTML 模板。如果您有任何超出本說明文件範圍的問題，請隨時透過我的使用者頁面聯絡表單發送電子郵件，或在支援中心提交工單。
非常感謝您！

模板特色

簡潔俐落的設計
先進的 Bootstrap 4 框架
HTML5 與 CSS3
CSS3 動畫效果
完全響應式設計
所有檔案皆有詳細註解
跨瀏覽器相容：IE10+、Firefox、Safari、Opera、Chrome
詳盡的文件說明

HTML 結構

此 HTML 模板使用最新的 Bootstrap v4.5 且包含有效的 HTML5 標籤。此主題為響應式佈局，支援 4 欄。內容區域的所有資訊都巢狀在一個 class 內，並附有預定義的 class。

基本網格 HTML

若要建立簡單的兩欄佈局，請建立一個 .container 並加入適當數量的 .col-lg* 欄位。

以此範例來說，我們使用了 .col-md-4 和 .col-md-8，總共 12 欄，形成一個完整的列。


    ...
    ...

巢狀欄位

若要將內容巢狀在預設網格中，請在現有的 .col-md* 欄位內新增一個 .container 和一組 .col-md* 欄位。巢狀列應包含一組加總等於其父層欄位數的欄位。

CSS 檔案與結構

此主題主要使用三個主要的 CSS 檔案。第一個是 bootstrap.min.css, 第二個是 style.css 用於此模板並控制響應式佈局。

如果您想編輯網站的特定區塊，只需在 CSS 檔案中找到對應的標籤，然後向下捲動直到找到需要編輯的樣式。

這些是在 style.css 檔案頂部載入到模板中的 CSS 檔案，標示為 預設 CSS.

字型

預設情況下，模板會從 Google Web Font 服務載入此字型，您可以將其更換為最適合您的字型。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

jQuery 與 JavaScript

此主題匯入三種類型的 JavaScript 檔案。

jQuery
自訂腳本 (main.js)
部分外掛

jQuery 是一個能大幅減少您所需編寫程式碼量的 JavaScript 函式庫。
此網站的大部分動畫效果都是由自訂腳本執行的。有幾個值得一看的函式。

除了自訂腳本之外，我還實作了幾個「久經考驗」的外掛來產生效果。此外掛已打包，因此您無需手動編輯檔案中的任何內容。唯一需要知道的是如何呼叫該方法。

這些是在 Body 區塊末尾載入到模板中的 JS 檔案。

教學課程

標誌

讓我們開始更新模板。開啟 index.html 檔案並依照步驟操作。

大部分更新在所有頁面中都是相同的。因此在此僅說明一次。

將「images/logo.png」替換為您的標誌圖片網址來源或網站名稱。

導覽選單

這是基本結構。

將您自己的選單項目加入該 ul li 項目中。如果您想新增下拉選單，只需建立一個巢狀的 ul li，並加上 子選單

頁尾版權


    
        
        
             下載 iOS 版本
             下載 Android 版本
        
        
        
            版權所有 © 2026 开云体育 保留所有权利。

來源與致謝

模板中使用的字型為 Google 字型，您可以在 Google Fonts API 上找到它們。

使用的字型為：

Roboto

用於動畫效果的檔案：

animate.min.css (位於 css 資料夾中)

使用的輪播套件：

slick Slider

使用的外掛：

slick.min.js (可於 js 資料夾中找到)

jquery.counterup.min.js (可於 plugins 資料夾中找到)

jquery.magnific-popup.min.js 围绕开云APP，开云体育持续打磨更优质的服务。

每個程式碼都已妥善註解，方便編輯。