在七牛云商城的商品类目中有云短信套餐的商品卡片。
在本文中,我们逐步的将这个商品卡片模拟出来。
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)