hb网页设计框架布局 第1篇
为什么后台页面框架的布局要是这个样子呢?
一是这个页面框架非常清晰的分配了功能和信息的布局,二是这样的框架可以和角色权限完美兼容。
在角色权限设计的时候,我们可以用一张表将系统的所有角色对应的菜单列出来。
接着,在角色权限功能-配置新角色时,页面的按钮权限通过功能、操作两块进行勾选即可。
最终,用户登录后台页面,看到的就是与之权限对应、整齐划一的按钮。
题图来自 Unsplash,基于CC0协议
hb网页设计框架布局 第2篇
位置:在功能栏下方
数据字段的罗列,必须要的字段有以下5个,其余字段看用户需要增添。
字段的顺序从左往右一般为:编号/编码/ID、名称、状态、类型、时间,其他字段顺序根据用户查看频率排列,用的越频繁越靠左。
注意事项
此外,有些后台列表会将最左边1-2列固定,因为数据字段很多,避免用户查看后面的值时忘了前面的。
位置:在列表的最后一列
这里的功能按钮,都是对应一条数据进行操作的。按钮类型分为以下5种
hb网页设计框架布局 第3篇
效果图: 这里需要提醒的一点是,需要注意一下是否设置容器高度,如果没有设置那么容器高度会随内容的增加而改变,在介绍这些属性时,我都没有设置容器的高度,但是当里面的项目是以列排列的话,容器会相应变宽。这里大概列举了三个容器的属性值来说明flex布局,其他属性大家可以下来自己进行尝试。
总结一下: 对于上面介绍的三种页面布局方式根据各自所需进行选择,这里比较推荐使用流失布局和弹性布局,流失布局在使用 的时候根据浏览器缩小整个布局不会发生变化,而弹性布局是CSS3引用的一种比较方便简单的布局方式,使用弹性布局会比使用float、position来布局显得方便。