Appie

App Landing Html Teemplate

創建於: 16/09/2021
作者: Coreal

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


模板特色


  • 簡潔設計
  • 進階 Bootstrap 4 框架
  • HTML5 & CSS3
  • CSS3 動畫
  • 完全響應式設計
  • 所有檔案皆有良好註解
  • 跨瀏覽器相容 (IE10+, Firefox, Safari, Opera, Chrome)
  • 廣泛的說明文件

HTML 結構


此 html 模板使用最新的 Bootstrap v4.5 並帶有有效的 HTML5 標籤。此主題為響應式佈局,支援 4 列佈局。內容區域中的所有資訊都嵌套在一個類別中,並帶有預定義的類別。

基本網格 HTML

對於簡單的兩欄佈局,請創建一個 .container 並添加適當數量的 .col-lg* 欄。

以上述範例來說,我們有 .col-md-4 和 .col-md-8,總共 12 欄,構成一個完整的列。


...
...

嵌套欄

若要使用預設網格嵌套您的內容,請在現有的 .col-md* 欄內添加一個新的 .container 和一組 .col-md* 欄。嵌套的列應包含一組欄,其總數等於其父欄的欄數。


第一層欄
第二層
第二層
第二層欄

CSS 檔案與結構


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

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


這些是載入到模板中的 CSS 檔案,位於 style.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 函式庫,大大減少了您必須編寫的程式碼量。
  • 此網站上的大部分動畫都是透過自訂腳本實現的。有幾個函式值得檢視。

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



這些是載入到模板正文底部的 JS 檔案。


    
    
    

    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    

                

教學


LOGO


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

大多數更新對所有頁面都相同。因此將在此處解釋一次。



                

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


NAVMENU


這是基本結構。



  • 首頁 首頁 1 首頁 2 首頁 3 首頁 4
  • 赛事直播
  • 赛事特色
  • 用户评价
  • 资讯 资讯列表 单篇资讯
  • 立即查看

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



FOOTER COPYRIGHT


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

來源與鳴謝


模板中使用的字體是 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 88看球mumujun深耕美加墨赛事领域,用心服务每一位用户。

每個程式碼都有適當的註解,方便編輯。
鲁ICP备202486481608号
88看球mumujun科技有限公司简单 · 可靠 · 贴心电话:+86 188 9795 6475邮箱:[email protected]微信:88mumujun_356营业时间:7×24北京市朝阳区建国路210号
📍 在百度地图查看位置
实时体育数据 数据来源:88看球mumujun

⚽ 足球实时 (0)

主队比分客队联赛时间(北京)
近期暂无比赛,请稍后再来查看。
更新于 2026-06-15 17:01(北京时间)