页面设计——Layout布局

一、布局概念

Layout：布局容器，其下可嵌套 Header Sider Content Footer或Layout本身，可以放在任何父容器中。

Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。

Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。

Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。

Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。

二、基本结构

三、如何使用

基于Layout布局组件：

高度、宽度：可以设定百分比或者固定PX。

顶部、底部：可以设置显隐、宽高、高级设置控制边距、边框、背景、字体等。

左侧、右侧：可以设置显隐、宽高、折叠，高级设置控制边距、边框、背景、字体等。

四、应用场景

1.拥有侧边导航，区别是两边未留边距，多用于应用型的网站

侧边两列式布局。侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。

2.拥有顶部导航及侧边栏的页面，多用于展示类网站

3.最基本的『上-中-下』布局

一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率。

4.固定头部

一般用于固定顶部导航，方便页面切换。