A) 開始使用
FitX 是一款多用途 HTML 模板選項，適用於需要網頁模板來推廣和介紹其公司或客戶業務的網頁開發人員或設計師。FitX 專為俱樂部、道場、健身、瑜伽、武術、體育館、運動、企業或任何想要專業地展示其作品、服務和專業形象的個人或企業設計。FitX 模板的獨特之處在於其驚人的精美設計和易於使用的網站模板解決方案，可最大程度地提高使用者滿意度。它採用 bootstrap 4.2 框架建構，完全響應式，易於自訂，程式碼註解良好且對 SEO 友好
此模板採用 Bootstrap、HTML5、SASS、CSS3、JS 和 jQuery 建構。
取得程式碼編輯器
是的，完全有可能在記事本或類似程式中編輯 HTML，但如果您使用專業的程式碼編輯應用程式，事情會對您順利得多。主要原因之一是您將獲得程式碼的顏色高亮顯示，如下所示，這將使編輯和閱讀程式碼更加容易。
我推薦 Sublime Text，您可以在此處下載： https://www.sublimetext.com/3
SASS（語法超讚樣式表）主要是 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 地圖 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@apps-iqiyi.com.cn"; // Replace your email address $smtp_address = "admin@apps-iqiyi.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
回到頂部