diff --git a/pages.json b/pages.json
index b355c3497b409d5727e428467f356b39f8b2dd25..214d8bbceca4e761f61d284aefa43fd199ce4153 100644
--- a/pages.json
+++ b/pages.json
@@ -137,7 +137,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",
@@ -169,7 +427,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/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