diff --git a/demo/css/main.css b/demo/css/main.css
index 09095033e..092a291f1 100644
--- a/demo/css/main.css
+++ b/demo/css/main.css
@@ -42,6 +42,13 @@
 body {
   background-color: #fafbfc;
 }
+#wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
 .bi-theme-dark body {
   background-color: #191B2B;
 }
diff --git a/demo/js/face.js b/demo/js/face.js
index e3e47048b..c168fc7f1 100644
--- a/demo/js/face.js
+++ b/demo/js/face.js
@@ -73,7 +73,15 @@ Demo.Face = BI.inherit(BI.Widget, {
                 self.activeFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试激活状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -87,7 +95,15 @@ Demo.Face = BI.inherit(BI.Widget, {
                 self.selectFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试选中状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -97,11 +113,19 @@ Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("灰色字体颜色(用于Card2)："), this._createColorPicker(function () {
+            items: [this._createLabel("tip提示字体颜色："), this._createColorPicker(function () {
                 self.grayFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.icon_text_item",
+                    cls: "bi-tips copy-font",
+                    height: 40,
+                    text: "测试提示文字"
+                }
+            }]
         };
     },
 
@@ -127,28 +151,19 @@ Demo.Face = BI.inherit(BI.Widget, {
         };
     },
 
-    _createCard1BackgroundConfig: function () {
+    _createCardBackgroundConfig: function () {
         var self = this;
         return {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("Card1背景颜色："), this._createColorPicker(function () {
+            items: [this._createLabel("Card背景颜色："), this._createColorPicker(function () {
                 self.cardBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
             })]
         };
     },
-    _createCard2BackgroundConfig: function () {
-        var self = this;
-        return {
-            type: "bi.htape",
-            cls: "config-item bi-border-bottom",
-            height: 40,
-            items: [this._createLabel("Card2背景颜色：无颜色")]
-        };
-    },
 
     _createHoverBackgroundColor: function () {
         var self = this;
@@ -160,7 +175,15 @@ Demo.Face = BI.inherit(BI.Widget, {
                 self.hoverBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试悬浮状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -174,7 +197,15 @@ Demo.Face = BI.inherit(BI.Widget, {
                 self.activeBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试激活状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -188,7 +219,15 @@ Demo.Face = BI.inherit(BI.Widget, {
                 self.selectBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试选中状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -198,7 +237,7 @@ Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("分割线颜色(只对左边的表格有效)："), this._createColorPicker(function () {
+            items: [this._createLabel("分割线颜色："), this._createColorPicker(function () {
                 self.slitColor = this;
             }, function () {
                 self._runGlobalStyle();
@@ -211,13 +250,12 @@ Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.vertical",
             items: [this._createLabel("--通用配色--"),
                 this._createBackgroundConfig(),
+                this._createCardBackgroundConfig(),
                 this._createFontConfig(),
                 this._createActiveFontConfig(),
                 this._createSelectFontConfig(),
                 this._createGrayFontConfig(),
                 this._createDisableFontConfig(),
-                this._createCard1BackgroundConfig(),
-                this._createCard2BackgroundConfig(),
                 this._createHoverBackgroundColor(),
                 this._createActiveBackgroundColor(),
                 this._createSelectBackgroundColor(),
@@ -568,7 +606,8 @@ Demo.Face = BI.inherit(BI.Widget, {
                 color: fontColor
             },
             "#wrapper .bi-card": {
-                "background-color": cardBackgroundColor
+                "background-color": cardBackgroundColor,
+                color: fontColor
             },
             "#wrapper .bi-tips": {
                 color: grayFontColor
@@ -617,6 +656,10 @@ Demo.Face = BI.inherit(BI.Widget, {
             ".bi-button.button-ignore": {
                 "background-color": button4BackgroundColor
             },
+            // 以下是分割线颜色
+            "#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": {
+                "border-color": slitColor
+            },
             ".bi-collection-table-cell": {
                 "border-right-color": slitColor,
                 "border-bottom-color": slitColor
diff --git a/demo/js/preview.js b/demo/js/preview.js
index 9f16123b3..1602077f8 100644
--- a/demo/js/preview.js
+++ b/demo/js/preview.js
@@ -30,28 +30,6 @@ Demo.Preview = BI.inherit(BI.Widget, {
             type: "bi.absolute",
             cls: "preview-background",
             items: [{
-                el: {
-                    type: "bi.left",
-                    cls: "preview-header bi-tips",
-                    height: 40,
-                    items: [{
-                        type: "bi.label",
-                        height: 40,
-                        text: "Card2",
-                        hgap: 10,
-                        textAlign: "left"
-                    }, {
-                        type: "bi.icon_text_item",
-                        cls: "filter-font",
-                        text: "测试图标",
-                        width: 100,
-                        height: 40
-                    }]
-                },
-                left: 60,
-                right: 60,
-                top: 60
-            }, {
                 el: {
                     type: "bi.vtape",
                     cls: "preview-card bi-card",
@@ -60,7 +38,7 @@ Demo.Preview = BI.inherit(BI.Widget, {
                             type: "bi.label",
                             cls: "preview-title bi-border-bottom",
                             height: 40,
-                            text: "Card1",
+                            text: "Card",
                             hgap: 10,
                             textAlign: "left"
                         },
@@ -92,7 +70,7 @@ Demo.Preview = BI.inherit(BI.Widget, {
                 },
                 left: 60,
                 right: 60,
-                top: 160,
+                top: 60,
                 bottom: 60
             }]
         };
diff --git a/demo/less/main.less b/demo/less/main.less
index e209e803e..184d3c197 100644
--- a/demo/less/main.less
+++ b/demo/less/main.less
@@ -57,6 +57,14 @@ body {
   background-color: @color-bi-background-normal;
 }
 
+#wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
 .bi-theme-dark body {
   background-color: @color-bi-background-normal-theme-dark;
 }
diff --git a/dist/demo.css b/dist/demo.css
index 42d2ecbb6..0f5eb014a 100644
--- a/dist/demo.css
+++ b/dist/demo.css
@@ -45,6 +45,13 @@
 body {
   background-color: #fafbfc;
 }
+#wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
 .bi-theme-dark body {
   background-color: #191B2B;
 }
diff --git a/dist/demo.js b/dist/demo.js
index a7e233df0..ed3520053 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -8789,7 +8789,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 self.activeFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试激活状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -8803,7 +8811,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 self.selectFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试选中状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -8813,11 +8829,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("灰色字体颜色(用于Card2)："), this._createColorPicker(function () {
+            items: [this._createLabel("tip提示字体颜色："), this._createColorPicker(function () {
                 self.grayFontColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.icon_text_item",
+                    cls: "bi-tips copy-font",
+                    height: 40,
+                    text: "测试提示文字"
+                }
+            }]
         };
     },
 
@@ -8843,28 +8867,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
         };
     },
 
-    _createCard1BackgroundConfig: function () {
+    _createCardBackgroundConfig: function () {
         var self = this;
         return {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("Card1背景颜色："), this._createColorPicker(function () {
+            items: [this._createLabel("Card背景颜色："), this._createColorPicker(function () {
                 self.cardBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
             })]
         };
     },
-    _createCard2BackgroundConfig: function () {
-        var self = this;
-        return {
-            type: "bi.htape",
-            cls: "config-item bi-border-bottom",
-            height: 40,
-            items: [this._createLabel("Card2背景颜色：无颜色")]
-        };
-    },
 
     _createHoverBackgroundColor: function () {
         var self = this;
@@ -8876,7 +8891,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 self.hoverBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试悬浮状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -8890,7 +8913,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 self.activeBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试激活状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -8904,7 +8935,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 self.selectBackgroundColor = this;
             }, function () {
                 self._runGlobalStyle();
-            })]
+            }), {
+                width: 100,
+                el: {
+                    type: "bi.text_button",
+                    cls: "bi-list-item-active",
+                    text: "测试选中状态",
+                    forceCenter: true
+                }
+            }]
         };
     },
 
@@ -8914,7 +8953,7 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.htape",
             cls: "config-item bi-border-bottom",
             height: 40,
-            items: [this._createLabel("分割线颜色(只对左边的表格有效)："), this._createColorPicker(function () {
+            items: [this._createLabel("分割线颜色："), this._createColorPicker(function () {
                 self.slitColor = this;
             }, function () {
                 self._runGlobalStyle();
@@ -8927,13 +8966,12 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
             type: "bi.vertical",
             items: [this._createLabel("--通用配色--"),
                 this._createBackgroundConfig(),
+                this._createCardBackgroundConfig(),
                 this._createFontConfig(),
                 this._createActiveFontConfig(),
                 this._createSelectFontConfig(),
                 this._createGrayFontConfig(),
                 this._createDisableFontConfig(),
-                this._createCard1BackgroundConfig(),
-                this._createCard2BackgroundConfig(),
                 this._createHoverBackgroundColor(),
                 this._createActiveBackgroundColor(),
                 this._createSelectBackgroundColor(),
@@ -9284,7 +9322,8 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
                 color: fontColor
             },
             "#wrapper .bi-card": {
-                "background-color": cardBackgroundColor
+                "background-color": cardBackgroundColor,
+                color: fontColor
             },
             "#wrapper .bi-tips": {
                 color: grayFontColor
@@ -9333,6 +9372,10 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
             ".bi-button.button-ignore": {
                 "background-color": button4BackgroundColor
             },
+            // 以下是分割线颜色
+            "#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": {
+                "border-color": slitColor
+            },
             ".bi-collection-table-cell": {
                 "border-right-color": slitColor,
                 "border-bottom-color": slitColor
@@ -11592,28 +11635,6 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
             type: "bi.absolute",
             cls: "preview-background",
             items: [{
-                el: {
-                    type: "bi.left",
-                    cls: "preview-header bi-tips",
-                    height: 40,
-                    items: [{
-                        type: "bi.label",
-                        height: 40,
-                        text: "Card2",
-                        hgap: 10,
-                        textAlign: "left"
-                    }, {
-                        type: "bi.icon_text_item",
-                        cls: "filter-font",
-                        text: "测试图标",
-                        width: 100,
-                        height: 40
-                    }]
-                },
-                left: 60,
-                right: 60,
-                top: 60
-            }, {
                 el: {
                     type: "bi.vtape",
                     cls: "preview-card bi-card",
@@ -11622,7 +11643,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
                             type: "bi.label",
                             cls: "preview-title bi-border-bottom",
                             height: 40,
-                            text: "Card1",
+                            text: "Card",
                             hgap: 10,
                             textAlign: "left"
                         },
@@ -11654,7 +11675,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
                 },
                 left: 60,
                 right: 60,
-                top: 160,
+                top: 60,
                 bottom: 60
             }]
         };