		歡迎來到 xt:Commerce 漢語支援站 > xt:Commerce 技術文件
樣版變數對照圖表-主樣式

Personal tools

Search

Toolbox

Views

樣版變數對照圖表-主樣式

From xt:Commerce 技術文件

Jump to:navigation, search

1 stylesheet.css 樣式表
2 總環境設定
3 網站外觀主體

[edit] stylesheet.css 樣式表

檔案位置： /templates/樣版名稱/stylesheet.css

本例以xtc5的CSS樣式表作中文詳細解說，讓大家能夠更了解CSS樣式表與樣版外觀之間的連動，作為樣版外觀客製前的參考。

有關CSS樣式表的設計可以參考：w3school

[edit] 總環境設定

全部標籤樣式總定義：

* {margin:0;padding:0}

*號為萬用字元，此設定值等於所有的標籤樣式定義都設間距及內距值為0

<body>樣式定義：凡在body定義的值，只要其它標籤內沒有新的設定值則沿用body值。

body {
     font-family:"Trebuchet MS",Verdana,Arial,Sans-serif; 
     font-size:13px; 
     margin:0; 
     padding:0; 
     background-image:url(img/bg.gif);  
     background-color:#FFFFFF;
}

字型："Trebuchet MS",Verdana,Arial,Sans-serif
字型大小： 13像素
間距：0
內距：0
背景圖片： img/bg.gif
背景色： #FFFFFF 白色

[edit] 標題設定

標題1：

h1 {
     color:#000000;
     font-weight:bold;
     font-size:22px;
     margin:20px 0px 15px 0px;
     padding:0px;
     width:auto;
     border-style:solid;
     border-width:0px 0px 1px 0px;
     border-color:#000000;
}

字型顏色： #000000 黑色
文字粗細：粗體
字型尺寸： 22像素
標籤間距：上:20px, 右:0px, 下:15px, 左:0px
標籤內距： 0
標籤寬度：自動調整
標籤框線：實線, 下方框線:1px, 黑色

標題2：

h2 {
     color:#000000; 
     font-weight:bold;
     font-size:16px;
     margin:15px 0px 8px 0px;
     padding:0px;
}

字型顏色： #000000 黑色
文字粗細：粗體
字型尺寸： 16像素
標籤間距：上:15px, 右:0px, 下:8px, 左:0px;
標籤內距： 0

[edit] 連結外觀(全域)

a,a:link,a:visited,a:hover,a:active {
     background:transparent;
     text-decoration:underline;
     cursor:pointer
}
a:link {color:#c64934} 
a:visited {color:#c64934} 
a:hover,a:active {color:#c64934}
a img {border:none}

連結的所有狀態外觀：
- 背景:透明
- 文字裝飾:底線
- 游標外觀:指針
a:link 一般連結顏色: #c64934
a:visited 參觀過的連結顏色: #c64934
a:hover 當滑鼠移到該連結顏色: #c64934
a:active 正在執行的連結顏色: #c64934
a img 圖片連結:不顯示外框

[edit] 輸入元件(全域)(與CSS1 相容)

文字輸入方塊

input {
     font-family:"Trebuchet MS",Verdana,Arial,Sans-serif; 
     font-size:12px;
}

字型："Trebuchet MS",Verdana,Arial,Sans-serif
字型尺寸： 12像素

文字輸入區域(多行輸入)

textarea {
     font-family:"Trebuchet MS",Verdana,Arial,Sans-serif; 
     font-size:12px; 
     border-width:1px; 
     border-style:solid; 
     border-top-color:#4E4E4F; 
     border-left-color:#4E4E4F; 
     border-bottom-color:#AEAEAE; 
     border-right-color:#AEAEAE;
}

字型："Trebuchet MS",Verdana,Arial,Sans-serif
字型尺寸： 12像素
框線粗： 1像素
框線樣式：實線
框線顏色：上:#4E4E4F, 左:#4E4E4F, 下:#AEAEAE, 右:#AEAEAE

下拉選單

select {
     font-family:"Trebuchet MS",Verdana,Arial,Sans-serif; 
     font-size:12px; 
     border-width:1px; 
     border-style:solid; 
     border-top-color:#4E4E4F; 
     border-left-color:#4E4E4F; 
     border-bottom-color:#AEAEAE; 
     border-right-color:#AEAEAE;
}

字型："Trebuchet MS",Verdana,Arial,Sans-serif
字型尺寸： 12像素
框線粗： 1像素
框線樣式：實線
框線顏色：上:#4E4E4F, 左:#4E4E4F, 下:#AEAEAE, 右:#AEAEAE

[edit] 輸入元件(細部)(與CSS2相容)

僅適用新式的瀏覽器,例:FF2.0,IE7

設定輸入文字方塊的text,password類型樣式

input[type=text], input[type=password] {
     border-width:1px; 
     border-style:solid; 
     border-top-color:#4E4E4F; 
     border-left-color:#4E4E4F; 
     border-bottom-color:#AEAEAE; 
     border-right-color:#AEAEAE
}

框線粗： 1像素
框線樣式：實線
框線顏色：上:#4E4E4F, 左:#4E4E4F, 下:#AEAEAE, 右:#AEAEAE

[edit] 段落(全域)

設定全域的段落屬性

p {margin:8px 0px 8px 0px}

間距：上:8px, 右:0px, 下:8px, 左:0px

[edit] 解決DIV在IE瀏覽器顯示水平分隔線的問題

下列三組定義值，僅顏色上及背景圖的用法差異，目的是設定DIV區塊的背景色(圖)及高度的方式，以顯示不會溢出格式的水平線，此方式可以解決舊有的<hr>水平線描述在IE瀏覽器與其它的DIV區塊不配合的問題。

水平線

div.hr {
     padding-top:1px; 
     height:0; 
     overflow:hidden; 
     margin:0; 
     line-height:0px; 
     background-color:#4E4E4F
}

內距：上:1px
高度： 0
溢出：隱藏
間距： 0
行高： 0
背景色： #4E4E4F

水平線(淡灰)

div.hrlightgrey {
     padding-top:1px; 
     height:0; 
     overflow:hidden; 
     margin:0; 
     line-height:0px; 
     background-color:#999999
}

內距：上:1px
高度： 0
溢出：隱藏
間距： 0
行高： 0
背景色： #999999

水平線(商品預覽)

div.hrproductpreview {
     padding-top:1px; 
     height:0; 
     overflow:hidden; 
     margin:12px 0px 12px 0px; 
     display:inline; 
     line-height:0px; 
     display:block; 
     background-image:url(img/hr_productpreview.gif)
}

內距：上:1px
高度： 0
溢出：隱藏
間距：上:12px, 右:0px, 下:12px, 左:0px
顯示：強迫顯示在同一行
行高： 0
背景圖： img/hr_productpreview.gif

[edit] 表格(全域)

此是預設所有的表格內的儲存格內距皆為2像素

table td {padding:2px;}

[edit] 網站外觀主體

外觀主體容器(id=wrap)：

#wrap {	
     margin: 0 auto; 
     width:950px; 
     background-color:#fff; 
     border-style:solid; 
     border-color:#fff; 
     border-width:0px 10px 0px 10px;
}

間距: 0 自動，此一設定值可以讓網站的外觀主體在瀏覽器畫面內自動水平置中
寬度： 950像素
背景色： #fff 白色
框線樣式：實線
框線顏色： #fff 白色
框線粗：上:0px, 右:10px, 下:0px, 左:10px

[edit] 網站頭部外觀

頭部主體

#header {
     height:115px;
     background: #666 url("img/bg_header.gif") repeat-x; 
     border-bottom: 1px solid #fff; 
     border-top: 10px solid #fff;
}

高度： 115像素
背景：顏色:#666, 圖片: img/bg_header.gif, 水平重覆填滿
框線-底部：粗:1px, 實線, 白色
框線-頂部：粗:10px, 實線, 白色

Logo

#header	#logo {
     padding-left:27px; 
     float:left
}

