最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

常用样式设置(2)

教程 小楼一夜听春语 7766浏览

在七牛云商城的商品类目中有云短信套餐的商品卡片。

地址:https://qmall.qiniu.com/

在本文中,我们逐步的将这个商品卡片模拟出来。

1、添加一个无边框矩形元件,宽度为“284”像素,高度为“110”像素,输入两行文字。

第一行文字为粗体14号黑色文字。

第二行文字为12号灰色文字。

除此之外,其它的设置内容见下图。

2、添加一个矩形元件,宽度为“284”像素,高度为“202”像素,去除边框后输入文字内容。

每段文字内容前方先输入9个空格。

具体的样式设置见下图。

再将对号图标摆放在适合的位置上。

对号图标来自阿里巴巴矢量图标库,请参考《Axure的海量图标库》获取。

3、添加一个矩形元件,宽度为“284”像素,高度为“40”像素,去除边框后输入数字“34.00”。

元件的文字颜色为橙色。

输入的文字中“34.”部分为“22”号字,划选这部分文字之后,在字号选择框中输入“22”。

输入的文字中“00”部分为“14”号字,划选这部分文字之后,在字号选择框中选择“14”的选项。

具体的样式设置见下图。

4、添加一个矩形元件,宽度为“284”像素,高度为“310”像素,置于所有元件的最底层。

为这个矩形元件设置阴影。

阴影的颜色为浅灰。

因为水平方向两侧都有阴影,所以阴影的X轴不需要偏移,将它的数值改为“0”像素。

到这里,一个与原网站几乎一样的商品卡片就完成了。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 常用样式设置(2)