update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>

zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

@@ -8,9 +8,9 @@
 ## 构建Stack布局
 
 1. 创建食物名称。
-
+   
    在index.ets文件中，创建Stack组件，将Text组件放进Stack组件的花括号中，使其成为Stack组件的子组件。Stack组件为堆叠组件，可以包含一个或多个子组件，其特点是后一个子组件覆盖前一个子组件。
-
+   
    ```ts
    @Entry
    @Component
@@ -26,7 +26,7 @@
    ```
 
    ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
-
+   
 2. 食物图片展示。
    创建Image组件，指定Image组件的url，Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。
 
@@ -46,7 +46,7 @@
    ```
 
 
-![zh-cn_image_0000001168410342](figures/zh-cn_image_0000001168410342.png)
+   ![zh-cn_image_0000001168410342](figures/zh-cn_image_0000001168410342.png)
 
 3. 通过资源访问图片。
    除指定图片路径外，也可以使用引用媒体资源符$r引用资源，需要遵循resources文件夹的资源限定词的规则。右键resources文件夹，点击New>Resource Directory，选择Resource Type为Media（图片资源）。
@@ -93,7 +93,7 @@
    }
    ```
 
-   ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png)
+     ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png)
 
 5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐，Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。
 
@@ -114,7 +114,7 @@
    }
    ```
 
-   ![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png)
+     ![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png)
 
 6. 调整Text组件的外边距margin，使其距离左侧和底部有一定的距离。margin是简写属性，可以统一指定四个边的外边距，也可以分别指定。具体设置方式如下：
 
@@ -139,7 +139,7 @@
    }
    ```
 
-   ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png)
+     ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png)
 
 7. 调整组件间的结构，语义化组件名称。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件。
 
@@ -251,10 +251,10 @@
      }
    }
    ```
-
-
+   
+   
       ![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png)
-
+   
 3. 调整布局，设置各部分占比。分类名占比（layoutWeight）为1，成分名和成分含量一共占比（layoutWeight）2。成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。
 
    ```ts
@@ -307,9 +307,9 @@
      }
    }
    ```
-
-   ![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png)
-
+   
+     ![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png)
+   
 4. 仿照热量分类创建营养成分分类。营养成分部分（Nutrition）包含：蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）四个成分，后三个成分在表格中省略分类名，用空格代替。
    设置外层Flex为竖直排列FlexDirection.Column， 在主轴方向（竖直方向）上等距排列FlexAlign.SpaceBetween，在交叉轴方向（水平轴方向）上首部对齐排列ItemAlign.Start。
 
@@ -504,7 +504,7 @@
    }
    ```
 
-   ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
+     ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
 
 通过学习Stack布局和Flex布局已完成食物的图文展示和营养成分表，构建出第一个普通视图的食物详情页。在下一个章节中，将开发食物分类列表页，并完成食物分类列表页面和食物详情页面的跳转和数据传递，现在我们就进入下一个章节的学习吧。
 
@@ -514,4 +514,4 @@
 
 - [`BuildCommonView`：创建简单视图（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView)
 
-  本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。
\ No newline at end of file
+  本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。