1. 首页
  2. 教程
  3. 动态面板

【Axure9基础教程】动态面板之固定到浏览器

固定到浏览器可以固定动态面板在浏览器中的位置保持不变,仅在浏览器中有效,可以设置水平固定方向、垂直固定方向、始终保持顶层。
【Axure9基础教程】动态面板之固定到浏览器

有两个地方可以设置,一是鼠标右键,另一个是右侧样式设置面板
【Axure9基础教程】动态面板之固定到浏览器

固定到浏览器窗口

勾选之后,开启固定设置,默认水平方向左侧、垂直方向顶部、始终保持顶层

水平固定

  • 会在水平方向上固定元件的位置,无论浏览器宽度如何变化,元件的水平位置不会改变
  • 选择居中时,可以设置距离中部位置的间距,也就是相对于水平居中位置的位移
  • 选择右侧时,可以设置距离右边的边距
  • 有三个选项:左侧、居中、右侧
【Axure9基础教程】动态面板之固定到浏览器

垂直固定

  • 会在垂直方向上固定元件的位置,无论浏览器高度如何变化,元件的垂直位置不会改变
  • 选择中部时,可以设置距离中部位置的间距,也就是相对于垂直居中位置的位移
  • 选择底部时,可以设置距离底部的边距
  • 有三个选项:顶部、中部、底部
【Axure9基础教程】动态面板之固定到浏览器

始终保持顶层

勾选之后元件会始终在最顶层显示,相当于一直置顶的功能

常用场景

固定到浏览器功能,具有非常多的使用场景,也是在网站设计中随处可见的常用功能,下面就举几个实际使用的例子
顶部导航栏
【Axure9基础教程】动态面板之固定到浏览器

固定导航
【Axure9基础教程】动态面板之固定到浏览器

返回顶部
【Axure9基础教程】动态面板之固定到浏览器

弹出框
【Axure9基础教程】动态面板之固定到浏览器

以上这些想必大家都是非常熟悉了,其实还有其他场景也可以用到这个功能,掌握原理之后,就能做出多种多样的效果。

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/661.html

发表评论

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

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息