全屏宽的图片或横幅 | Full Width Image or Banner

在本教程中,你将学习如何制作一个适应浏览器窗口宽度的图片或色条。【原型预览】

1、元件设置
  1. 打开一个新的RP文件,双击页面面板下的Page 1将其在画布中打开。
  2. 元件库中拖拽一个动态面板元件到画布中。
  3. 样式面板下,勾选100%宽度(仅浏览器中有效)
2、用颜色或图片填充动态面板

使用样式面板下的填充选项来设置动态面板的背景:

  • 点击颜色选项并在颜色选择器中选择一种颜色,可以为动态面板设置颜色背景。
  • 点击图片选项并在电脑中选择一张图片,可以为动态面板设置图片背景。

注意:在下拉列表中将图片设置为拉伸,以保证它可以填满动态面板的整个宽度。

3、预览页面
  1. 预览页面,图片将会填满浏览器窗口的整个宽度。
  2. 尝试调整浏览器窗口的大小,你会注意到图片也会自动适应窗口宽度。
其他信息和提示

全屏宽的轮播图

要实现全屏款的轮播图,将本教程的方法和轮播图教程的方法结合起来就可以。给动态面板的每个状态设置不同的背景图片,然后使用轮播图教程的方法使图片轮流播放。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注