diff --git a/env.js b/env.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7553e4b031ce918e67a304b6b15a63e67ac8c8f
--- /dev/null
+++ b/env.js
@@ -0,0 +1,38 @@
+module.exports = {
+    "is-custom-runtime": false,
+    "compile": true,
+    "h5": {
+        "options": {
+            "headless": true
+        },
+        "executablePath": ""
+    },
+    "mp-weixin": {
+        "port": 9420,
+        "account": "",
+        "args": "",
+        "cwd": "",
+        "launch": true,
+        "teardown": "disconnect",
+        "remote": false,
+        "executablePath": ""
+    },
+    "app-plus": {
+        "android": {
+            "id": "",
+            "executablePath": ""
+        },
+        "version": "",
+        "ios": {
+            "id": "",
+            "executablePath": ""
+        },
+        "uni-app-x": {
+            "version": "/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniappx-launcher/base/version.txt",
+            "android": {
+                "id": "emulator-5554",
+                "executablePath": "/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniappx-launcher/base/android_base.apk"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..882d3642fc1699f6bc7e6a83120ca8a040d2fdc7
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+    testTimeout: 10000,
+    reporters: [
+        'default'
+    ],
+    watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
+    moduleFileExtensions: ['js', 'json'],
+    rootDir: __dirname,
+    testMatch: ["<rootDir>/pages/**/*test.[jt]s?(x)"],
+    testPathIgnorePatterns: ['/node_modules/']
+}
diff --git a/pages.json b/pages.json
index 76fea74a1a10238a2da1bb199524a4b5d5bc6f9d..0a6ecf52aa41a0ea28bb8a51f472db4d5aa3982f 100644
--- a/pages.json
+++ b/pages.json
@@ -143,7 +143,265 @@
             "style": {
                 "navigationBarTitleText": "退出应用"
             }
-        }
+        },
+		{
+			"path": "pages/tabBar/CSS/CSS",
+			"style": {
+				"navigationBarTitleText": "CSS"
+			}
+		},
+		{
+			"path": "pages/CSS/background/background-color",
+			"style": {
+				"navigationBarTitleText": "background-color"
+			}
+		},
+		{
+			"path": "pages/CSS/background/background-image",
+			"style": {
+				"navigationBarTitleText": "background-image"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-color",
+			"style": {
+				"navigationBarTitleText": "border-color"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-radius",
+			"style": {
+				"navigationBarTitleText": "border-radius"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-style",
+			"style": {
+				"navigationBarTitleText": "border-style"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border-width",
+			"style": {
+				"navigationBarTitleText": "border-width"
+			}
+		},
+		{
+			"path": "pages/CSS/border/border",
+			"style": {
+				"navigationBarTitleText": "border"
+			}
+		},
+		{
+			"path": "pages/CSS/box-shadow/box-shadow",
+			"style": {
+				"navigationBarTitleText": "box-shadow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/align-content",
+			"style": {
+				"navigationBarTitleText": "align-content"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/align-items",
+			"style": {
+				"navigationBarTitleText": "align-items"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-basis",
+			"style": {
+				"navigationBarTitleText": "flex-basis"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-direction",
+			"style": {
+				"navigationBarTitleText": "flex-direction"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-flow",
+			"style": {
+				"navigationBarTitleText": "flex-flow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-grow",
+			"style": {
+				"navigationBarTitleText": "flex-grow"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex-shrink",
+			"style": {
+				"navigationBarTitleText": "flex-shrink"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/flex",
+			"style": {
+				"navigationBarTitleText": "flex"
+			}
+		},
+		{
+			"path": "pages/CSS/flex/justify-content",
+			"style": {
+				"navigationBarTitleText": "justify-content"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/height",
+			"style": {
+				"navigationBarTitleText": "height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/max-height",
+			"style": {
+				"navigationBarTitleText": "max-height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/max-width",
+			"style": {
+				"navigationBarTitleText": "max-width"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/min-height",
+			"style": {
+				"navigationBarTitleText": "min-height"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/min-width",
+			"style": {
+				"navigationBarTitleText": "min-width"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/position",
+			"style": {
+				"navigationBarTitleText": "position"
+			}
+		},
+		{
+			"path": "pages/CSS/layout/width",
+			"style": {
+				"navigationBarTitleText": "width"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-bottom",
+			"style": {
+				"navigationBarTitleText": "margin-bottom"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-left",
+			"style": {
+				"navigationBarTitleText": "margin-left"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-right",
+			"style": {
+				"navigationBarTitleText": "margin-right"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin-top",
+			"style": {
+				"navigationBarTitleText": "margin-top"
+			}
+		},
+		{
+			"path": "pages/CSS/margin/margin",
+			"style": {
+				"navigationBarTitleText": "margin"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-bottom",
+			"style": {
+				"navigationBarTitleText": "padding-bottom"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-left",
+			"style": {
+				"navigationBarTitleText": "padding-left"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-right",
+			"style": {
+				"navigationBarTitleText": "padding-right"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding-top",
+			"style": {
+				"navigationBarTitleText": "padding-top"
+			}
+		},
+		{
+			"path": "pages/CSS/padding/padding",
+			"style": {
+				"navigationBarTitleText": "padding"
+			}
+		},
+		{
+			"path": "pages/CSS/text/color",
+			"style": {
+				"navigationBarTitleText": "color"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-family",
+			"style": {
+				"navigationBarTitleText": "font-family"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-size",
+			"style": {
+				"navigationBarTitleText": "font-size"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-style",
+			"style": {
+				"navigationBarTitleText": "font-style"
+			}
+		},
+		{
+			"path": "pages/CSS/text/font-weight",
+			"style": {
+				"navigationBarTitleText": "font-weight"
+			}
+		},
+		{
+			"path": "pages/CSS/text/line-height",
+			"style": {
+				"navigationBarTitleText": "line-height"
+			}
+		},
+		{
+			"path": "pages/CSS/text/text-align",
+			"style": {
+				"navigationBarTitleText": "text-align"
+			}
+		},
+		{
+			"path": "pages/CSS/text/text-decoration-line",
+			"style": {
+				"navigationBarTitleText": "text-decoration-line"
+			}
+		}
     ],
     "globalStyle": {
         "pageOrientation": "portrait",
@@ -175,7 +433,13 @@
                 "iconPath": "static/api.png",
                 "selectedIconPath": "static/apiHL.png",
                 "text": "接口"
-            }
+            },
+			{
+			    "pagePath": "pages/tabBar/CSS/CSS",
+			    "iconPath": "static/extui.png",
+			    "selectedIconPath": "static/extuiHL.png",
+			    "text": "CSS"
+			}
         ]
     },
     "uniIdRouter": {},
diff --git a/pages/CSS/background/background-color.uvue b/pages/CSS/background/background-color.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..36c63c44f188583891831a932f8a98d24ba86851
--- /dev/null
+++ b/pages/CSS/background/background-color.uvue
@@ -0,0 +1,39 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>background-color: red</text>
+			<view class="common" style="background-color: red;"></view>
+		</view>
+
+		<view>
+			<text>background-color: #ff0000</text>
+			<view class="common" style="background-color: #ff0000;"></view>
+		</view>
+		
+		<view>
+			<text>background-color: #f00</text>
+			<view class="common" style="background-color: #f00;"></view>
+		</view>
+
+		<view>
+			<text>background-color: rgb(255, 0, 0)</text>
+			<view class="common" style="background-color: rgb(255, 0, 0);"></view>
+		</view>
+		
+		<view>
+			<text>background-color: rgba(255, 0, 0, 0.5)</text>
+			<view class="common" style="background-color: rgba(255, 0, 0, 0.5);"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/background/background-image.uvue b/pages/CSS/background/background-image.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..a23041251fc73b69a09db1483cb83c36e2d5aa69
--- /dev/null
+++ b/pages/CSS/background/background-image.uvue
@@ -0,0 +1,19 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>background-image: linear-gradient(to right, red, yellow)</text>
+			<view class="common" style="background-image: linear-gradient(to right, red, yellow);"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-color.uvue b/pages/CSS/border/border-color.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..ae03864d8049dd1aa6b987d1b74a0d86d8991d66
--- /dev/null
+++ b/pages/CSS/border/border-color.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-color: red</text>
+			<view class="common" style="border-width: 10rpx;border-color: red;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-color: red</text>
+			<view class="common" style="border-left-width: 10rpx;border-left-color: red;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-color: green</text>
+			<view class="common" style="border-top-width: 10rpx;border-top-color: green;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-color: yellow</text>
+			<view class="common" style="border-right-width: 10rpx;border-right-color: yellow;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-color: blue</text>
+			<view class="common" style="border-bottom-width: 10rpx;border-bottom-color: blue;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-radius.uvue b/pages/CSS/border/border-radius.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..35447a38abfd9f8e7713aeda333f467cf7b116c3
--- /dev/null
+++ b/pages/CSS/border/border-radius.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-radius: 20rpx</text>
+			<view class="common" style="border-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-left-radius: 20rpx</text>
+			<view class="common" style="border-top-left-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-right-radius: 20rpx</text>
+			<view class="common" style="border-top-right-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-left-radius: 20rpx</text>
+			<view class="common" style="border-bottom-left-radius: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-right-radius: 20rpx</text>
+			<view class="common" style="border-bottom-right-radius: 20rpx;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-style.uvue b/pages/CSS/border/border-style.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..6420c8506e5ee88bce061cc863d22207595dcae5
--- /dev/null
+++ b/pages/CSS/border/border-style.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-style: dashed</text>
+			<view class="common" style="border-width: 10rpx;border-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-style: dashed</text>
+			<view class="common" style="border-left-width: 10rpx;border-left-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-style: dashed</text>
+			<view class="common" style="border-top-width: 10rpx;border-top-style: dashed;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-style: dotted</text>
+			<view class="common" style="border-right-width: 10rpx;border-right-style: dotted;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-style: dotted</text>
+			<view class="common" style="border-bottom-width: 10rpx;border-bottom-style: dotted;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border-width.uvue b/pages/CSS/border/border-width.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..40005a134bb0cd75f36ab774f226d0398c8093dc
--- /dev/null
+++ b/pages/CSS/border/border-width.uvue
@@ -0,0 +1,40 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border-width: 10rpx</text>
+			<view class="common" style="border-width: 10rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-left-width: 10rpx</text>
+			<view class="common" style="border-left-width: 10rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-top-width: 20rpx</text>
+			<view class="common" style="border-top-width: 20rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-right-width: 30rpx</text>
+			<view class="common" style="border-right-width: 30rpx;"></view>
+		</view>
+		
+		<view>
+			<text>border-bottom-width: 40rpx</text>
+			<view class="common" style="border-bottom-width: 40rpx;"></view>
+		</view>	
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/border/border.uvue b/pages/CSS/border/border.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..e20202b150469ddb0b44e4d8b45c88c93d9bf293
--- /dev/null
+++ b/pages/CSS/border/border.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>border: 10rpx dotted blue</text>
+			<view class="common" style="border: 10rpx dotted blue;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..7fac0af367738a82ce70ef04f4e031d885fa3e68
--- /dev/null
+++ b/pages/CSS/box-shadow/box-shadow.uvue
@@ -0,0 +1,103 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>box-shadow: 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 10px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 10px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 5px 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 5px 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: -5px -5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: -5px -5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 10px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset 5px 5px 5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: inset -5px -5px 5px black</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+			<view
+				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+				<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 250rpx;
+		height: 250rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/align-content.uvue b/pages/CSS/flex/align-content.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..af2c205524d492fd64823fb9926aee7d1d916d71
--- /dev/null
+++ b/pages/CSS/flex/align-content.uvue
@@ -0,0 +1,89 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>align-content: center</text>
+			<view class="common" style="align-content: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: flex-start</text>
+			<view class="common" style="align-content: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: flex-end</text>
+			<view class="common" style="align-content: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: space-between</text>
+			<view class="common" style="align-content: space-between;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: space-around</text>
+			<view class="common" style="align-content: space-around;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-content: stretch</text>
+			<view class="common" style="align-content: stretch;">
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-flow: row wrap;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/align-items.uvue b/pages/CSS/flex/align-items.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..d52d1b0a40d7a58f9e9b7c940ac8e09079ea83fe
--- /dev/null
+++ b/pages/CSS/flex/align-items.uvue
@@ -0,0 +1,52 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>align-items: center</text>
+			<view class="common" style="align-items: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: flex-start</text>
+			<view class="common" style="align-items: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: flex-end</text>
+			<view class="common" style="align-items: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>align-items: stretch</text>
+			<view class="common" style="align-items: stretch;">
+				<view style="width: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-direction: row;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-basis.uvue b/pages/CSS/flex/flex-basis.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..f94abb3f044d34ecaef400357edeb8ad7340866a
--- /dev/null
+++ b/pages/CSS/flex/flex-basis.uvue
@@ -0,0 +1,28 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-basis</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex-basis: 300rpx;">
+					<text>300rpx</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-direction.uvue b/pages/CSS/flex/flex-direction.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..c7e3afc30da36d4a29d9b7129fc710b4ebf16d37
--- /dev/null
+++ b/pages/CSS/flex/flex-direction.uvue
@@ -0,0 +1,51 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-direction: row</text>
+			<view class="common" style="flex-direction: row;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: row-reverse</text>
+			<view class="common" style="flex-direction: row-reverse;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: column</text>
+			<view class="common" style="flex-direction: column;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-direction: column-reverse</text>
+			<view class="common" style="flex-direction: column-reverse;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-flow.uvue b/pages/CSS/flex/flex-flow.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..7a021ff3e391ddb26c6cc3750fcd8c610919409e
--- /dev/null
+++ b/pages/CSS/flex/flex-flow.uvue
@@ -0,0 +1,63 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-flow: row nowrap</text>
+			<view class="common" style="flex-flow: row nowrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: row wrap</text>
+			<view class="common" style="flex-flow: row wrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: column nowrap</text>
+			<view class="common" style="flex-flow: column nowrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex-flow: column wrap</text>
+			<view class="common" style="flex-flow: column wrap;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-grow.uvue b/pages/CSS/flex/flex-grow.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..e40fa97a4b2d64f61daf5e40721381ed7ccb1268
--- /dev/null
+++ b/pages/CSS/flex/flex-grow.uvue
@@ -0,0 +1,31 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-grow</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="background-color: red;flex-grow: 0.5;">
+					<text>0.5</text>
+				</view>
+				<view class="common" style="background-color: green;flex-grow: 1;">
+					<text>1</text>
+				</view>
+				<view class="common" style="background-color: blue;flex-grow: 2">
+					<text>2</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex-shrink.uvue b/pages/CSS/flex/flex-shrink.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..04d5431d36a81600bdd6ae1ee99f9c82cbdc0fc2
--- /dev/null
+++ b/pages/CSS/flex/flex-shrink.uvue
@@ -0,0 +1,31 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex-shrink</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="background-color: red;flex-shrink: 1;">
+					<text>1</text>
+				</view>
+				<view class="common" style="background-color: green;flex-shrink: 2;">
+					<text>2</text>
+				</view>
+				<view class="common" style="background-color: blue;flex-shrink: 3;">
+					<text>3</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 250rpx;
+		height: 100rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/flex.uvue b/pages/CSS/flex/flex.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..87cf159f7e4d4e5b22d72278af88b59ab19b71f3
--- /dev/null
+++ b/pages/CSS/flex/flex.uvue
@@ -0,0 +1,51 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>flex: 0</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="min-width: 50rpx;flex: 0;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: 1</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: 1"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: auto</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: auto;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>flex: none</text>
+			<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
+				<view class="common" style="flex: none;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/flex/justify-content.uvue b/pages/CSS/flex/justify-content.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..74c78e44c1add871d5493bca20c8129cb3b62bbe
--- /dev/null
+++ b/pages/CSS/flex/justify-content.uvue
@@ -0,0 +1,61 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>justify-content: center</text>
+			<view class="common" style="justify-content: center;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: flex-start</text>
+			<view class="common" style="justify-content: flex-start;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: flex-end</text>
+			<view class="common" style="justify-content: flex-end;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: space-between</text>
+			<view class="common" style="justify-content: space-between;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>justify-content: space-around</text>
+			<view class="common" style="justify-content: space-around;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+		flex-direction: row;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/height.uvue b/pages/CSS/layout/height.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..8f59d2e6564f4f0308fdfaaeb52546caaf951dd5
--- /dev/null
+++ b/pages/CSS/layout/height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>height: 500rpx</text>
+			<view class="common" style="height: 500rpx;"></view>
+		</view>
+
+		<view style="height: 500rpx;">
+			<text>height: 50%</text>
+			<view class="common" style="height: 50%;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/max-height.uvue b/pages/CSS/layout/max-height.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..f4b93e558514ca744a5312a1a154b3c7f0a4e3f3
--- /dev/null
+++ b/pages/CSS/layout/max-height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>max-height: 500rpx</text>
+			<view class="common" style="max-height: 500rpx;">
+				<text>height: 1000rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 1000rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/max-width.uvue b/pages/CSS/layout/max-width.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..97cb20c48da934b9bfe5adc3571725965ec17149
--- /dev/null
+++ b/pages/CSS/layout/max-width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>max-width: 500rpx</text>
+			<view class="common" style="max-width: 500rpx;">
+				<text>width: 1000rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 1000rpx;
+		height: 500rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/min-height.uvue b/pages/CSS/layout/min-height.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..23cd6a6ddf36395fb76744f9543cfa4cf6999605
--- /dev/null
+++ b/pages/CSS/layout/min-height.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>min-height: 500rpx</text>
+			<view class="common" style="min-height: 500rpx;">
+				<text>height: 100rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 100rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/min-width.uvue b/pages/CSS/layout/min-width.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..ff75cacf7d591a7726d5666d25549b43f097c470
--- /dev/null
+++ b/pages/CSS/layout/min-width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>min-width: 500rpx</text>
+			<view class="common" style="min-width: 500rpx;">
+				<text>width: 100rpx</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 500rpx;
+		background-color: red;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/position.uvue b/pages/CSS/layout/position.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..bbfa86a1640a660843865090252bb4a5fe76884e
--- /dev/null
+++ b/pages/CSS/layout/position.uvue
@@ -0,0 +1,70 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>position: relative</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: relative;">
+					<text>relative</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+
+		<view>
+			<text>position: absolute</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: absolute;">
+					<text>absolute</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+
+		<view>
+			<text>position: fixed</text>
+			<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view class="common" style="position: fixed;">
+					<text>fixed</text>
+				</view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
+				<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 100rpx;
+		height: 100rpx;
+		background-color: green;
+		top: 50rpx;
+		left: 50rpx;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/layout/width.uvue b/pages/CSS/layout/width.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..57107dbf4e375ed14e40855c76bdf44ab7ca7b0d
--- /dev/null
+++ b/pages/CSS/layout/width.uvue
@@ -0,0 +1,24 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>width: 500rpx</text>
+			<view class="common" style="width: 500rpx;"></view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>width: 50%</text>
+			<view class="common" style="width: 50%;"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 500rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-bottom.uvue b/pages/CSS/margin/margin-bottom.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..a5923a7e4a0238a694e5c4f1a02a899224108b5a
--- /dev/null
+++ b/pages/CSS/margin/margin-bottom.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-bottom: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-bottom: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-bottom: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-bottom: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-left.uvue b/pages/CSS/margin/margin-left.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..c69c7af40213f3d7758062417ec3309b9bc3acb1
--- /dev/null
+++ b/pages/CSS/margin/margin-left.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-left: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-left: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-left: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-left: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-right.uvue b/pages/CSS/margin/margin-right.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..82b6f637ed66c1cd0f218c11fb2ca68390301c8b
--- /dev/null
+++ b/pages/CSS/margin/margin-right.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-right: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-right: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-right: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-right: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin-top.uvue b/pages/CSS/margin/margin-top.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..707acc5a95e142670f968245b819b0af2952dac8
--- /dev/null
+++ b/pages/CSS/margin/margin-top.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin-top: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-top: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin-top: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin-top: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/margin/margin.uvue b/pages/CSS/margin/margin.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..2e16deb25d7dbacce85dd5df18c187d2162d4ebd
--- /dev/null
+++ b/pages/CSS/margin/margin.uvue
@@ -0,0 +1,32 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>margin: 50rpx</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin: 50rpx;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+
+		<view>
+			<text>margin: 10%</text>
+			<view style="width: 500rpx;height: 500rpx;background-color: gray;">
+				<view class="common" style="background-color: red;"></view>
+				<view class="common" style="margin: 10%;"></view>
+				<view class="common" style="background-color: blue;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		height: 100rpx;
+		background-color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-bottom.uvue b/pages/CSS/padding/padding-bottom.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..c91e1605241f6c0571b1247a9c4d3ecaeb927dd1
--- /dev/null
+++ b/pages/CSS/padding/padding-bottom.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-bottom: 50rpx</text>
+			<view class="common" style="padding-bottom: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-bottom: 10%</text>
+			<view class="common" style="padding-bottom: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-left.uvue b/pages/CSS/padding/padding-left.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..0e2c51477b34c445dfd72d7cd216041d5b6b481e
--- /dev/null
+++ b/pages/CSS/padding/padding-left.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-left: 50rpx</text>
+			<view class="common" style="padding-left: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-left: 10%</text>
+			<view class="common" style="padding-left: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-right.uvue b/pages/CSS/padding/padding-right.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..0f85586ea10e7d8823e9b3e33bf9b5ff1e28f95c
--- /dev/null
+++ b/pages/CSS/padding/padding-right.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-right: 50rpx</text>
+			<view class="common" style="padding-right: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-right: 10%</text>
+			<view class="common" style="padding-right: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding-top.uvue b/pages/CSS/padding/padding-top.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..cd4257ed8682220bd77ae5078b6d0d449b25a53a
--- /dev/null
+++ b/pages/CSS/padding/padding-top.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding-top: 50rpx</text>
+			<view class="common" style="padding-top: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding-top: 10%</text>
+			<view class="common" style="padding-top: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/padding/padding.uvue b/pages/CSS/padding/padding.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..474201bb17f46623c6ed1c8c8c2ecbfb1353a8b9
--- /dev/null
+++ b/pages/CSS/padding/padding.uvue
@@ -0,0 +1,29 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view>
+			<text>padding: 50rpx</text>
+			<view class="common" style="padding: 50rpx;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+
+		<view style="width: 500rpx;">
+			<text>padding: 10%</text>
+			<view class="common" style="padding: 10%;">
+				<view style="flex-grow: 1;background-color: red;"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: gray;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/color.uvue b/pages/CSS/text/color.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..4922e32120835ea5160691a86f251c4d29088745
--- /dev/null
+++ b/pages/CSS/text/color.uvue
@@ -0,0 +1,21 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="color: rgb(255, 0, 0);">color: rgb(255, 0, 0)</text>
+			<text class="common" style="color: rgba(255, 0, 0, 0.5);">color: rgba(255, 0, 0, 0.5)</text>
+			<text class="common" style="color: #ff0000;">color: #ff0000</text>
+			<text class="common" style="color: #f00;">color: #f00</text>
+			<text class="common" style="color: red;">color: red</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-family.uvue b/pages/CSS/text/font-family.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..5da9ff1dc5b227299fcef574c91e8b1ce9b5dfa8
--- /dev/null
+++ b/pages/CSS/text/font-family.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-family: monospace;">font-family: monospace</text>
+			<text class="common" style="font-family: cursive;">font-family: cursive</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-size.uvue b/pages/CSS/text/font-size.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..5d3ac9092a09b7bd512e857897a698b727b15f69
--- /dev/null
+++ b/pages/CSS/text/font-size.uvue
@@ -0,0 +1,15 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text style="font-size: 30px;">font-size: 30px</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-style.uvue b/pages/CSS/text/font-style.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..ba6225d2fec5ff12c784924298f124ca3e611f6a
--- /dev/null
+++ b/pages/CSS/text/font-style.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-style: italic;">font-style: italic</text>
+			<text class="common" style="font-style: normal;">font-style: normal</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/font-weight.uvue b/pages/CSS/text/font-weight.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..1e8240a29e999369fa67d1833b328e78ddba3b9f
--- /dev/null
+++ b/pages/CSS/text/font-weight.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="font-weight: normal;">font-weight: normal</text>
+			<text class="common" style="font-weight: bold;">font-weight: bold</text>
+			<text class="common" style="font-weight: 400;">font-weight: 400</text>
+			<text class="common" style="font-weight: 700;">font-weight: 700</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/line-height.uvue b/pages/CSS/text/line-height.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..939dba7984147d14402ac792bbf6ae1b4f634f5d
--- /dev/null
+++ b/pages/CSS/text/line-height.uvue
@@ -0,0 +1,19 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common">CSS测试 CSS测试 CSS测试</text>
+			<text class="common" style="line-height: 150rpx;">line-height: 150rpx</text>
+			<text class="common">CSS测试 CSS测试 CSS测试</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/text-align.uvue b/pages/CSS/text/text-align.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..cbcb5787a16da05a78123125639e2655bfdc1f03
--- /dev/null
+++ b/pages/CSS/text/text-align.uvue
@@ -0,0 +1,20 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="text-align: left;">text-align: left</text>
+			<text class="common" style="text-align: center;">text-align: center</text>
+			<text class="common" style="text-align: right;">text-align: right</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/text/text-decoration-line.uvue b/pages/CSS/text/text-decoration-line.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..029ccf1a448654eb1b435b7cc03ff18a69710cc6
--- /dev/null
+++ b/pages/CSS/text/text-decoration-line.uvue
@@ -0,0 +1,18 @@
+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="text-decoration-line: underline;">text-decoration-line: underline</text>
+			<text class="common" style="text-decoration-line: line-through;">text-decoration-line: line-through</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+	.common {
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/button/button.test.js b/pages/component/button/button.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a3c201159fa41f52b3402da52b60d6e823666a4
--- /dev/null
+++ b/pages/component/button/button.test.js
@@ -0,0 +1,82 @@
+function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+        const data = await page.data()
+        resolve(key ? data[key] : data)
+    })
+}
+
+let page
+beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/button/button')
+    await page.waitFor(1000)
+})
+
+describe('Button.uvue', () => {
+    it('click', async () => {
+        const defaultBtn = await page.$('.default-button')
+        const disabledBtn = await page.$('.disabled-button')
+        expect(await getData('count')).toEqual(0)
+        await defaultBtn.tap()
+        expect(await getData('count')).toEqual(1)
+        await disabledBtn.tap()
+        expect(await getData('count')).toEqual(1)
+    })
+    it('length', async () => {
+        const btnLen = await page.$$('.button')
+        expect(btnLen.length).toBe(13)
+    })
+    it('text', async () => {
+        const textBtn = await page.$('.text-button')
+        expect(await textBtn.text()).toEqual('按钮')
+        await page.setData({
+            text: 'button'
+        })
+        // TODO 待修复
+        expect(await textBtn.text()).toEqual('button')
+    })
+    it('type', async () => {
+        // TODO 目前获取组件属性只能通过组件的name,并且拿到的是最后一个
+        const btn = await page.$('Button')
+        expect(await btn.property('type')).toBe('warn')
+        await page.setData({
+            type: 'default'
+        })
+        await page.waitFor(500)
+        expect(await btn.property('type')).toBe('default')
+        await page.setData({
+            type: 'warn'
+        })
+        await page.waitFor(500)
+        expect(await btn.property('type')).toBe('warn')
+    })
+    it('size', async () => {
+        const btn = await page.$('Button')
+        expect(await btn.property('size')).toBe('mini')
+        await page.setData({
+            size: 'default'
+        })
+        await page.waitFor(500)
+        expect(await btn.property('size')).toBe('default')
+        await page.setData({
+            size: 'mini'
+        })
+    })
+    it('plain', async () => {
+        const btn = await page.$('Button')
+        expect(await btn.property('plain')).toBe(false)
+        await page.setData({
+            plain: true
+        })
+        await page.waitFor(500)
+        expect(await btn.property('plain')).toBe(true)
+    })
+    it('disabled', async () => {
+        const btn = await page.$('Button')
+        expect(await btn.property('disabled')).toBe(false)
+        await page.setData({
+            disabled: true
+        })
+        await page.waitFor(500)
+        expect(await btn.property('disabled')).toBe(true)
+    })
+})
\ No newline at end of file
diff --git a/pages/component/button/button.uvue b/pages/component/button/button.uvue
index 8e7d90f2438ad47e4c90019183015e94c309816f..31a3c1cd59ad5c472fadb7fac2c1757944b0f849 100644
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
@@ -2,18 +2,18 @@
     <view>
         <page-head :title="title"></page-head>
         <view class="uni-padding-wrap uni-common-mt">
-            <button type="primary">页面主操作 Normal</button>
+            <button type="primary" class="button test-button">页面主操作 Normal</button>
             <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
             <button type="primary" :disabled="true" class="button">页面主操作 Disabled</button>
 
-            <button type="default" class="button">页面次要操作 Normal</button>
-            <button type="default" :disabled="true" class="button">页面次要操作 Disabled</button>
+            <button type="default" class="button default-button" @click="addCount">页面次要操作 Normal</button>
+            <button type="default" :disabled="true" class="button disabled-button">页面次要操作 Disabled</button>
 
             <button type="warn" class="button">警告类操作 Normal</button>
             <button type="warn" :disabled="true" class="button">警告类操作 Disabled</button>
 
             <view class="button-sp-area">
-                <button type="primary" :plain="true" class="button">按钮</button>
+                <button type="primary" :plain="true" class="button text-button">{{text}}</button>
                 <button type="primary" :disabled="true" :plain="true" class="button">
                     不可点击的按钮
                 </button>
@@ -24,7 +24,8 @@
                 <view class="uni-flex uni-row">
                     <button class="button mini-btn" type="primary" size="mini">按钮</button>
                     <button class="button mini-btn" type="default" size="mini">按钮</button>
-                    <button class="button mini-btn" type="warn" size="mini">按钮</button>
+                    <button class="button mini-btn" :type="type" :size="size" :plain="plain"
+                        :disabled="disabled">按钮</button>
                 </view>
             </view>
         </view>
@@ -36,7 +37,13 @@
             return {
                 title: 'button',
                 loading: false,
-                _timer: 0
+                _timer: 0,
+                text: '按钮',
+                type: 'warn',
+                size: 'mini',
+                plain: false,
+                disabled: false,
+                count: 0
             }
         },
         onShow() {
@@ -55,6 +62,9 @@
             //         clearTimeout(this._timer);
             //     }
             // }
+            addCount() {
+                this.count++
+            }
         },
     }
 </script>
diff --git a/pages/component/text/text.uvue b/pages/component/text/text.uvue
index 5b64edefc7ff4199b516803d90299773e2436c6b..050db7e72e1eb4e45e0d6bff9ef06c4a64f75192 100644
--- a/pages/component/text/text.uvue
+++ b/pages/component/text/text.uvue
@@ -18,18 +18,18 @@
             return {
                 title: 'text',
                 texts: [
-                    'HBuilder，400万开发者选择的IDE',
-                    'MUI，轻巧、漂亮的前端开源框架',
-                    'wap2app，M站快速转换原生体验的App',
-                    '5+Runtime，为HTML5插上原生的翅膀',
                     'HBuilderX，轻巧、极速，极客编辑器',
-                    'uni-app，终极跨平台方案',
-                    'HBuilder，400万开发者选择的IDE',
-                    'MUI，轻巧、漂亮的前端开源框架',
-                    'wap2app，M站快速转换原生体验的App',
-                    '5+Runtime，为HTML5插上原生的翅膀',
-                    'HBuilderX，轻巧、极速，极客编辑器',
-                    'uni-app，终极跨平台方案',
+                    'uni-app x，终极跨平台方案',
+                    'uniCloud，js serverless云服务',
+					'uts，大一统语言',
+					'uniMPSdk，让你的App具备小程序能力',
+					'uni-admin，开源、现成的全端管理后台',
+					'uni-id，开源、全端的账户中心',
+					'uni-pay，开源、云端一体、全平台的支付',
+					'uni-ai，聚合ai能力',
+					'uni-cms，开源、云端一体、全平台的内容管理平台',
+					'uni-im，开源、云端一体、全平台的im即时消息',
+					'uni统计，开源、完善、全平台的统计报表',
                     '......'
                 ] as string[],
                 text: '',
diff --git a/pages/tabBar/CSS/CSS.uvue b/pages/tabBar/CSS/CSS.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..50b2d72417f0bc648e8d80e1a7e724796c3f3436
--- /dev/null
+++ b/pages/tabBar/CSS/CSS.uvue
@@ -0,0 +1,346 @@
+<template>
+	<view class="uni-container">
+		<view class="uni-header-logo">
+			<image class="uni-header-image" src="/static/extuiIndex.png"></image>
+		</view>
+		<view class="uni-hello-text">
+			<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
+			<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
+				:inWhiteList="true"></u-link>
+		</view>
+		<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+			<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+				<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
+				<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
+					class="uni-icon"></image>
+			</view>
+			<view class="uni-panel-c" v-if="item.open">
+				<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
+					<text class="uni-navigate-text"
+						:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
+					<image :src="arrowRightIcon" class="uni-icon"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+	type Page = {
+		name : string,
+		enable ?: boolean,
+		url ?: string
+	}
+	type ListItem = {
+		id : string,
+		name : string,
+		open : boolean,
+		pages : Page[],
+		url ?: string,
+		enable ?: boolean
+	}
+	export default {
+		data() {
+			return {
+				list: [{
+					id: 'background',
+					name: 'background',
+					open: false,
+					pages: [
+						{
+							name: 'background-color',
+							enable: true,
+							url: '/pages/CSS/background/background-color'
+						},
+						{
+							name: 'background-image',
+							enable: true,
+							url: '/pages/CSS/background/background-image'
+						}
+					] as Page[]
+				}, {
+					id: 'border',
+					name: 'border',
+					open: false,
+					pages: [
+						{
+							name: 'border',
+							enable: true,
+							url: 'pages/CSS/border/border'
+						},
+						{
+							name: 'border-width',
+							enable: true,
+							url: 'pages/CSS/border/border-width'
+						},
+						{
+							name: 'border-style',
+							enable: true,
+							url: 'pages/CSS/border/border-style'
+						},
+						{
+							name: 'border-color',
+							enable: true,
+							url: 'pages/CSS/border/border-color'
+						},
+						{
+							name: 'border-radius',
+							enable: true,
+							url: 'pages/CSS/border/border-radius'
+						}
+					] as Page[]
+				}, {
+					id: 'box-shadow',
+					name: 'box-shadow',
+					open: false,
+					pages: [
+						{
+							name: 'box-shadow',
+							enable: true,
+							url: 'pages/CSS/box-shadow/box-shadow'
+						},
+					] as Page[]
+				}, {
+					id: 'flex',
+					name: 'flex',
+					open: false,
+					pages: [
+						{
+							name: 'align-content',
+							enable: true,
+							url: 'pages/CSS/flex/align-content'
+						},
+						{
+							name: 'align-items',
+							enable: true,
+							url: 'pages/CSS/flex/align-items'
+						},
+						{
+							name: 'flex-basis',
+							enable: true,
+							url: 'pages/CSS/flex/flex-basis'
+						},
+						{
+							name: 'flex-direction',
+							enable: true,
+							url: 'pages/CSS/flex/flex-direction'
+						},
+						{
+							name: 'flex-flow',
+							enable: true,
+							url: 'pages/CSS/flex/flex-flow'
+						},
+						{
+							name: 'flex-grow',
+							enable: true,
+							url: 'pages/CSS/flex/flex-grow'
+						},
+						{
+							name: 'flex-shrink',
+							enable: true,
+							url: 'pages/CSS/flex/flex-shrink'
+						},
+						{
+							name: 'flex',
+							enable: true,
+							url: 'pages/CSS/flex/flex'
+						},
+						{
+							name: 'justify-content',
+							enable: true,
+							url: 'pages/CSS/flex/justify-content'
+						}
+					] as Page[]
+				}, {
+					id: 'layout',
+					name: 'layout',
+					open: false,
+					pages: [
+						{
+							name: 'height',
+							enable: true,
+							url: 'pages/CSS/layout/height'
+						},
+						{
+							name: 'max-height',
+							enable: true,
+							url: 'pages/CSS/layout/max-height'
+						},
+						{
+							name: 'max-width',
+							enable: true,
+							url: 'pages/CSS/layout/max-width'
+						},
+						{
+							name: 'min-height',
+							enable: true,
+							url: 'pages/CSS/layout/min-height'
+						},
+						{
+							name: 'min-width',
+							enable: true,
+							url: 'pages/CSS/layout/min-width'
+						},
+						{
+							name: 'position',
+							enable: true,
+							url: 'pages/CSS/layout/position'
+						},
+						{
+							name: 'width',
+							enable: true,
+							url: 'pages/CSS/layout/width'
+						}
+					] as Page[]
+				}, {
+					id: 'margin',
+					name: 'margin',
+					open: false,
+					pages: [
+						{
+							name: 'margin-bottom',
+							enable: true,
+							url: 'pages/CSS/margin/margin-bottom'
+						},
+						{
+							name: 'margin-left',
+							enable: true,
+							url: 'pages/CSS/margin/margin-left'
+						},
+						{
+							name: 'margin-right',
+							enable: true,
+							url: 'pages/CSS/margin/margin-right'
+						},
+						{
+							name: 'margin-top',
+							enable: true,
+							url: 'pages/CSS/margin/margin-top'
+						}, {
+							name: 'margin',
+							enable: true,
+							url: 'pages/CSS/margin/margin'
+						}
+					] as Page[]
+				}, {
+					id: 'padding',
+					name: 'padding',
+					open: false,
+					pages: [
+						{
+							name: 'padding-bottom',
+							enable: true,
+							url: 'pages/CSS/padding/padding-bottom'
+						},
+						{
+							name: 'padding-left',
+							enable: true,
+							url: 'pages/CSS/padding/padding-left'
+						},
+						{
+							name: 'padding-right',
+							enable: true,
+							url: 'pages/CSS/padding/padding-right'
+						},
+						{
+							name: 'padding-top',
+							enable: true,
+							url: 'pages/CSS/padding/padding-top'
+						}, {
+							name: 'padding',
+							enable: true,
+							url: 'pages/CSS/padding/padding'
+						}
+					] as Page[]
+				}, {
+					id: 'text',
+					name: 'text',
+					open: false,
+					pages: [
+						{
+							name: 'color',
+							enable: true,
+							url: 'pages/CSS/text/color'
+						},
+						{
+							name: 'font-family',
+							enable: true,
+							url: 'pages/CSS/text/font-family'
+						},
+						{
+							name: 'font-size',
+							enable: true,
+							url: 'pages/CSS/text/font-size'
+						},
+						{
+							name: 'font-style',
+							enable: true,
+							url: 'pages/CSS/text/font-style'
+						},
+						{
+							name: 'font-weight',
+							enable: true,
+							url: 'pages/CSS/text/font-weight'
+						},
+						{
+							name: 'line-height',
+							enable: true,
+							url: 'pages/CSS/text/line-height'
+						},
+						{
+							name: 'text-align',
+							enable: true,
+							url: 'pages/CSS/text/text-align'
+						},
+						{
+							name: 'text-decoration-line',
+							enable: true,
+							url: 'pages/CSS/text/text-decoration-line'
+						}
+					] as Page[]
+				}
+				] as ListItem[],
+				arrowUpIcon: '/static/icons/arrow-up.png',
+				arrowDownIcon: '/static/icons/arrow-down.png',
+				arrowRightIcon: '/static/icons/arrow-right.png',
+			}
+		},
+		methods: {
+			triggerCollapse(index ?: number, item : ListItem) {
+				if (item.pages.length == 0) {
+					const page : Page = {
+						name: item.name,
+						enable: item.enable,
+						url: item.url
+					}
+					this.goDetailPage(page);
+					return;
+				}
+				for (var i = 0; i < this.list.length; ++i) {
+					if (index == i) {
+						this.list[i].open = !this.list[i].open;
+					} else {
+						this.list[i].open = false;
+					}
+				}
+			},
+			goDetailPage(e : Page) {
+				if (e.enable != true) {
+					uni.showToast({
+						icon: 'none',
+						title: '暂不支持'
+					})
+					return
+				}
+				const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
+				uni.navigateTo({
+					url
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	@import '../../../common/uni-uvue.css';
+</style>
\ No newline at end of file