• 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 字体:[增加 减小] 来源:互联网

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

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

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

第一步

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

第二部

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

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

第三步

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

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

第四步

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

第五步

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

第六步

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

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

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

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

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

第七步

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

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

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

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

[[LVAR1.right-200]]

第八步

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

可以给它设置移动边界。

第九步

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

预览:

完成。

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

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

相关文章

  • 用Axure模拟一个数字抽奖的小游戏
  • Axure 8.0实例:复选框的应用
  • Axure7.0教程(三)中继器的使用(3)
  • Axure教程:可使用的计算器demo制作(上)
  • Axure中继器实践:如何制作一个「记忆翻牌」小游戏?
  • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
  • Axure实现多级联动下拉框
  • 五分钟教你快速上手Axure交互设计
  • 用Axure 实现“打飞机”,骚年,来一发(下)
  • Axure教程:如何制作一个不区分大小写的验证码原型?

文章分类

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

最近更新的内容

    • Axure教程:微信面对面建群原型设计
    • Axure实例:Axure Pro 8制作产品需求文档
    • Axure教程 | 商品列表页筛选排序练习
    • Axure教程:滑动鼠标页面自动切换(一)
    • Axure原型设计之轮播图
    • Axure中继器姊妹篇:列表页添加排序和筛选功能
    • 简单6步用Axure绘制相机图标(附源文件)
    • Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
    • Axure 7.0实例:利用Axure制作放大镜原型
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计

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

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