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

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。