下面我们以模板生成的用户列表页面为例，来介绍如何修改页面的样式。
1.修改列表数据 登录名 的常用样式。
选中值为 =ds.登录名 的单元格D5 ，点击 样式配置
列表数据基本样式配置
如图可见，在常用标签下有很多配置项。
列表数据样式配置
我们试着配一下。
- 文字颜色 ：危险
- 文字样式： 重量
- 字体大小： H2
- 单元格水平对齐：水平居右
点击浏览器预览，可以看到效果：
列表数据基本样式修改效果.png
2.修改格子的图标和角标。
增加一列数据。ds.图片。我们看看图片在列表里的显示效果。
选中邮箱登陆名 的E5格，在样式配置里，选中 图标 组。
image.png
- 图标：未读邮件。
- 图标背景色：首要。
再在E5的样式配置里，选中 角标 组。设置角标：首要色-角标。
但这里只能配置样式，数据还需要在单元格属性里设置。
选中E5格，在右侧的属性栏里，切换到 控件属性 的标签，找到 角标 这一行，在 静态值 这一列里，输入3。
设置角标数据为30
接下来我们给 性别 格设置角标为 警告色-药片角标，角标内容为 OK。 然后保存，预览，可以看到界面效果：
修改图标，角标后的效果
3.其他常用样式介绍。
选中=ds.角色 的H5格，在样式配置里，选中 边框边距 组。
边框边距设置
- 边框：输入边框。（加上输入边框。）
- 外边距（上）：mt-4。表示该元素离上面的元素4rem（rem是屏幕尺寸单位）。
保存，预览：
增加图片边框，修改角色上边距
可以看到，角色数据被加了个 输入边框，并且距离上方明显空出一段距离。
边距样式有点多，下面逐个介绍一下：
- 外边距表示元素外面和外面的元素的距离。
* 外边距（上）就是元素上面和其他元素的距离。下，左，右类似。
* 后面的数字表示距离的大小。
* 外边距里的```m-6``` 表示上下左右都离外面 6rem*
* 外边距（上）里的 ```mt-4```表示距离上面的元素4rem。
- 内边距表示元素和里面的元素的距离。
* 内边距（上）就是元素和里面元素上边的距离。下，左，右类似。
* 后面的数字表示距离的大小。
* 内边距里的```p-6``` 表示上下左右都离里面 6rem*
* 内边距（上）里的 ```pt-4```表示距离里面的元素上方4rem。
