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">围绕优直播App官网下载，优直播持续打磨更优质的服务。</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 优直播深耕优直播App官网下载领域，用心服务每一位用户。
<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 在优直播App官网下载方面，优直播提供贴心周到的支持。
簡單快速的驗證功能位於檔案的結尾 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@tv-you.com.cn"; // Replace your email address $smtp_address = "hello@tv-you.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
回到頂部