內距-左： 27像素
區塊浮動：靠左

搜尋區塊

#header #search {
     width: 260px; 
     height:75px; 
     float:right; 
     background: url("img/bg_search_breakline.gif") no-repeat; 
     color:#fff; 
     padding:40px 0px 0px 20px
}

寬度： 260px
高度： 75px
區塊浮動：靠右
背景：圖片:img/bg_search_breakline.gif, 不重覆填滿
顏色：白色
內距：上:40px, 右:0px, 下:0px, 左:20px

搜尋區塊關於連結

#header #search a {
     color:#fff; 
     font-size:11px;
}

顏色：白色
文字尺寸： 11px

頭部主體內的儲存格

#header td {
     padding-top:1px; 
     padding-right:4px;
}

內距-頂部： 1px
內距-右方： 4px

[edit] 導覽列

導覽列基本外觀

#breadcrumb {
     clear:both; 
     color:#c64934; 
     padding:1px 0px 10px 15px; 
     list-style-type:none; 
     background-color:#fff; 
     height:22px; 
     background-image:url(img/bg_breadcrumb.gif); 
     background-repeat:repeat-x; 
     font-size:11px;
}

清除：之前的區塊浮動屬性
顏色： #C64934
內距：上:1px, 右:0px, 下:10px, 左:15px
列表項目符號類型：無
背景色：白
高度： 22px
背景圖片： img/bg_breadcrumb.gif
背景重覆填滿：水平重覆填滿
文字尺寸： 11px

導覽列連結事件外觀： 設定當該樣式標籤內容有連結屬性時，連結4事件(連結,移入,已參訪,動作)的外觀樣式。

#breadcrumb a, #breadcrumb a:link, #breadcrumb a:visited, 
#breadcrumb a:hover, #breadcrumb a:active {
     line-height:23px; 
     text-decoration:none; 
     font-weight:normal; 
     cursor:pointer;
     color:#333333; 
     margin:0; 
     padding:0;
}

行高： 23px
文字裝飾：無
文字粗細：標準
滑鼠游標外觀：指針
顏色： #333333
間距： 0
內距： 0

[edit] 上方選單

首先我們定義一個上方選單的容器，並給予背景圖(水平填滿)，在容器內再放入上方選單的區塊，接著設定上方選單的列表樣式以及連結4事件的外觀樣式。

上方選單容器

#topmenuwrap {background: url(img/bg_topmenu.gif) repeat-x;}

背景： img/bg_topmenu.gif, 水平填滿

上方選單

#topmenu {
     float:left; 
     padding:0; 
     margin:0; 
     list-style-type:none; 
     height:36px; 
     font-size:13px; 
     background: url(img/bg_topmenu.gif) repeat-x;
}

區塊浮動：靠左
內距： 0
間距： 0
列表項目符號類型：無
高度： 36px
文字尺寸： 13px
背景： img/bg_topmenu.gif, 水平填滿

上方選單列表樣式

#topmenu li {
     height:36px; 
     float:left; 
     padding: 0px 25px 0px 25px; 
     margin:0; 
     background: url("img/bg_topmenu_breakline.gif") no-repeat; 
     background-position:right;
}

高度：36px
區塊浮動：靠左
內距：上:0px, 右:25px, 下:0px, 左:25px
間距： 0
背景： img/bg_topmenu_breakline.gif, 不重覆填滿
背景-位置：靠右

上方選單連結屬性連結4事件，滑鼠(連結,移入,已參訪,動作)的外觀樣式

#topmenu a, #topmenu a:link, #topmenu a:visited, 
#topmenu a:hover, #topmenu a:active {
     line-height:36px; 
     vertical-align:middle; 
     text-decoration:none; 
     font-weight:bold; 
     cursor:pointer;
     color:#fff; 
     margin:0; 
     padding:0;
}

高度： 36px
垂直對齊：中間
文字裝飾：無
文字粗細：粗體
滑鼠游標：指針
顏色：白
間距： 0
內距： 0

上方選單：滑鼠移入，這是為了讓滑鼠移入連結時能夠有明顯的顏色變化

#topmenu a:hover {color:#DB9501;}

顏色： #DB9501

[edit] 在上方選單的語言選擇

事實上，我們可以將各功能區塊放置在我們想要的樣版位置上，並不侷限於左右兩側，此語言選擇區塊就是一例，我們將語言選擇區塊放在上方選單容器的右側，方便使用者快速切換語言。

#languages {
     text-align:right; 
     height:26px; 
     font-size:13px; 
     background: url(img/bg_topmenu.gif) repeat-x; 
     padding: 10px 10px 0px 0px; 
     margin:0;
}

文字對齊：靠右
高度： 26px
文字尺寸： 13px
背景： img/bg_topmenu.gif, 水平重覆填滿
內距：上:10px, 右:10px, 下:0px, 左:0px
間距： 0

[edit] 內容容器

它是內含了左方列、右方列、主要內容的容器區塊

#contentwrap {
     clear:both;
     width:950px;
     padding:0;
}

清除：之前的區塊浮動屬性
寬度： 950px
內距： 0

[edit] 左方列

各功能區塊可以自由的放置在樣版的各個位置，本樣版範例預設是將它們各自放置在左、右方列的容器內。

從 index.html 主樣版檔可以發現我們將部份的功能區塊變數放置在左方列容器內，因此放置在此容器的功能區塊的外觀樣式最好也能配合下列的屬性定義。

#leftcol {
     float:left; 
     width:200px; 
     padding:0px 0px 15px 0px;
}

區塊浮動：靠左
寬度： 200像素
內距：上:0px, 右:0px, 下:15px, 左:0px

[edit] 右方列

從 index.html 主樣版檔可以發現我們將部份的功能區塊變數放置在右方列容器內，因此放置在此容器的功能區塊的外觀樣式最好也能配合下列的屬性定義，如果考量到各功能區塊可以隨時在左、右方列調度，左、右方列容器的寬度屬性最好能夠保持一致。

