Corba
App 登陸頁面 HTML 模板
建立日期： 19/08/2020作者： gfxpartner
模板特色
- 簡潔乾淨的設計
- 進階 Bootstrap 4 框架
- HTML5 與 CSS3
- CSS3 動畫
- 完全響應式設計
- 所有檔案皆有詳細註解
- 跨瀏覽器相容（IE10+、Firefox、Safari、Opera、Chrome）
- 詳盡的文件說明
HTML 結構
此 HTML 模板使用最新 Bootstrap v4.5 且具備有效的 HTML5 標籤。此 主題為響應式佈局，支援 4 欄結構。內容區域中的所有資訊 都嵌套在一個類別中，並附有預定義的類別。
基本網格 HTML
若要建立簡單的兩欄佈局，請建立一個 .container 並加入適當數量的 .col-md* 欄位。
根據此範例，我們使用了 .col-md-4 和 .col-md-8，總共 12 欄，形成一個完整的 列。
......
巢狀欄位
若要將內容嵌套在預設網格中，請在現有的 .col-md* 欄位內新增一個 .container 和一組 .col-md* 欄位。巢狀列應包含一組加總後等於其父層欄位數量的欄位。
第一層欄位第二層第二層第二層欄位
CSS 檔案與結構
此主題主要使用了三個主要的 CSS 檔案。第一個是 bootstrap.css, 第二個是 style.css （用於此模板）， 第三個是 responsive.css 用於控制響應式佈局。
如果您想編輯網站的特定區塊，請在 CSS 檔案中找到對應的標籤， 然後向下捲動，直到找到需要編輯的適當樣式。
這些是載入到模板中、位於 style.css 檔案頂部（標示為）的 CSS 檔案 已匯入 CSS.
@import url(bootstrap.min.css);
@import url(font-awesome.min.css);
@import url(magnific-popup.css);
@import url(slick.css);
@import url(default.css);
@import url(style.css);
字型
預設情況下，此範本從 Google Web Font 服務載入此字型，您可以將其更換為最適合您的字型。
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;300;400;500;600;700;800;900&display=swap');
jQuery 與 JavaScript
此主題匯入三種 JavaScript 檔案。
- jQuery
- 自訂腳本 (main.js)
- 部分外掛
- jQuery 是一個能大幅減少您所需撰寫程式碼量的 JavaScript 函式庫。
- 本網站大部分的動畫效果皆由自訂腳本執行。其中有幾個函式值得您留意。
除了自訂腳本外，我也使用了幾個「經過驗證」的外掛來建立這些效果。此外掛已封裝完成，因此您無需手動編輯檔案中的任何內容。唯一需要知道的是如何呼叫該方法。
這些是在 Body 區段結尾處載入範本的 JS 檔案。
教學課程
標誌
讓我們開始更新範本。開啟 index.html 檔案並依照步驟操作。
大部分更新在所有頁面中都是相同的，因此在此僅說明一次。
將「images/logo.png」替換為您的標誌圖片網址或網站名稱。
導覽選單
這是基本結構。
將您自己的選單項目新增至該 ul li 項目中。如果您想新增下拉選單，只需建立一個巢狀的 ul li，並加上類別 子選單
將「© Copyright Cobra 2020 . All right reserved.」替換為版權資訊。
來源與致謝
範本中使用的字型為 Google 字型，您可以在 Google Fonts API 中找到它們。
使用的字型為：
用於動畫效果的檔案：
animate.min.css (位於 css 資料夾中)
使用的輪播為：
使用的外掛為：
slick.min.js (可於 js 資料夾中找到)
wow.js (可於 plugins 資料夾中找到)
scrolling-nav.js 开云官网3专注全天候在线互动体验，为用户提供专业可靠的体验。
jquery.magnific-popup.min.js (可於 plugins 資料夾中找到)
每個程式碼都已適當加上註解，方便編輯。支援
再次感謝您購買此主題。如同我一開始所說，如果您對這個主題有任何疑問，我很樂意提供協助。雖然不保證一定能解決，但我會盡力而為。如果您有任何問題，請隨時透過支援中心與我們聯絡。
寄送電子郵件至： [email protected]