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

《Axure实例：顶栏和侧边栏的固定和窗口自适应.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Axure实例：顶栏和侧边栏的固定和窗口自适应　　一篇关于Axure的干货教程，关于顶栏和侧边栏固定以及窗口自适应的设计过程，希望对大家有所启发。　　　　在后台系统中，常有侧边栏，不随页面内容的滚动而变化，且高度与浏览器等高。　　第一步　　新建一个母版1做侧边栏，在母版中新建两个动态面板，一个作为背景使用，一个放置标题使用。　　　　第二部　　（背景）动态面板的颜色设置为与标题背景色一致。　　（标题）动态面板内新建元件作为标题。　　　　第三步　　将（标题）动态面板与（背景）动态面板对齐。　　设置（背景）动态面板的高度与浏览器高度一致。可实现左侧栏

2、高度自适应。　　　　第四步　　将（背景）动态面板和（标题）动态面板固定到浏览器，实现内容滚动时，侧边栏不会跟随滚动。　　　　第五步　　新建一个母版2做顶栏。在母版中新建两个动态面板，一个做为背景，一个作为登录用户名。　　　　第六步　　设置（背景）动态面板和（用户名）动态面板对齐，　　（背景）动态面板的颜色设置为与（用户名）背景色一致。　　（用户名）动态面板内新建元件为用户名称。　　设置（背景）动态面板的宽度与浏览器宽度一致。可实现顶栏宽度自适应。　　　　顶栏宽度自适应也可以选择动态面板属性勾选（100%宽度）　　　　第七步　　要使（管理员）三个

3、字，随着浏览器窗口的变化而跟随一直在右边。　　可设置（管理员）的位置为（背景）动态面板的右边位置减去200像素（因为我设置的管理员三字宽度为120像素，所以减200就使得管理员三字一直在浏览器范围内，并距右边距为80像素。）　　选择刚刚添加的“局部变量”（可在添加局部变量时自行改名）。　　　　设置局部变量（就是背景动态面板）的右边（right）减去200像素。　　[[LVAR1.right-200]]　　　　第八步　　（管理员）三字可以随浏览器窗口大小而移动，需要给它限定一个范围，不能跑到最左边。　　可以给它设置移动边界。　　　　第九步　　与侧

4、边栏同样的方法，固定顶栏到浏览器，使其不随内容的滚动而滚动。　　预览：　　　　完成。