自行設計主題風格

架構說明

Step by step

1. 首頁

2. 內頁框架

3. 首頁資料區

4. 右邊幅

檔案命名規則

CSS說明

完工檢查表

   重點說明 |  ◆首頁CSS  |  ◆內頁框架CSS  |  ◆intro CSS  |  ◆edge CSS  |  進階用法(跨越版型限制)  |  CSS基本概述(參考)

內頁框架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 文字輸入框的字色、字級、寬、高、框線樣式......


※ 建議寬度不要超過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;}
　

專屬標籤：編輯者請依所選用的版型選用所需要的標籤

※ 提醒您：樣式內容請依所設計的網頁版面配置需要重新調整其屬性及屬性值 。

標 籤 名 稱   |  樣 式 內 容
.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; }