• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure实例:顶栏和侧边栏的固定和窗口自适应

Axure实例:顶栏和侧边栏的固定和窗口自适应

作者: @Carota 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure侧边栏,qq聊天窗口侧边栏,聊天窗口侧边栏,axure实例,axure实例下载等相关知识, @Carota 希望在学习及工作中可以帮助到您

一篇关于Axure的干货教程,关于顶栏和侧边栏固定以及窗口自适应的设计过程,希望对大家有所启发。

在后台系统中,常有侧边栏,不随页面内容的滚动而变化,且高度与浏览器等高。

第一步

新建一个母版1 做侧边栏,在母版中新建两个动态面板,一个作为背景使用,一个放置标题使用。

第二部

(背景)动态面板的颜色设置为 ?与标题背景色一致。

(标题)动态面板内新建元件作为标题。

第三步

将(标题)动态面板 与(背景)动态面板对齐。

设置 (背景)动态面板的高度与浏览器高度一致。可实现左侧栏高度自适应。

第四步

将(背景)动态面板 和(标题)动态面板 ?固定到浏览器,实现内容滚动时,侧边栏不会跟随滚动。

第五步

新建一个母版2 做顶栏。在母版中新建两个动态面板,一个做为背景,一个作为登录用户名。

第六步

设置(背景)动态面板和(用户名)动态面板对齐,

(背景)动态面板的颜色设置为 ?与(用户名)背景色一致。

(用户名)动态面板内新建元件为 用户名称。

设置 (背景)动态面板的宽度与浏览器宽度一致。可实现顶栏宽度自适应。

顶栏宽度自适应也可以选择 动态面板属性 ?勾选(100%宽度)

第七步

要使(管理员)三个字,随着浏览器窗口的变化而跟随一直在右边。

可设置(管理员)的位置为 (背景)动态面板的右边位置 减去 200像素(因为我设置的 管理员 三字宽度为120像素,所以减200就使得 管理员 三字一直在浏览器范围内,并距右边距为80像素。)

选择刚刚添加的“局部变量”(可在 添加局部变量时 自行改名)。

设置局部变量(就是 背景 动态面板) 的右边(right)减去200像素。

[[LVAR1.right-200]]

第八步

(管理员)三字可以随浏览器窗口大小而移动,需要给它限定一个范围,不能跑到最左边。

可以给它设置移动边界。

第九步

与侧边栏同样的方法,固定顶栏到浏览器,使其不随内容的滚动而滚动。

预览:

完成。

您可能想查找下面的文章:

  • Axure实例:顶栏和侧边栏的固定和窗口自适应

相关文章

  • 2017-06-14Axure教程 | 商品列表页筛选排序练习
  • 2017-06-13Axure 7.0实例:利用Axure制作放大镜原型
  • 2017-06-13Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)
  • 2017-06-13Axure教程 | 详解中继器的九宫格
  • 2017-06-14Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
  • 2017-06-13如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
  • 2017-06-13Axure8.0实例:简单实用的验证码
  • 2017-06-14Axure7.0教程(四)中继器的使用(4)
  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure实战:滑动拼图解锁教程
    • Axure教程:实现倒计时获取验证码效果
    • Axure RP8 动态面板之折叠和展开(例如菜单栏)
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure教程:动态面板实现广告循环播放
    • Axure实例:Axure Pro 8制作产品需求文档
    • Axure 制作下拉框省市县三级联动
    • Axure教程-锚点滚动效果
    • 自定义微信元件库:Axure基本元件的应用(下)
    • Axure7.0教程(八)函数介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有