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