Ruxin

App 登陸頁面 HTML 模板

建立日期: 06/08/2020
作者: layerdrops
電子郵件: sales@new-ngsports.com

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


模板特色


  • 簡潔與簡單設計
  • 先進的 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(fontawesome.min.css);
@import url(flaticon.css);
@import url(default.css);
@import url(animate.css);
@import url(swiper-bundle.min.css);
@import url(style.css);
                

字型

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


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

jQuery 與 JavaScript


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

  • jQuery
  • 自訂腳本 (main.js)
  • 一些外掛

  • jQuery 是一個 JavaScript 函式庫,可大幅減少您必須編寫的程式碼量。
  • 此網站的大部分動畫都是由自訂腳本執行的。有幾個值得查看的函式。

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



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


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                

教學


標誌


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

大多數頁面的更新方式都相同。因此這裡只說明一次。



    NG体育

                

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


導航選單


這是基本結構。


將您自己的選單項目添加到該 ul li 項目中。如果您想添加下拉選單,只需建立一個嵌套的 ul li,並帶有類別 子選單



頁尾版權





                

將「© Copyright Ruxin 2020 . All right reserved.」替換為版權資訊。

來源與致謝


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

使用的字型為:

Montserrat


用於動畫效果的檔案:

animate.css (在 css 資料夾中)


使用的輪播為:

swiper 輪播


使用的外掛為:

wow.min.js (可在 plugins 資料夾中找到)

scrolling-nav.js 想了解更多一站式入口:应用下载、账号管理及平台服务说明集中呈现。相关内容,尽在NG体育。

每個程式碼都有適當的註解,方便編輯。

支援


再次感謝您購買此主題。如同我一開始所說,如果您對這個主題有任何問題,我很樂意提供協助。不保證一定能解決,但我會盡力協助。如果您有任何疑問,請隨時透過支援中心與我們聯絡。

寄送電子郵件至: sales@new-ngsports.com

川ICP备2024761430号
NG体育科技有限公司通过整合赛事内容、应用服务与平台支持,为体育爱好者提供清晰、稳定、高效的数字化体育娱乐体验。邮箱:sales@new-ngsports.com微信:ng_563营业时间:08.00-17.00成都市高新区天府大道828号