下面我们以模板生成的用户列表页面为例，来介绍如何修改页面的样式。

1.修改列表数据登录名的常用样式。

选中值为 =ds.登录名 的单元格D5 ，点击 样式配置

列表数据基本样式配置

如图可见，在常用标签下有很多配置项。

列表数据样式配置

我们试着配一下。

文字颜色：危险

文字样式：重量

字体大小： H2

单元格水平对齐：水平居右

点击浏览器预览，可以看到效果：

列表数据基本样式修改效果.png

2.修改格子的图标和角标。

增加一列数据。ds.图片。我们看看图片在列表里的显示效果。

选中邮箱登陆名 的E5格，在样式配置里，选中图标组。

image.png

图标：未读邮件。

图标背景色：首要。

再在E5的样式配置里，选中角标组。设置角标：首要色-角标。
但这里只能配置样式，数据还需要在单元格属性里设置。
选中E5格，在右侧的属性栏里，切换到 控件属性 的标签，找到角标这一行，在 静态值 这一列里，输入3。

设置角标数据为30

接下来我们给性别格设置角标为 警告色-药片角标，角标内容为 OK。然后保存，预览，可以看到界面效果：

修改图标，角标后的效果

选中=ds.角色 的H5格，在样式配置里，选中 边框边距 组。

边框边距设置

边框：输入边框。（加上输入边框。）

外边距（上）：mt-4。表示该元素离上面的元素4rem（rem是屏幕尺寸单位）。

保存，预览：

增加图片边框，修改角色上边距

可以看到，角色数据被加了个 输入边框，并且距离上方明显空出一段距离。
边距样式有点多，下面逐个介绍一下：

外边距表示元素外面和外面的元素的距离。

*  外边距（上）就是元素上面和其他元素的距离。下，左，右类似。
*  后面的数字表示距离的大小。
*  外边距里的```m-6``` 表示上下左右都离外面 6rem*  
*  外边距（上）里的 ```mt-4```表示距离上面的元素4rem。

内边距表示元素和里面的元素的距离。

*  内边距（上）就是元素和里面元素上边的距离。下，左，右类似。
*  后面的数字表示距离的大小。
*  内边距里的```p-6``` 表示上下左右都离里面 6rem*  
*  内边距（上）里的 ```pt-4```表示距离里面的元素上方4rem。