#rightcol {
     float:right; 
     width:200px; 
     padding:0px 0px 15px 0px;
}

區塊浮動：靠右
寬度： 200像素
內距：上:0px, 右:0px, 下:15px, 左:15px

[edit] 主要內容

從主樣版檔 index.html 我們可以發現當系統偵測到結帳程序時所使用的主要內容標籤是 id=contentfull, 一般情況下所使用的內容標籤是 id=content。

而這兩者的主要差異是寬度屬性，原因是在此樣版的規劃中，當系統偵測到結帳程序時會將左、右方列的容器給隱藏，因此 id=contentfull 的寬度就必須補足隱藏後的多餘寬度了。

一般主要內容

#content {
     float:left; 
     width:495px; 
     padding:0px 25px 0px 25px; 
     margin-bottom:15px;
}

區塊浮動：靠左
寬度： 495px
內距：上:0px, 右:25px, 下:0px, 左:25px
間距-下方： 15px

結帳程序主要內容

#contentfull {
     width:890px; 
     padding:0px 30px 0px 30px; 
     margin-bottom:15px;
}

寬度： 890px
內距：上:0px, 右:30px, 下:0px, 左:30px
間距-下方： 15px

[edit] 分類選單

分類標題

h2.categoryheader {
     background-color:#F3A807; 
     background-image:url(img/bg_boxheader.gif);
     height:28px;
     font-size:11px; 
     color:#FFFFFF; 
     padding:2px 8px 0px 8px; 
     margin:0; 
     line-height:28px; 
     vertical-align:middle;
}

背景顏色： #F3A807
背景圖片： img/bg_boxheader.gif
高度： 28px
文字尺寸： 11px
顏色：白
內距：上:2px, 右:8px, 下:0px, 左:8px
間距： 0
行高： 28px
垂直對齊：中間

分類標題連結

h2.categoryheader a {
     text-decoration:none; 
     color:#fff
}

文字裝飾：無
顏色：白

分類標題列表樣式

ul#categorymenu {
     background-color:#EDEDED; 
     margin-bottom:15px; 
     border: solid #DB9502; 
     border-width:0px 1px 1px 1px; 
}

背景顏色： #EDEDED
間距-下方： 15px
框線：實線, 顏色:#DB9502
框線-寬度：上:0px, 右:1px, 下:1px, 左:1px

[edit] 第1層

分類標題列表樣式

ul#categorymenu li.level1 {
     list-style-type:none; 
     background-color:#DA9401; 
     padding:4px 0px 4px 6px; 
     border: solid #fff; 
     border-width:1px 0px 0px 0px;
}

列表項目符號類型：無
背景顏色： #DA9401
內距：上:4px, 右:0px, 下:4px, 左:6px
框線：實線, 顏色:白
框線-寬度：上:1px, 右:0px, 下:0px, 左:0px

分類標題列表連結樣式

ul#categorymenu li.level1 a {
     text-decoration:none; 
     color:#FFFFFF; 
     font-weight:bold;
}

文字裝飾：無
顏色：白
文字粗細：粗體

分類標題列表連結樣式-滑鼠移入

ul#categorymenu li.level1 a:hover {
     text-decoration:none; 
     color:#FFFFFF; 
     display:block; 
     font-weight:bold; 
     background-color:#E1E1E1;
}

文字裝飾：無
顏色：白
顯示：區塊
文字粗細：粗體
背景顏色： #E1E1E1

[edit] 第2層

分類標題列表樣式

ul#categorymenu li.level2 {
     list-style-type:none; 
     background-color:#EEA003; 
     padding:4px 0px 4px 24px; 
     border: solid #fff; 
     border-width:1px 0px 0px 0px;
}

列表樣式符號類型：無
背景顏色： #EEA003
內距：上:4px, 右:0px, 下:4px, 左:24px
框線：實線, 白
框線-寬度：上:1px, 右:0px, 下:0px, 左:0px

分類標題列表連結樣式

ul#categorymenu li.level2 a {
     font-size: 11px; 
     text-decoration:none; 
     color:#FFFFFF; 
     font-weight:bold;
}

文字尺寸： 11px
文字裝飾：無
顏色：白
文字粗細：粗體

[edit] 第3層

分類標題列表樣式

ul#categorymenu li.level3 {
     list-style-type:none; 
     background-color:#EEA003; 
     padding:4px 0px 4px 40px; 
     border: solid #fff; 
     border-width:1px 0px 0px 0px;
}

列表樣式符號類型：無
背景顏色： #EEA003
內距：上:4px, 右:0px, 下:4px, 左:40px
框線：實線, 白
框線-寬度：上:1px, 右:0px, 下:0px, 左:0px

分類標題列表連結樣式

ul#categorymenu li.level3 a {
     font-size: 11px; 
     text-decoration:none; 
     color:#FFFFFF; 
     font-weight:bold;
}

文字尺寸： 11px
文字裝飾：無
顏色：白
文字粗細：粗體

[edit] 功能區塊全域定義

區塊標題

h2.boxheader {
     background-image:url(img/bg_boxheader.gif);
     height:28px;
     font-size:11px; 
     color:#FFFFFF; 
     padding:2px 8px 0px 8px; 
     margin:0; 
     line-height:28px; 
     vertical-align:middle;
}

背景圖片： img/bg_boxheader.gif
高度： 28px
文字尺寸： 11px
顏色：白
內距：上:2px, 右:8px, 下:0px, 左:8px
間距： 0
行高： 28px
垂直對齊：置中

區塊標題連結

h2.boxheader a:link, h2.boxheader a:hover, 
h2.boxheader a:active, h2.boxheader a:visited {
     text-decoration:none; 
     color:#ffffff
}

文字裝飾：無
顏色：白

區塊身體

.boxbody {
     background-color:#ededed; 
     border-style:solid; 
     border-color:#4E4E4F; 
     border-width:0px 1px 1px 1px; 
     padding:8px; 
     margin-bottom:15px
}

背景顏色： #ededed
框線樣式：實線
框線顏色： #4E4E4F
框線寬度：上:0px, 右:1px, 下:1px, 左:1px
內距： 8px
間距-下方： 15px

區塊身體-標題3

.boxbody h3, .boxbody h3 a {font-size:11px}

文字尺寸：11px

區塊身體-標題3-置中

.boxbody h3.center, .boxbody h3.center a {
     font-size:11px; 
     text-align:center
}

文字尺寸： 11px
文字對齊：置中

區塊身體-段落

.boxbody p {
     color:#000000; 
     font-size:11px; 
     margin:6px 0px 6px 0px
}

顏色：黑
文字尺寸： 11px
間距：上:6px, 右:0px, 下:6px, 左:0px

區塊身體-段落-置中

.boxbody p.center {
     color:#000000; 
     font-size:11px; 
     text-align:center; 
     margin:6px 0px 6px 0px
}

