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

常用样式设置(3)

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

在七牛云商城的网站页面中,有CDN加速产品的列表。

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

此图像的alt属性为空;文件名为image-323.png

列表中每一项都是相同的元件组成,只是包含的名称、描述以及价格不同。

这篇教程,我们一起模拟列表其中的一项。

如果学习过《常用样式设置(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)