|
|
@ -12,8 +12,8 @@ title: 对齐 |
|
|
|
|
|
|
|
## 文案类对齐 |
|
|
|
|
|
|
|
<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐,使用了一个视觉起点。" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png"> |
|
|
|
<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png"> |
|
|
|
<img class="preview-img good" align="right" alt="推荐示例" description="标题和正文左对齐,使用了一个视觉起点。" src="https://gw.alipayobjects.com/zos/rmsportal/lVDlIgxvuXSMQvJJVMnu.png"> |
|
|
|
<img class="preview-img bad" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。" src="https://gw.alipayobjects.com/zos/rmsportal/DAhkAEIoXYdljmxsJTjl.png"> |
|
|
|
|
|
|
|
如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。 |
|
|
|
|
|
|
@ -21,7 +21,7 @@ title: 对齐 |
|
|
|
|
|
|
|
## 表单类对齐 |
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png"> |
|
|
|
<img class="preview-img" align="right" alt="冒号对齐示例" src="https://gw.alipayobjects.com/zos/rmsportal/OaTkwGfGxRSFsvAlzZMq.png"> |
|
|
|
|
|
|
|
冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。 |
|
|
|
|
|
|
@ -31,7 +31,7 @@ title: 对齐 |
|
|
|
|
|
|
|
## 数字类对齐 |
|
|
|
|
|
|
|
<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png"> |
|
|
|
<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png"> |
|
|
|
<img class="preview-img good" align="right" alt="正确示例" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png"> |
|
|
|
<img class="preview-img bad" align="right" alt="错误示例" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png"> |
|
|
|
|
|
|
|
为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。 |
|
|
|