顏色：黑
文字尺寸： 11px
文字對齊：置中
間距：上:6px, 右:0px, 下:6px, 左:0px

區塊身體-td

.boxbody td {
     color:#000000; 
     font-size:11px; 
     margin:6px 0px 6px 0px
}

顏色：黑
文字尺寸： 11px
間距：上:6px, 右:0px, 下:6px, 左:0px

區塊身體-商品原價

.boxbody .productOldPrice {
     font-size:11px; 
     color:#FF0000
}

文字尺寸： 11px
顏色：紅

區塊身體-div-水平線

.boxbody div.hr {
     margin-top:5px; 
     margin-bottom:5px
}

間距-上方： 5px
間距-下方： 5px

區塊身體-div-水平線(淡灰)

.boxbody div.hrlightgrey {
     margin-top:5px; 
     margin-bottom:5px;
}

間距-上方： 5px
間距-下方： 5px

區塊身體-a

.boxbody a {font-size:11px;}

文字尺寸： 11px

區塊身體, 商品圖片容器

.boxbody .productboximage {border: solid 1px #999999;}

框線：樣式:實線, 寬度:1px, 顏色:#999999

區塊身體-ul-內容列表

.boxbody ul.contentlist {
     margin-left:5px; 
     margin-right:0; 
     padding:0;
}

間距-左方： 5px
間距-右方： 0
內距： 0

區塊身體-ul-內容列表-li

.boxbody ul.contentlist li {
     margin-left:0px; 
     padding:0; 
     list-style-type:none
}

間距-左方： 0px
內距： 0
列表項目符號類型：無

[edit] 購物車區塊

購物車標題

h2.boxcartheader {
     background-image:url(img/bg_boxheader.gif);
     height:28px;
     font-size:11px; 
     color:#FFFFFF; 
     padding:2px 8px 0px 8px; 
     margin:0; 
     line-height:28px; 
     vertical-align:middle;
}

背景圖片： img/bg_boxheader.gif
高度： 28px
文字尺寸： 11px
顏色：白
內距：上:2px, 右:8px, 下:0px, 左:8px
間距： 0
行高： 28px
垂直對齊：置中

購物車標題連結

h2.boxcartheader a {
     text-decoration:none; 
     color:#fff
}

文字裝飾：無
顏色：白

購物車身體

.boxcartbody {
     padding:4px 8px 4px 8px; 
     margin-bottom:15px; 
     background-color:#EDEDED; 
     border-style:solid; 
     border-color:#4E4E4F; 
     border-width:0px 1px 1px 1px;
}

內距：上:4px, 右:8px, 下:4px, 左:8px
間距-下方： 15px
背景顏色： #EDEDED
框線樣式：實線
框線顏色： #4E4E4F
框線寬度：上:0px, 右:1px, 下:1px, 左:1px

購物車身體-段落

.boxcartbody p {font-size:11px;}

文字尺寸：11px

[edit] 商品展示

商品展示

.productPreview {
     padding:0; 
     margin:0;
}

內距： 0
間距： 0

商品展示內容

.productPreviewContent {
     vertical-align:top; 
     width:100%
}

垂直對齊：置頂
寬度： 100%

商品展示內容-標題2

.productPreviewContent h2 {
     padding: 0; 
     margin:0px 0px 5px 0px;
}

內距： 0
間距：上:0px, 右:0px, 下:5px, 左:0px

商品展示內容-標題2-連結

.productPreviewContent h2 a {
     font-size:14px; 
     font-weight:bold;
}

文字尺寸： 14px
文字粗細：粗體

商品展示圖片

.productPreviewImage {
     vertical-align:top; 
     padding:3px 15px 0px 0px;
}

垂直對齊：置中
內距：上:3px, 右:15px, 下:0px, 左:0px

商品展示圖片-img

.productPreviewImage img {border: solid 1px #999999;}

框線：樣式:實線, 寬度:1px, 顏色: #999999

商品展示內容-價格

.productPreviewContent .price{
     font-size:16px; 
     font-weight:bold; 
     padding:0; 
     margin:0
}

文字尺寸： 16px
文字粗細：粗體
內距： 0
間距： 0

商品展示內容-稅金及運費資訊

.productPreviewContent .taxandshippinginfo {
     font-size:11px; 
     font-weight:normal; 
     color:#999999; 
     padding:0; 
     margin:0
}

文字尺寸： 11px
文字粗細：標準
顏色： #999999
內距： 0
間距： 0

商品展示內容-vpe

.productPreviewContent .vpe {
     font-size:11px; 
     font-weight:normal; 
     color:#999999; 
     padding:0; 
     margin:0
}

文字尺寸： 11px
文字粗細：標準
顏色： #999999
內距： 0
間距： 0

商品展示內容-運送時間

.productPreviewContent .shippingtime {
     font-size:11px; 
     font-weight:normal; 
     color:#999999; 
     padding:0; 
     margin:0
}

文字尺寸： 11px
文字粗細：標準
顏色： #999999
內距： 0
間距： 0

商品展示內容-庫存警示圖片

.productPreviewContent .stockimage {
     margin:0; 
     padding:0;
}

內距： 0
間距： 0

商品展示內容-庫存警示文字

.productPreviewContent .stockimagetext {
     margin:0; 
     padding:0; 
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

內距： 0
間距： 0
文字尺寸： 11px
文字粗細：標準
顏色： #999999

商品展示內容-商品原價

.productPreviewContent .productOldPrice {
     font-size:12px; 
     font-weight:bold; 
     color:#ff0000;
}

文字尺寸： 12px
文字粗細：粗體
顏色：紅

商品展示內容-稅金及運費資訊-連結

.productPreviewContent .taxandshippinginfo a {
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

文字尺寸： 11px
文字粗細：標準
顏色： #999999

[edit] 商品資訊、細節

商品資訊容器

#productinfowrap {
     display:table; 
     width:100%
}

顯示：表格
寬度： 100%

商品資訊圖片

#productinfoimages { 
     float:left; 
     background-color:#EDEDED; 
     text-align:center; 
     width:140px; 
     padding:10px; 
     margin:0px 10px 10px 0px; 
     border: solid 1px #999999;
}

區塊浮動：靠左
背景顏色： #EDEDED
文字對齊：置中
寬度： 140px
內距： 10px
間距：上:0px, 右:10px, 下:10px, 左:0px

商品資訊圖片-商品圖片

#productinfoimages .productimage {border: solid 1px #999999;}

框線：樣式:實線, 寬度:1px, 顏色:#999999

商品資訊圖片-水平線(淡灰)

#productinfoimages .hrlightgrey {
     margin-top:6px; 
     margin-bottom:6px;
}

間距-上方： 6px
間距-下方： 6px

商品資訊附圖片的價格

#productinfopricewithimages {
     float:right; 
     width:320px
}

區塊浮動：靠右
寬度： 320px

商品資訊附圖片的價格-img

#productinfopricewithimages img {cursor:pointer}

滑鼠游標：指標

