在七牛云商城的网站页面中，有CDN加速产品的列表。
列表中每一项都是相同的元件组成，只是包含的名称、描述以及价格不同。
这篇教程，我们一起模拟列表其中的一项。
如果学习过《常用样式设置（2）》这篇教程，你会发现这两篇教程要完成的内容几乎差不多。
虽然差不多，但是还是有区别。
在这篇教程中，你能学到更多。
一、阴影背景
首先，在画布中放入一个矩形元件，颜色不限，反正藏在下面躲在里面你又看不见。
矩形元件的宽度为210像素，高度为148像素，并为它设置阴影。
因为水平方向两侧都有阴影，所以将X轴的阴影偏移设置为“0”。
而垂直方向只有下方有阴影，所以将Y轴的阴影偏移设置为“3”。
二、商品信息
放入一个矩形元件，填充颜色为浅灰色，颜色代码“FAFAFA”，宽度为210像素，高度为108像素。
设置蓝色的边框，颜色代码“00A0DE”，并且只保留上方的边框。
然后，在矩形中输入商品的标题，换行后再输入商品的描述。
商品标题是粗体14号字，文本左对齐，行间距为“19”像素。
温馨提示：行间距是指每行上边缘与下一行上边缘的距离，而不是两行之间缝隙的距离。
商品描述是12号灰色文字，颜色代码“AAAAAA”，行间距为“47”像素。
另外，还有元件边距的设置，两侧为“16”像素，顶部为“14”像素。
三、折扣信息
放入一个图片元件，导入折扣图标。
元件的宽高均为“46”像素，摆放在商品信息右上方。
注意不是与商品信息的矩形重合，而是向上与向右分别移动5像素。
再放入一个文本标签，输入折扣文字，文字颜色为白色，字号设置为“10”。
文字水平与垂直方向均选择居中。
最后，将文本标签旋转“45”度，摆放在折扣图标上。
注意，折扣文字是10号字，在某些浏览器中不能正常显示，需要在浏览器设置中将默认最小字号设置为10或更小。
如果找不到浏览器的设置，还可以在折扣文字元件上点击鼠标右键，在[变换形状]的选项中，将元件[转换为图片]。
四、购买按钮
购买按钮是一个矩形元件，宽度为“210”像素，高度为“40”像素。
元件的边框颜色代码为“F2F2F2”。
元件上的文字有不同的字号，其中整数与小数点部分是22号字，两位小数部分是15号字，“元”字是“13”号字。
并且，数字与汉字直接有两个空格。
其它设置请参考《动态样式的按钮》。
到这里，我们就完成了一个列表项的制作。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 常用样式设置（3）