A) 開始使用
FitX 是一個多用途的 HTML 模板選項，適用於需要網頁模板來推廣和介紹其公司或客戶業務的網頁開發者或設計師。FitX 專為俱樂部、道場、健身、瑜伽、武術、體育館、運動、企業或任何想要以專業方式展示其作品、服務和專業形象的個人或企業設計。FitX 模板的獨特性歸功於其令人驚嘆的精美設計和易於使用的網站模板解決方案，可最大程度地提高使用者滿意度。它採用 bootstrap 4.2 框架建置，完全響應式，易於自訂，程式碼註解良好且對 SEO 友好
此模板採用 Bootstrap、HTML5、SASS、CSS3、JS 和 jQuery 建置。
取得程式碼編輯器
是的，完全有可能在記事本或類似程式中編輯 HTML，但如果您使用專業的程式碼編輯應用程式，您的工作將會順利得多。主要原因之一是您將獲得程式碼的顏色高亮顯示，正如您稍後將看到的，這將使閱讀和編輯更加容易。
我推薦 Sublime Text，您可以在此處下載： https://www.sublimetext.com/3
SASS（Syntactically Awesome Style Sheets）主要是 CSS 的擴充功能。對於使用變數、巢狀規則等，SASS 非常有幫助。LESS 也是 CSS 的一部分，可讓您的 CSS 更易於維護、擴充和主題化。瀏覽器無法讀取 SASS、LESS 或 Stylus。它們像 PHP 一樣在伺服器端編譯。為此需要編譯器。我建議使用 SASS，您可以在此處下載： Koala App
10+ 最佳編譯與管理 SASS、LESS 和 Stylus 的工具與資源 – CSS 預處理器： 連結
從 Themeforest 下載模板主檔案
- 首先，您需要從您的 Themeforest 帳戶下載模板檔案。導航到 Themeforest 上的「下載」選項卡。
- 找到模板。
- 點擊下載按鈕，
- 然後點擊 "所有檔案和文件"。
大多數 HTML 模板都會以 ZIP 檔案形式提供 - 如果是這樣，請繼續解壓縮。然後瀏覽模板資料夾，直到找到 "index.html" 或 "index.htm" 檔案。
在我們的範例模板中，"index.html" 檔案位於 "HTML" 目錄中。
B) HTML 結構
<!-- LOAD PAGE --> <div class="animationload"> ... </div> <!-- BACK TO TOP SECTION --> <a href="#0" class="cd-top cd-is-visible cd-fade-out">Top <!-- HEADER --> <div class="header header-1"> ... </div> <!-- BANNER --> <div id="oc-fullslider" class="banner"> ... </div> <!-- SHORTCUT --> <div class="section services"> ... </div> <!-- WHY CHOOSE US? --> <div class="section"> ... </div> <!-- VIDEO --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- CLASS --> <div id="classes" class="section"> ... </div> <!-- SUCCESS STORIES --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- OUR TRAINERS --> <div id="trainers" class="section"> ... </div> <!-- CTA --> <div class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- OUR GALLERY --> <div id="gallery" class="section"> ... </div> <!-- OUR PACKAGES --> <div class="section"> ... </div> <!-- CLIENTS --> <div class="section bg-primary"> ... </div> <!-- BLOG --> <div class="section"> ... </div> <!-- CONTACT --> <div id="contact" class="section bg-gray"> ... </div> <!-- INFO --> <div class="section bg-primary"> ... </div> <!-- FOOTER SECTION --> <div class="footer" data-background="images/dummy-img.jpg"> ... </div>
如何透過 scss 更改顏色配置
開啟 sass/variable.scss 檔案並更改以下區域
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,900,900i');
$font-primary : 'Lato', sans-serif;
$font-secondary : 'Lato', sans-serif;
$font-tertiary : '', sans-serif;
$font-heading : $font-secondary;
$font-icon: FontAwesome;
$font-sas: 'sas-webfont';
$black: #000;
$white: #ffffff;
// Global
$color-body: #999999;
$color-primary: #ABC502;
$color-secondary: #000000;
$color-tertiary: transparent;
$color-quaternary: transparent;
$body-bg: #fff;
$font-body: $font-primary;
$content-padding: 100px;
/* --------------------
TOPBAR SETTING
-----------------------*/
$topbar-bg: darken($color-primary,40%);
$topbar-color: $color-body;
$topbar-nav-color: $color-primary;
$topbar-nav-hover-color: $color-secondary;
$topbar-font: $font-primary;
/* --------------------
NAVBAR SETTING
-----------------------*/
$navbar-bg: $color-secondary;
$navbar-font: $font-secondary;
$navbar-color: $white;
$navbar-hover-color: $color-primary;
$navbar-active-color: $color-primary;
$navbar-stiky-color: $color-primary;
/* --------------------
FOOTER SETTING
-----------------------*/
$footer-bg: $black;
$footer-font-color: $color-body;
如果您想編輯 顏色, 字體或其中一個欄位中任何元素的樣式，您將執行以下操作：
.section-heading { color: #someColor; } 如果您發現新的樣式沒有覆蓋，很可能是因為特異性問題。向下捲動您的 CSS 檔案，並確保沒有類似的樣式具有更高的權重。
.services .section-heading { color: #someColor; } 因此，為了確保您的新樣式得到應用，請確保它們具有足夠的「權重」，並且 CSS 檔案中沒有比您的樣式更低的樣式在您的樣式之後應用。
C) CSS 檔案與結構
在 CSS 方面，我們根據載入的頁面載入不同的 css 檔案。
如何更改背景圖片
將 "images/bg-map-dot.jpg" 替換為您的圖片網址來源或網站名稱。
如何從 css 更改標題/字體
我們建議使用 Firefox 中的 FireBug 附加元件，以快速識別您可能想要更改的 css 屬性。例如，假設我們想更改圖片下方所示 h1 的顏色並添加連結。
從根資料夾開啟 style.css 檔案並搜尋 h1，直到找到檔案中的 color 屬性。它位於第 661 行，看起來像這樣：
h1, .page-header {
font-size: 40px;
line-height: normal; }
h2, .single-news .blok-title, .news-item .blok-title {
font-size: 32px;
line-height: normal; }
更改您想要的顏色並點擊儲存。如果您只想更改 h1 的顏色，則必須將 h1 分開並給予不同的顏色。CSS 應該看起來像這樣。.page-header {
font-size: 40px;
line-height: normal; }
h1{
color: #12aaeb;
font-size: 40px;
line-height: normal; }
現在，假設我們想讓 h1 指向 http://google.com。此時 h1 看起來像這樣：<h1>短代碼：排版與段落樣式</h1>
要使其指向特定 URL，h1 必須看起來像這樣：
<h1><a href="http://www.google.com">米兰官网以高清流畅的赛事转播，随时随地畅享观赛体验。为核心，带来高效便捷的体验。</a></h1>
您可以更改 CSS 中任何元素的樣式。您只需要知道該元素或 div 的名稱，方法是使用 FireBug 或開啟 HTML，然後在 CSS 中搜尋該元素。小菜一碟！
社交圖標
要為您的社交圖標添加連結，請將必要的 URL 貼到 <a href=> 標籤中。請參閱以下範例：
<a href="#"><i class="fa fa-facebook"></i></a>
D) JavaScript
此模板從首頁和其餘頁面導入不同的 js 檔案，用於不同的滑桿、燈箱和互動式分頁。所有 js 都圍繞 JQuery 建置。以下是一些使用 jQuery 的範例：
首頁滑桿設定
/* =================================
BANNER ROTATOR IMAGE
=================================== */
var slides = $(".full-screen"),
b = slides.find('.item');
b.each(function(){
var e = $(this),
ocImg = e.find('img').attr('src');
e.css({'background-image': 'url(' + ocImg + ')'});
});
slides.owlCarousel({
loop: true,
nav: true,
navText: [
'<h1><i class="fa fa-angle-left" aria-hidden="true"><h1></i>',
'<h1><i class="fa fa-angle-right" aria-hidden="true"><h1></i>'
],
navContainer: '.banner .custom-nav',
items: 1,
});
替換 fadeIn 和 rollOut 用於滑桿動畫首頁。要更改動畫，請參閱 animate.css 文件 animate.css
Google 地圖
開啟 contact.html 想了解更多专业的体育资讯团队，为您带来独家报道和专家观点。相关内容，尽在米兰官网。
<div class="maps-wraper"> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"></div> <div id="maps" class="maps" data-lat="-7.452278" data-lng="112.708992" data-marker="images/cd-icon-location.png"> </div> </div>
您可以透過編輯屬性來更改 google 地圖的座標 data-lat 用於緯度 data-lng 和經度。以及透過編輯屬性更改標記圖標 data-marker.
開啟 contact.html 檔案並將以下區域更改為您的 Google Map API KEY 取得 API 金鑰
聯絡表單 (phpMailer 搭配 SMTP Gmail)
您可以簡單快速地安裝您的表單。開啟 php/form-process.php 米兰官网围绕智能化的赛程提醒和个性化内容推荐，不错过任何精彩瞬间。不断创新，回应用户的真实需求。
簡單快速的驗證功能位於檔案的結尾 js/vendor/form-scripts.js。通過此階段後，在 php/form-process.php 檔案中會檢查電子郵件。電子郵件無法通過控制，腳本將停止運行並返回 EMAIL-ERROR 錯誤。
/* Contact Form Setup Begin */ $send_name = "Rometheme"; // Replace your name $send_title = "Rometheme Send Mail"; // Replace email sent title $send_address = "info@wap-milan.com.cn"; // Replace your email address $smtp_address = "kefu@wap-milan.com.cn"; // Replace your email GMail address $smtp_password = "12345"; // Replace your email password $smtp_server = "smtp.gmail.com"; // Replace your email server address
E) 搜尋引擎優化
為了提高您的搜尋引擎排名，從而讓您的網站出現在搜尋結果中，請不要忘記更改描述和關鍵字。
<meta name="description" content=""> <meta name="keywords" content="">
F) 來源與鳴謝
我使用了以下圖像、圖標或其他檔案，如下所示。
HTML、CSS 和 JS：
圖像：
字體：
再次感謝您購買此主題。正如我一開始所說，如果您對此主題有任何疑問，我很樂意為您提供幫助。不保證，但我會盡力協助。如果您對 ThemeForest 上的主題有更一般性的問題，您可以考慮訪問論壇並在「項目討論」部分提出您的問題。
Rometheme
回到頂部