商品資訊不附圖片的價格

#productinfopricewithoutimages {width:100%}

寬度： 100%

商品資訊不附圖片的價格-img

#productinfopricewithoutimages img {cursor:pointer}

滑鼠游標：指標

商品資訊價格

#productinfoprice {padding:5px}

內距： 5px

商品資訊價格-水平線(淡灰)

#productinfoprice .hrlightgrey {
     margin-top:6px; 
     margin-bottom:6px;
}

間距-上方： 6px
間距-下方： 6px

商品資訊價格-商品價格

#productinfoprice .productprice {
     margin:0; 
     padding:0; 
     font-size:14px; 
     font-weight:bold;
}

間距： 0
內距： 0
文字尺寸： 14px
文字粗細：粗體

商品資訊價格-商品原價

#productinfoprice .productOldPrice {
     color:#FF0000;
     margin:0; 
     padding:0; 
     font-size:12px; 
     font-weight:bold;
}

顏色：紅
間距： 0
內距： 0
文字尺寸： 12px
文字粗細：粗體

商品資訊價格-稅金及運費資訊

#productinfoprice .taxandshippinginfo {
     margin:0; 
     padding:0; 
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

間距： 0
內距： 0
文字尺寸： 11px
文字粗細：標準
顏色： #999999

商品資訊價格-稅金及運費資訊-連結

#productinfoprice .taxandshippinginfo a {
     margin:0; 
     padding:0; 
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

間距： 0
內距： 0
文字尺寸： 11px
文字粗細：標準
顏色： #999999

商品資訊價格-出貨時程

#productinfoprice .shippingtime {
     margin:0; 
     padding:0; 
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

間距： 0
內距： 0
文字尺寸： 11px
文字粗細：標準
顏色： #999999

商品資訊價格-庫存警示圖片

#productinfoprice .stockimage {
     margin:0; 
     padding:0;
}

間距： 0
內距： 0

商品資訊價格-庫存警示文字

#productinfoprice .stockimagetext {
     margin:0; 
     padding:0; 
     font-size:11px; 
     font-weight:normal; 
     color:#999999;
}

間距： 0
內距： 0
文字尺寸： 11px
文字粗細：標準
顏色： #999999

商品資訊價格-上架時間

p.productinfoproductadded {font-size:11px;}

文字尺寸： 11px

商品選項

.productoptions {
     background-color:#FFF2CC; 
     padding:6px; 
     border-style:solid; 
     border-width:1px 0px 0px 0px; 
     border-color:#DA9401
}

背景顏色： #FFF2CC
內距： 6px
框線樣式：實線
框線寬度：上:1px, 右:0px, 下:0px, 左:0px
框線顏色： #DA9401

放入購物車

.addtobasket {
     background-color:#EDEDED; 
     padding:6px; 
     text-align:right; 
     border-style:solid; 
     border-width:1px 0px 0px 0px; 
     border-color:#999999
}

背景顏色： #EDEDED
內距： 6px
文字對齊：靠右
框線樣式：實線
框線寬度：上:1px, 右:0px, 下:0px, 左:0px
框線顏色： #999999

[edit] 彈出視窗商品資訊

body.popupproductinfo {
     padding:15px;
     background:none; 
     background-color:#fff
}

內距： 15px
背景：無
背景顏色：白

[edit] 彈出視窗 print_order.html

身體(彈出視窗-列印訂單)

body.popupprintorder {
     font-family:"Trebuchet MS",Verdana,Arial,Sans-serif; 
     font-size:13px;
     padding:15px;
     background:none; 
     background-color:#fff
}

字型： "Trebuchet MS", Verdana,Arial, Sans-serif
文字尺寸： 13px
內距： 15px
背景：無
背景顏色：白

身體(彈出視窗-列印訂單)-商品-tr(表頭)-td

body.popupprintorder .products tr.header td {
     font-weight:bold; 
     background-color:#EDEDED;
}

文字粗細：粗體
背景顏色： #EDEDED

身體(彈出視窗-列印訂單)-商品-總計

body.popupprintorder .products .total {text-align:right}

文字對齊：靠右

身體(彈出視窗-列印訂單)-商品-數量

body.popupprintorder .products .quantity {vertical-align:top}

垂直對齊：置頂

身體(彈出視窗-列印訂單)-商品名稱

body.popupprintorder .productname {vertical-align:top}

垂直對齊：置頂

身體(彈出視窗-列印訂單)-型號

body.popupprintorder .model {vertical-align:top}

身體(彈出視窗-列印訂單)-單價

body.popupprintorder .singleprice {vertical-align:top}

垂直對齊：置頂

身體(彈出視窗-列印訂單)-總價

body.popupprintorder .totalprice {vertical-align:top}

垂直對齊：置頂

[edit] 高亮度區塊 (背景)

Div(高亮度區塊)

div.highlightbox {
    padding: 15px; 
    background-color:#FFF2CC; 
    border: solid #E9D28F 1px
}

內距： 15px
背景顏色： #FFF2CC
框線：實線, #E9D28F, 1px

Div(高亮度區塊)-ul

div.highlightbox ul {
    margin-left:15px; 
    padding:0; 
    display:block; 
    list-style-type:square; 
    line-height:20px
}

間距-左方： 15px
內距： 0
顯示：區塊
列表項目符號類型：方塊
行高： 20px

Div(高亮度區塊)-標題1

div.highlightbox h1 {
    color:#BE8100; 
    padding:0px 0px 10px 0px; 
    margin:0; 
    border:none; 
    font-size:16px
}

顏色： #BE8100
內距：上:0px, 右:0px, 下:10px, 左:0px
間距： 0
框線：無
文字尺寸： 16px

Div(高亮度區塊)-水平線

div.highlightbox div.hr {
    height:1px; 
    line-height:1px; 
    margin:0; 
    padding:0; 
    display:block; 
    border-bottom: solid 1px #E9D28F;
}

高度： 1px
行高： 1px
間距： 0
內距： 0
顯示：區塊
框線-下方：實線, 1px, #E9D28F

[edit] 付款方式選擇

Table(付款區塊)

