首頁CSS樣式檔解說及範例
■ CSS樣式檔：此檔案主要功能是針對首頁頁面上所顯示的文字作排版與樣式設定為主
■ 首頁CSS樣式檔：是由【共用標籤】與【專屬標籤】組成，當選用的版型含有商品搜尋、會員登錄…等 (如tf、fh…)，則必須再加【功能模組標籤】。
■ 首頁全部標籤的樣式內容概述如下
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS共用標籤：
a:active → 設定正被選取之超連結文字顯現方式。
a:hover → 設定當滑鼠移至超連結文字上面時的顯現方式。
a:link → 設定超連結之文字顯現方式
a:visited → 設定瀏覽過之超連結文字顯現方式。
body →定義視窗的背景色或圖、捲軸樣式......
〈視窗背景圖檔案名稱為body.jpg；只需透過管理中心之上傳空間將圖檔上傳至theme資料夾中即可〉
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
專屬標籤：樣式內容概述如下
|
標 籤 名 稱 |
樣 式 內 容 |
|
.url |
定義 網址 字色、字級大小、相對位置...... |
|
#sethome |
定義 設為首頁 字色、字級大小、相對位置...... |
|
.bookmark |
定義 加入最愛 字色、字級大小、相對位置...... |
|
.counter |
定義 計數器 字色、字級大小、相對位置...... |
|
.slogan |
定義 歡迎詞 字色、字級大小、相對位置...... |
|
.companyname |
定義 網頁顯示名稱 字色、字級大小、相對位置...... |
|
#locale |
定義 繁簡體 字色、字級大小、相對位置...... |
|
.iframe_head |
定義HTML檔案的寬、高（單位：px） |
|
#headbar |
定義HEAD區塊中的 主選單文字(按鍵) 字色、字級大小、相對位置...... |
|
.headbarfcmup |
定義HEAD區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse前) |
|
.headbarfcmover |
定義HEAD區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse後) |
|
#subheadbar |
定義HEAD區塊中的 次選單( 群組 ) 的相對位置...... |
|
#sidebar |
定義SIDE區塊中的 主選單文字(按鍵) 字色、字級大小、相對位置...... |
|
.sidebarfcmup |
定義SIDE區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse前) |
|
.sidebarfcmover |
定義SIDE區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse後) |
|
#subsidebar |
定義SIDE區塊中的 次選單( 群組 ) 的相對位置...... |
|
.footword |
定義 頁底註記文字(版權宣告) 字色、字級大小...... |
備註：
※ 網頁顯示名稱、歡迎詞、設為首頁、計數器、頁底註記 (版權宣告)、網址 可在 主題風格/首頁版面配置 中設定是否顯示。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
功能模組標籤：樣式內容概述如下
|
標 籤 名 稱 |
樣 式 內 容 |
|
|
商 |
.sidesearch_input |
定義SIDE區塊中的商品搜尋區 內 INPUT 文字輸入框的字色、字級、寬、高、框線樣式......
|
|
|
||
|
會 |
.sidemember_input |
定義SIDE區塊中的會員登入區 內帳號及密碼 INPUT 文字輸入框的字色、字級、寬、高、框線樣式...... |
|
.sidemember_title |
定義SIDE區塊中的會員登入區 內帳號及密碼標題文字字色、字級大小...... |
|
|
.sidemember_text |
定義SIDE區塊中的會員登入區 內忘記密碼及加入會員超連結文字字色、字級大小...... |
範例
共用標籤：
|
a:active{color: #0099CC;text-decoration:none;} a:hover{color: #0099CC;text-decoration:underline;} a:link{color: #CC3300;text-decoration:none;} a:visited{color: #0099CC;text-decoration:none;}
body{scrollbar-face-color: #3399CC;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color: #0083AE; scrollbar-3dlight-color: #6FA8BB;scrollbar-arrow-color: #ffffff;scrollbar-darkshadow-color: #ffffff ;scrollbar-track-color: #ECF2F6 ;scrollbar-base-color: #0083AE;background-color : #ECF2F6;} |
專屬標籤：編輯者請依所選用的版型選用所需要的標籤
※ 提醒您：樣式內容請依所設計的網頁版面配置需要重新調整其屬性及屬性值 。
|
標 籤 名 稱 | 樣 式 內 容 |
|
|
.url{color: #666666;font-weight:bold;font-size:9pt; letter-spacing : 1px; font-family : Arial; } |
|
|
#sethome{color: #666666; font-size: 12px;letter-spacing : 1px;font-family : Arial; } |
|
|
.bookmark{color: #666666; font-size: 12px;letter-spacing : 1px;font-family : Arial; } |
|
|
.counter{color: #666666; font-size:12px;letter-spacing : 2px;font-family : Arial; } |
|
|
.slogan{color: #666666; font-size:13px;letter-spacing : 1px;font-family : Arial; } |
|
|
.companyname{color: #666666; font-size:13px;letter-spacing : 1px;font-family : Arial; } |
|
|
#locale{color: #666666; font-size:12px;letter-spacing : 2px;font-family : Arial; } |
|
|
.iframe_head{ width: 778px; height : 80px;} |
|
|
|
|
|
head |
#headbar{color: #666666;font-size:12px;position : relative;top : 9px;left : -6px;letter-spacing : 2px; font-family : Arial; } |
|
.headbarfcmup{color : #CC6633; border-style: solid;border : 1px solid ;border-left-color : #B7DFFD; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #F0F9FF;border-bottom-color : #78B0DA; text-align : center;background : #D9EEFE;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
.headbarfcmover{color : #FFFFCC; border-style: solid;border : 1px solid ;border-left-color : #285A80; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #305F85;border-bottom-color : #B6D5EB; text-align : center;background : #306FA1;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
#subheadbar{top : 28px;left :25px;} |
|
|
|
|
|
side |
#sidebar{color: #666666;font-size:12px; letter-spacing : 2px; line-height : 22px; font-family : Arial; } |
|
.sidebarfcmup{color : #CC6633; border-style: solid;border : 1px solid ;border-left-color : #B7DFFD; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #F0F9FF;border-bottom-color : #78B0DA; text-align : center;background : #D9EEFE;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
.sidebarfcmover{color : #FFFFCC; border-style: solid;border : 1px solid ;border-left-color : #285A80; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #305F85;border-bottom-color : #B6D5EB; text-align : center;background : #306FA1;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
#subsidebar{top : 2px; left :140px;} |
|
|
|
|
|
.footword{color: #666666; font-size: 9pt;letter-spacing : 1px;font-family : Arial; } |
功能模組標籤：編輯者請依所選用的版型選用所需要的模組標籤
※ 提醒您：樣式內容請依所設計的網頁需要重新調整其屬性及屬性值 。
|
標 籤 名 稱 | 樣 式 內 容 |
|
|
|
|
|
商 |
.sidesearch_input{color : #666666; border-style: solid; border : 1px solid ;border-left-color : # cccccc; border-left-width : 1px; border-right-color : # cccccc; border-top-color : # cccccc;border-bottom-color : # cccccc; text-align : center; background : # cccccc; font-size : 10pt;font-family : Arial;font-family : Arial; width : 80px;} |
|
|
|
|
會 |
.sidemember_input{color : #666666; border-style: solid; border : 1px solid ;border-left-color : #cccccc; border-left-width : 1px;border-right-color : # cccccc; border-top-color : # cccccc; border-bottom-color : # cccccc;text-align : center;background : # cccccc;font-size : 10pt;font-family : Arial;font-family : Arial; width : 80px;} |
|
.sidemember_title{color: #666666;font-size:12px;font-family : Arial;letter-spacing : 2px; } |
變數名稱及定義內容一覽
|
變數名稱 |
頁面 |
定義內容 |
|
#headbar |
首頁 |
Headbar選單按鍵的字色 |
|
#sidebar |
首頁 |
sidebar選單按鍵的字色 |
|
.headbarfcmup |
首頁 |
Headbar次選單(群組)字色及背景色(mouse前) |
|
.headbarfcmover |
首頁 |
Headbar次選單(群組)字色及背景色(mouse後) |
|
.sidebarfcmup |
首頁 |
sidebar次選單(群組)字色及背景色(mouse前) |
|
.sidebarfcmover |
首頁 |
sidebar次選單(群組)字色及背景色(mouse後) |
|
#subheadbar |
首頁 |
Headbar次選單(群組)顯示的相對位置 |
|
#subsidebar |
首頁 |
sidebar次選單(群組)顯示的相對位置 |
|
.footwood |
首頁 |
頁底註記字色大小 |
|
.counter |
首頁 |
顯示訪客數字色大小 |
|
.bookmark |
首頁 |
加到最愛字色大小 |
|
#sethome |
首頁 |
設為首頁字色大小 |
|
#pageheadbar |
內頁框架 |
Headbar選單按鍵的字色 |
|
#pagesidebar |
內頁框架 |
sidebar選單按鍵的字色 |
|
.pageheadbarfcmup |
內頁框架 |
Headbar次選單(群組)字色及背景色(mouse前) |
|
.pageheadbarfcmover |
內頁框架 |
Headbar次選單(群組)字色及背景色(mouse後) |
|
.pagesidebarfcmup |
內頁框架 |
sidebar次選單(群組)字色及背景色(mouse前) |
|
.pagesidebarfcmover |
內頁框架 |
sidebar次選單(群組)字色及背景色(mouse後) |
|
#pagesubheadbar |
內頁框架 |
Headbar次選單(群組)顯示的相對位置 |
|
#pagesubsidebar |
內頁框架 |
sidebar次選單(群組)顯示的相對位置 |
內頁框架CSS樣式檔解說及範例
■ CSS樣式檔：此檔案主要功能是針對內頁框架上所顯示的文字作排版與樣式設定為主
■ 內頁CSS樣式檔：是由【共用標籤】與【專屬標籤】組成，當選用的版型含有商品搜尋、會員登錄…等 (如tf、fh…)，則必須再加【功能模組標籤】。
■ 內頁全部標籤的樣式內容概述如下
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
共用標籤：
a:active → 設定正被選取之超連結文字顯現方式。
a:hover → 設定當滑鼠移至超連結文字上面時的顯現方式。
a:link → 設定超連結之文字顯現方式
a:visited → 設定瀏覽過之超連結文字顯現方式。
body →定義視窗的背景色或圖、捲軸樣式......
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
專屬標籤：樣式內容概述如下
|
標 籤 名 稱 |
樣 式 內 容 |
|
.pagebg |
定義『整個視窗』背景色或背景圖（圖檔之格式、規格大小自訂；檔案名稱請以英文命名, 如123.jpg） |
|
.pagebgAhead |
定義『整張網頁』背景色或背景圖（圖檔之格式、規格大小自訂；檔案名稱請以英文命名, 如123.jpg） |
|
|
|
|
#pagelocale |
定義 繁簡體 字色、字級大小、相對位置...... |
|
.iframe_head |
定義HTML檔案顯示的寬、高（單位：px） |
|
#pageheadbar |
定義HEAD區塊中的 主選單文字(按鍵) 字色、字級大小、相對位置...... |
|
.pageheadbarfcmup |
定義HEAD區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse前) |
|
.pageheadbarfcmover |
定義HEAD區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse後) |
|
#subpageheadbar |
定義HEAD區塊中的 次選單( 群組 ) 的相對位置...... |
|
.pagesidebarbgAhead |
定義SIDE區塊中的 設計圖 顯示的寬、高（單位：px） |
|
#pagesidebar |
定義SIDE區塊中的 主選單文字(按鍵) 字色、字級大小、相對位置...... |
|
.pagesidebarfcmup |
定義SIDE區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse前) |
|
.pagesidebarfcmover |
定義SIDE區塊中的 次選單( 群組 ) 字色、字級大小、背景色......(mouse後) |
|
#subpagesidebar |
定義SIDE區塊中的 次選單( 群組 ) 的相對位置...... |
|
#pagefoot |
定義 頁底選單文字 字色、字級大小...... |
|
.pagefootbar |
定義 頁底選單文字間的分隔線 顏色、大小...... |
|
.pagefootword |
定義 頁底註記文字 字色、字級大小...... |
|
.pagefootbg |
定義頁底選單與註記區塊的背景色或圖 |
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
功能模組標籤：樣式內容概述如下
|
標 籤 名 稱 |
樣 式 內 容 |
|
|
商 |
.sidesearch_input |
定義SIDE區塊中的商品搜尋區 內 INPUT 文字輸入框的字色、字級、寬、高、框線樣式......
|
|
|
||
|
會 |
.sidemember_input |
定義SIDE區塊中的會員登入區 內帳號及密碼 INPUT 文字輸入框的字色、字級、寬、高、框線樣式...... |
|
.sidemember_title |
定義SIDE區塊中的會員登入區 內帳號及密碼標題文字字色、字級大小...... |
|
|
.sidemember_text |
定義SIDE區塊中的會員登入區 內忘記密碼及加入會員超連結文字字色、字級大小...... |
範例
共用標籤：
|
a:active{color: #0099CC;text-decoration:none;} a:hover{color: #0099CC;text-decoration:underline;} a:link{color: #CC3300;text-decoration:none;} a:visited{color: #0099CC;text-decoration:none;}
body{scrollbar-face-color: #3399CC;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color: #0083AE; scrollbar-3dlight-color: #6FA8BB;scrollbar-arrow-color: #ffffff;scrollbar-darkshadow-color: #ffffff ;scrollbar-track-color: #ECF2F6 ;scrollbar-base-color: #0083AE;background-color : #ECF2F6;} |
專屬標籤：編輯者請依所選用的版型選用所需要的標籤
※ 提醒您：樣式內容請依所設計的網頁版面配置需要重新調整其屬性及屬性值 。
|
標 籤 名 稱 | 樣 式 內 容 |
|
|
.pagebg{ background-image : url(123.jpg); background-repeat : repeat-y; } |
|
|
.pagebgAhead{ background-image : url(123.jpg); background-repeat : repeat-y; } |
|
|
|
|
|
#pagelocale{color: #666666; font-size:12px;letter-spacing : 2px;font-family : Arial; } |
|
|
.iframe_head{ width: 778px; height : 80px;} |
|
|
|
|
|
head |
#pageheadbar{color: #666666;font-size:12px;position : relative;top : 9px;left : -6px;letter-spacing : 2px; font-family : Arial; } |
|
.pageheadbarfcmup{color : #CC6633; border-style: solid;border : 1px solid ;border-left-color : #B7DFFD; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #F0F9FF;border-bottom-color : #78B0DA; text-align : center;background : #D9EEFE;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
.pageheadbarfcmover{color : #FFFFCC; border-style: solid;border : 1px solid ;border-left-color : #285A80; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #305F85;border-bottom-color : #B6D5EB; text-align : center;background : #306FA1;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
#subpageheadbar{top : 28px;left :25px;} |
|
|
|
|
|
.pagesidebarbgAhead{ width: 140px; height :500px;} |
|
|
|
|
|
side |
#pagesidebar{color: #666666;font-size:12px; letter-spacing : 2px; line-height : 22px; font-family : Arial; } |
|
.pagesidebarfcmup{color : #CC6633; border-style: solid;border : 1px solid ;border-left-color : #B7DFFD; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #F0F9FF;border-bottom-color : #78B0DA; text-align : center;background : #D9EEFE;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
.pagesidebarfcmover{color : #FFFFCC; border-style: solid;border : 1px solid ;border-left-color : #285A80; border-left-width : 1px;border-right-color : #92CFFC;border-top-color : #305F85;border-bottom-color : #B6D5EB; text-align : center;background : #306FA1;cursor: hand;font-size : 10pt;font-family : Arial;letter-spacing : 2px;} |
|
|
#subpagesidebar{top : 2px; left :140px;} |
|
|
|
|
|
#pagefoot{color: #666666; font-size: 9pt;letter-spacing : 1px;font-family : Arial; } |
|
|
.pagefootbar{color: #999999; font-size: 8pt;letter-spacing : 1px;font-family : Arial; } |
|
|
.pagefootword{color: #666666; font-size: 9pt;letter-spacing : 1px;font-family : Arial; } |
|
|
.pagefootbg{background-color : #ffffff;} |
|
|
|
功能模組標籤：編輯者請依所選用的版型選用所需要的模組標籤
※ 提醒您：樣式內容請依所設計的網頁需要重新調整其屬性及屬性值 。
|
標 籤 名 稱 | 樣 式 內 容 |
|
|
|
|
|
商 |
.sidesearch_input{color : #666666; border-style: solid; border : 1px solid ;border-left-color : # cccccc; border-left-width : 1px; border-right-color : # cccccc; border-top-color : # cccccc;border-bottom-color : # cccccc; text-align : center; background : # cccccc; font-size : 10pt;font-family : Arial;font-family : Arial; width : 80px;} |
|
|
|
|
會 |
.sidemember_input{color : #666666; border-style: solid; border : 1px solid ;border-left-color : #cccccc; border-left-width : 1px;border-right-color : # cccccc; border-top-color : # cccccc; border-bottom-color : # cccccc;text-align : center;background : # cccccc;font-size : 10pt;font-family : Arial;font-family : Arial; width : 80px;} |
|
.sidemember_title{color: #666666;font-size:12px;font-family : Arial;letter-spacing : 2px; } |
|
