CSS -- 首頁CSS標籤解說

首頁CSS樣式檔解說及範例

■ CSS樣式檔：此檔案主要功能是針對首頁頁面上所顯示的文字作排版與樣式設定為主

■ 首頁CSS樣式檔：是由【共用標籤】與【專屬標籤】組成，當選用的版型含有商品搜尋、會員登錄…等 (如tf、fh…)，則必須再加【功能模組標籤】。

■ 首頁全部標籤的樣式內容概述如下

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

共用標籤：

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 文字輸入框的字色、字級、寬、高、框線樣式...... ※ 建議寬度不要超過85px

會員登入區	.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; }