table.paymentblock {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:0px 1px 1px 1px; 
    border-color:#E9D28F; 
    margin-bottom:15px;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度：上:0px, 右:1px, 下:1px, 左:1px

Table(付款區塊)-tr-td(表頭)

table.paymentblock tr td.header {
    background-color:#DA9401; 
    padding:2px 2px 2px 5px; 
    color:#FFFFFF; 
    font-weight:bold;
}

背景顏色： #DA9401
內距：上:2px, 右:2px, 下:2px, 左:5px
顏色：白
文字粗細：粗體

[edit] 出貨方式選擇

Table(出貨區塊)

table.shippingblock {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:0px 1px 1px 1px; 
    border-color:#E9D28F; 
    margin-bottom:15px;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度：上:0px, 右:1px, 下:1px, 左:1px
框線顏色： #E9D28F
間距-下方： 15px

Table(出貨區塊)-tr-td(表頭)

table.shippingblock tr td.header {
    background-color:#DA9401; 
    padding:2px; 
    padding-left:5px; 
    color:#FFFFFF; 
    font-weight:bold;
}

背景顏色： #DA9401
內距： 2px
內距-左方： 5px
顏色：白
文字粗細：粗體

Table(出貨區塊)-tr-td

table.shippingblock tr td {vertical-align:top;}

垂直對齊：置頂

Table(出貨區塊)-tr-td(細節)

table.shippingblock tr td.description {
    width:100%; 
    vertical-align:top; 
    padding-left:6px;
}

寬度： 100%

Table(出貨區塊)-tr-td(選項按鈕)

table.shippingblock tr td.radiobutton {
    vertical-align:top; 
    white-space:nowrap; 
    padding:4px;
}

垂直對齊：置頂
空白：沒有容器(不自動斷行)
內距： 4px

Table(出貨區塊)-tr-td(選項按鈕)-輸入文字方塊

table.shippingblock tr td.radiobutton input {
    margin:0; 
    padding:0;
}

間距： 0
內距： 0

Table(出貨區塊)-tr-td(價格)

table.shippingblock tr td.price {
    vertical-align:top; 
    white-space:nowrap
}

垂直對齊：置頂
空白：沒有容器(不自動斷行)

[edit] 客戶記錄資訊-訂單細節

Table(客戶記錄資訊-訂單細節)-tr-td

table.accounthistoryinfoorderdetails tr td {vertical-align:top}

垂直對齊：置頂

Table(客戶記錄資訊-訂單細節)-tr-表頭-td

table.accounthistoryinfoorderdetails tr.header td {font-weight:bold}

文字粗細：粗體

[edit] 聯絡我們-訊息盒

Table(訊息)

textarea.message_body {width:130px;}

寬度： 130px

[edit] 用戶下載-下載盒

Table(下載盒)

table.downloadbox {
    padding: 5px; 
    background-color:#FFF2CC; 
    border: solid #E9D28F 1px; 
    margin-bottom:8px;
}

內距： 5px
背景顏色： #FFF2CC
框線：實線, #E9D28F 1px
間距-下方： 8px

Table(下載盒)-tr-td(icon)

table.downloadbox tr td.icon{padding-right: 15px;}

內距-右方： 15px

Table(下載盒)-tr-td(下載連結)

table.downloadbox tr td.downloadlink{width:100%;}

寬度： 100%

[edit] 分級價格以表格顯示

Table(分級價格)

table.graduatedprice {
    font-size:11px; 
    text-align:left; 
    margin-top:5px;
}

文字尺寸： 11px
文字對齊：靠左
間距-上方： 5px

Table(分級價格)-tr-td(標頭)

table.graduatedprice tr td.header{
    font-size:12px; 
    font-weight:bold; 
    text-align:left
}

文字尺寸： 12px
文字粗細：粗體
文字對齊：靠左

[edit] 訂單細節

Table(訂單細節)

table.orderdetails {
    font-size:11px; 
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:0px 1px 1px 1px; 
    border-color:#DA9401;
}

文字尺寸： 11px
背景顏色： #FFF2CC
框線-樣式：粗線
框線-寬度：上:0px, 右:1px, 下:1px, 左:1px
框線-顏色： #DA9401

Table(訂單細節)-tr-td

table.orderdetails tr td {padding:4px}

內距： 4px

Table(訂單細節)-tr(表頭)-td

table.orderdetails tr.headerrow td {
    background-color:#DA9401; 
    color:#FFFFFF; 
    font-weight:bold
}

背景顏色： #DA9401
顏色：白
文字粗細：粗體

Table(訂單細節)-tr(表頭)-td(左)

table.orderdetails tr.headerrow td.left {text-align:left}

文字對齊：靠左

Table(訂單細節)-tr(表頭)-td(中)

table.orderdetails tr.headerrow td.center {text-align:center}

文字對齊：置中

Table(訂單細節)-tr(表頭)-td(右)

table.orderdetails tr.headerrow td.right {text-align:right}

文字對齊：靠右

[edit] 訂單細節內容 - 列1

Table(訂單細節)-tr(內容列1)-td

table.orderdetails tr.contentrow1 td {
    background-color:#FFF2CC;
    vertical-align:top
}

背景顏色： #fff2cc
垂直對齊：置頂

Table(訂單細節)-tr(內容列1)-td(數量)

table.orderdetails tr.contentrow1 td.quantity {text-align:center}

文字對齊：置中

Table(訂單細節)-tr(內容列1)-td(數量)-輸入文字方塊

table.orderdetails tr.contentrow1 td.quantity input {
    font-size:11px; 
    padding:2px; 
    border:solid #DA9401 1px;
}

文字尺寸： 11px
內距： 2px
框線：實線, #DA9401, 1px

Table(訂單細節)-tr(內容列1)-td(商品名稱)

table.orderdetails tr.contentrow1 td.productname {text-align:left}

文字對齊：靠左

[edit] 訂單細節內容 - 列2

Table(訂單細節)-tr(內容列2)-td

table.orderdetails tr.contentrow2 td {
    background-color:#FFEAAB;
    vertical-align:top
}

背景顏色： #FFEAAB
垂直對齊：置頂

Table(訂單細節)-tr(內容列2)-td(數量)

table.orderdetails tr.contentrow2 td.quantity {text-align:center}

文字對齊：置中

Table(訂單細節)-tr(內容列2)-td(數量)-輸入文字方塊

table.orderdetails tr.contentrow2 td.quantity input {
    font-size:11px; 
    padding:2px; 
    border:solid #DA9401 1px;
}

文字尺寸： 11px
內距： 2px
框線：實線, #DA9401, 1px

Table(訂單細節)-tr(內容列2)-td(商品名稱)

table.orderdetails tr.contentrow2 td.productname {text-align:left}

文字對齊：靠左

[edit] 訂單細節 - 單價

Table(訂單細節)-tr-td(單價)

table.orderdetails tr td.singleprice {
    text-align:right; 
    white-space:nowrap
}

文字對齊：靠右
空白：沒有容器(不自動斷行)

[edit] 訂單細節 - 項目小計

Table(訂單細節)-tr-td(小計)

table.orderdetails tr td.totalprice {
    text-align:right; 
    white-space:nowrap
}

文字對齊：靠右
空白：沒有容器(不自動斷行)

[edit] 訂單細節 - 取消核取方塊

Table(訂單細節)-tr-td(刪除)

table.orderdetails tr td.delete {
    text-align:center; 
    white-space:nowrap
}

文字對齊：置中
空白：沒有容器(不自動斷行)

[edit] 訂單細節 - 商品屬性

Table(訂單細節)-tr-td(商品名稱)-Table(商品屬性)

table.orderdetails tr td.productname table.productattributes {margin-top:3px;}

間距-上方： 3px

Table(訂單細節)-tr-td(商品名稱)-Table(商品屬性)-tr-td

table.orderdetails tr td.productname table.productattributes tr td {padding:0px;}

內距： 0px

Table(訂單細節)-tr-td(商品名稱)-Table(商品屬性)-tr-td(屬性)

table.orderdetails tr td.productname table.productattributes tr td.attribute {padding-right:4px;}

內距-右方： 4px

Table(訂單細節)-tr-td(商品名稱)-Table(商品屬性)-tr-td(價值)

table.orderdetails tr td.productname table.productattributes tr td.value {width:100%;}

寬度： 100%

[edit] 訂單細節 - 小計

Table(訂單細節)-tr-td(小計)

table.orderdetails tr td.subtotal {
    background-color:#FFEAAB; 
    text-align:right;
    border-style: solid; 
    border-width:1px 0px 0px 0px; 
    border-color:#DA9401;
}

背景顏色： #FFEAAB
文字對齊：靠右
框線樣式：實線
框線寬度：上:1px, 右:0px, 下:0px, 左:0px
框線顏色： #DA9401

[edit] 商品導覽

Div(商品導覽)

div.productnavigator {
    background-color:#EDEDED; 
    padding:8px; 
    border:#999999 1px solid
}

背景顏色： #EDEDED
內距： 8px
框線： #999999, 1px, 實線

[edit] 評論列表

Table(評論列表)

table.reviewlist {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:0px 1px 1px 1px; 
    border-color:#DA9401;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度：上:10px, 右:1px, 下:1px, 左:1px
框線顏色： #DA9401

Table(評論列表)-tr-td

table.reviewlist tr td {
    padding:4px; 
    white-space:nowrap
}

內距： 4px
空白：沒有容器(不自動換行)

Table(評論列表)-tr(表頭)-td

table.reviewlist tr.header td {
    background-color:#DA9401; 
    color:#FFFFFF; 
    font-weight:bold
}

背景顏色： #DA9401
顏色：白
文字粗細：粗體

Table(評論列表)-tr(內容列1)-td

table.reviewlist tr.contentrow1 td {background-color:#FFF2CC;}

背景顏色： #FFF2CC

Table(評論列表)-tr(內容列2)-td

table.reviewlist tr.contentrow2 td {background-color:#FFEAAB;}

背景顏色： #FFEAAB

評論-文字輸入區域

textarea#review {width:100%}

寬度： 100%

[edit] 影音檔案列表

Table(影音檔案列表)

table.medialist {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:1px; 
    border-color:#DA9401;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度： 1px
框線顏色： #DA9401

Table(影音檔案列表)-tr-td

table.medialist tr td {
    padding:6px; 
    white-space:nowrap; 
    vertical-align:top
}

內距： 6px
空白：沒有容器(不自動換行)
垂直對齊：置頂

Table(影音檔案列表)-tr(內容列1)-td

table.medialist tr.contentrow1 td {background-color:#FFF2CC;}

背景顏色： #FFF2CC

Table(影音檔案列表)-tr(內容列2)-td

table.medialist tr.contentrow2 td {background-color:#FFEAAB;}

背景顏色： #FFEAAB

[edit] 網站地圖

網站地圖

.sitemapwrap {}

網站地圖容器-網站地圖左列

.sitemapwrap .sitemapleft {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:1px; 
    border-color:#DA9401; 
    display:table; 
    float:left; 
    width:235px; 
    margin-bottom:15px;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度： 1px
框線顏色： #DA9401
顯示：表格
區塊浮動：靠左
寬度： 235px
間距-下方： 15px

網站地圖容器-網站地圖右列

.sitemapwrap .sitemapright {
    background-color:#FFF2CC; 
    border-style: solid; 
    border-width:1px; 
    border-color:#DA9401; 
    display:table; 
    float:right; 
    width:235px; 
    margin-bottom:15px;
}

背景顏色： #FFF2CC
框線樣式：實線
框線寬度： 1px
框線顏色： #DA9401
顯示：表格
區塊浮動：靠右
寬度： 235px
間距-下方： 15px

網站地圖標題

.sitemapheader {
    padding:3px; 
    background-color:#DA9401; 
    color:#FFFFFF; 
    font-weight:bold
}

內距： 3px
背景顏色： #DA9401
顏色：白
文字粗細：粗體

網站地圖標題(連結事件)

.sitemapheader a:link, .sitemapheader a:visited, .sitemapheader a:hover {
    color:#FFFFFF; 
    text-decoration:none
}

顏色：白
文字裝飾：無

網站地圖內容

.sitemapcontent {padding:6px}

內距： 6px

網站地圖-li

.sitemapcontent li {list-style-type:none}

列表項目符號類型：無

[edit] 結帳確認程序 - 備註

段落(結帳確認程序)-文字輸入區

p.checkoutcomment textarea {width:100%}

寬度： 100%

[edit] 結帳程序 - 訂單細節

Table(結帳確認程序-訂單細節)

table.checkoutconfirmationorderdetails {
    padding:0; 
    margin:0px 0px 10px 0px; 
    border:none
}

內距： 0
間距：上:0px, 右:0px, 下:10px, 左:0px

Table(結帳確認程序-訂單細節)-tr-td(商品名稱)

table.checkoutconfirmationorderdetails tr td.productname {
    width:100%; 
    font-weight:bold;
}

寬度：100%
文字粗細：粗體

Table(結帳確認程序-訂單細節)-tr-td(出貨時間)

table.checkoutconfirmationorderdetails tr td.shippingtime {
    padding:0px 0px 0px 30px; 
    color:#666666; 
    font-size:11px; 
    font-weight:normal; 
    white-space:nowrap
}

內距：上:0px, 右:0px, 下:10px, 左:0px
顏色： #666666
文字尺寸： 11px
文字粗細：標準
空白：沒有容器(不自動換行)

Table(結帳確認程序-訂單細節)-tr-td(商品屬性)

table.checkoutconfirmationorderdetails tr td.productattributes {
    padding:0px 0px 0px 30px; 
    color:#666666; 
    font-size:11px; 
    font-weight:normal;
}

內距：上:0px, 右:0px, 下:0px, 左:30px
顏色： #666666
文字尺寸： 11px
文字粗細：標準

Table(結帳確認程序-訂單細節)-tr-td(商品價格)

table.checkoutconfirmationorderdetails tr td.productprice {
    white-space:nowrap; 
    text-align:right
}

空白：沒有容器(不自動換行)
文字對齊：靠右

Table(結帳確認程序-訂單總價)

table.checkoutconfirmationorderdetailstotal {
    padding:0; 
    margin:10px 0px 0px 0px; 
    border:none
}

內距： 0
間距：上:10px, 右:0px, 下:0px, 左:0px
框線：無

Table(結帳確認程序-訂單總價)-tr-td(名稱)

table.checkoutconfirmationorderdetailstotal tr td.name {
    width:100%;
    text-align:right
}

寬度： 100%
文字對齊：靠右

Table(結帳確認程序-訂單總價)-tr-td(價值)

table.checkoutconfirmationorderdetailstotal tr td.value {
    white-space:nowrap; 
    text-align:right
}

空白：沒有容器(不自動換行)
文字對齊：靠右

[edit] 結帳程序 - AGB

段落(結帳程序-AGB)-文字輸入區域

p.checkoutagb textarea {width:100%}

寬度： 100%

[edit] 結帳程序 - 導引

ul(結帳程序-導引)

ul#checkoutnavigation {}

ul(結帳程序-導引)-li

ul#checkoutnavigation li {
    height: 70px; 
    list-style-type:none; 
    float:left; 
    width:185px; 
    margin-right:15px; 
    border: solid 1px; 
    padding:8px
}

高度： 70px
列表項目符號類型：無
區塊浮動：靠左
寬度： 185px;
間距-右方： 15px
框線：樣式:實線, 寬度:1px
內距： 8

ul(結帳程序-導引)-li(作動)

ul#checkoutnavigation li.active {background-color: #FFEAAB}

背景顏色： #FFEAAB

ul(結帳程序-導引)-li(作動)-編號

ul#checkoutnavigation li.active .number {
    font-size:20px; 
    font-weight:bold
}

文字尺寸： 20px
文字粗細：粗體

ul(結帳程序-導引)-li(作動)-標題

ul#checkoutnavigation li.active .title {
    font-size:14px; 
    font-weight:bold
}

文字尺寸： 14px
文字粗細：粗體

ul(結帳程序-導引)-li(作動)-細節

ul#checkoutnavigation li.active .description {font-size:11px}

文字尺寸： 1px

ul(結帳程序-導引)-li(作動中)

ul#checkoutnavigation li.inactive {
    color:#999999; 
    background-color: #EDEDED; 
    border-color:#999999
}

顏色： #999999
背景顏色： #EDEDED
框線顏色： #999999

ul(結帳程序-導引)-li(作動中)-編號

ul#checkoutnavigation li.inactive .number {
    font-size:20px; 
    font-weight:bold
}

文字尺寸： 20px
文字粗細：粗體

ul(結帳程序-導引)-li(作動中)-標題

ul#checkoutnavigation li.inactive .title {
    font-size:14px; 
    font-weight:bold
}

文字尺寸： 14px
文字粗細：粗體

ul(結帳程序-導引)-li(作動中)-細節

ul#checkoutnavigation li.inactive .description {font-size:11px}

文字尺寸： 11px

[edit] 錯誤訊息

p.errormessage {
     border: solid #ff0000 2px; 
     padding:15px; 
     background-color:#FFD6D6
}

框線：樣式:實線, 顏色:紅色, 寬度:2px
內距： 15px
背景顏色： #FFD6D6

[edit] 完成訊息

.messageStackSuccess {
    padding:4px; 
    background-color:#66FF66
}

內距： 4px
背景顏色： #66FF66

[edit] 底部 - FOOTER

footer

.footer {
    clear:both; 
    text-align:center; 
    font-size:11px; 
    color:#666666; 
    background-color:#E2E2E2; 
    padding: 8px; 
    margin-bottom:5px;
}

清除：之前的區塊浮動屬性
文字對齊：置中
文字尺寸： 11px
顏色： #666666
背景顏色： #E2E2E2
內距： 8px
間距-下方： 5px

footer-連結

.footer a {
    color:#666666; 
    text-decoration:underline
}

顏色： #666666
文字裝飾：底線

[edit] XTC 版權宣告

.copyright {
    margin: 0 auto; 
    width:970px; 
    background-color:#FFFFFF; 
    text-align:center; 
    color:#666666; 
    font-size:11px; 
    padding:0px 0px 10px 0px;
}

間距： 0, 自動 (版面自動置中)
寬度： 970px
背景顏色：白
文字對齊：置中
顏色： #666666
文字尺寸： 11px
內距：上:0px, 右:0px, 下:10px, 左:0px

[edit] XTC 解析時間

.parseTime {
    margin: 0 auto; 
    width:970px; 
    background-color:#FFFFFF; 
    text-align:center; 
    color:#666666; 
    font-size:11px; 
    padding:0px 0px 10px 0px;
}

間距： 0, 自動 (版面自動置中)
寬度： 970px
背景顏色：白
文字對齊：置中
顏色： #666666
文字尺寸： 11px
內距：上:0px, 右:0px, 下:10px, 左:0px

主樣版

網頁特效主檔

Retrieved from "http://www.xt-commerce.cn/docu/index.php/%E6%A8%A3%E7%89%88%E8%AE%8A%E6%95%B8%E5%B0%8D%E7%85%A7%E5%9C%96%E8%A1%A8-%E4%B8%BB%E6%A8%A3%E5%BC%8F"

Personal tools

Search

Toolbox

Views

樣版變數對照圖表-主樣式

From xt:Commerce 技術文件

Contents

[edit] stylesheet.css 樣式表

[edit] 總環境設定

[edit] 標題設定

[edit] 連結外觀(全域)

[edit] 輸入元件(全域)(與CSS1 相容)

[edit] 輸入元件(細部)(與CSS2相容)

[edit] 段落(全域)

[edit] 解決DIV在IE瀏覽器顯示水平分隔線的問題

[edit] 表格(全域)

[edit] 網站外觀主體

[edit] 網站頭部外觀

[edit] 導覽列

[edit] 上方選單

[edit] 在上方選單的語言選擇

[edit] 內容容器

[edit] 左方列

[edit] 右方列

[edit] 主要內容

[edit] 分類選單

[edit] 第1層

[edit] 第2層

[edit] 第3層

[edit] 功能區塊全域定義

[edit] 購物車區塊

[edit] 商品展示

[edit] 商品資訊、細節

[edit] 彈出視窗 商品資訊

[edit] 彈出視窗 print_order.html

[edit] 高亮度區塊 (背景)

[edit] 付款方式選擇

[edit] 出貨方式選擇

[edit] 客戶記錄資訊-訂單細節

[edit] 聯絡我們-訊息盒

[edit] 用戶下載-下載盒

[edit] 分級價格以表格顯示

[edit] 訂單細節

[edit] 訂單細節內容 - 列1

[edit] 訂單細節內容 - 列2

[edit] 訂單細節 - 單價

[edit] 訂單細節 - 項目小計

[edit] 訂單細節 - 取消核取方塊

[edit] 訂單細節 - 商品屬性

[edit] 訂單細節 - 小計

[edit] 商品導覽

[edit] 評論列表

[edit] 影音檔案列表

[edit] 網站地圖

[edit] 結帳確認程序 - 備註

[edit] 結帳程序 - 訂單細節

[edit] 結帳程序 - AGB

[edit] 結帳程序 - 導引

[edit] 錯誤訊息

[edit] 完成訊息

[edit] 底部 - FOOTER

[edit] XTC 版權宣告

[edit] XTC 解析時間

[edit] 彈出視窗商品資訊