网页设计布局模块 第1篇
指当前任务或内容相关的临时出现层，优先级最高。一般承载当前需要临时处理的任务，如：对话框组件。
对话框以滑出或者弹出的形式展现给用户，底部内容层不可操控，被蒙版遮罩禁用，在操作需要聚焦的分支流程时使用。
三、栅格系统
本模块从关于栅格、模块、间距系统、关于适配这4方面进行阐述。
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律。
熟练地运用栅格系统，不仅可以减少决策成本、提高设计理解力，还可以实现响应式布局、加速团队协作并保证视觉还原。
网页设计布局模块 第2篇
中断点，是网页在收缩的过程中的最小范围。当网页宽度到达这个范围以后，网页内部的元素就要进行相应的变化，用来适应网页尺寸的变化。
中断点是基于页面具体内容、主流用户设备的分辨率、用户规模和成本计算等设置的。在拉升/压缩页面的过程中，无法使用相同的布局且必须改变内容展现方式时，产生的关键尺寸节点即可作为中断点。
以下断点以谷歌 Material Design 和 Bootstrap 的断点为例，仅作参考：
中断点越多会让网页变得更加细腻、流畅。然而，当研发时间有限、对显示要求较低时，可选择常用的断点设置即可。
以下我们挑选了三个常用的中断点数值作为参考：
网页设计布局模块 第3篇
背景层样式固定，在页面中永远置于页面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
背景层可分为纯色背景、图片背景。
纯色背景常用颜色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。图片背景又包括图形、文字、图片等元素构成的背景，主要用于装饰页面、引导视觉。
网页设计布局模块 第4篇
由于用户的页面显示设备，不同形态的布局，适配方式也不同。
Fixed：表示固定宽度，元素宽度为定值，不受页面宽度的影响；Auto：表示自适应宽度，元素宽度随着页面宽度的缩放而缩放；Min：表示最小宽度。
基础布局
上下布局：内容模块可设计成固定宽度、全屏宽度两种视觉布局。
固定宽度的上下布局，固定宽度值（Fixed）设为 1200px 即可满足多尺寸屏幕适配需求，Auto 区的宽度则由屏幕的大小决定；全屏宽度的上下布局，需设置内容区的左右最小边距（Min）,以防止内容区的信息被遮挡。
左右布局、“T”型布局：内容区都是自适应宽度（Auto），两侧的导航栏、菜单栏、侧边栏均为固定宽度（Fixed）。
扩展布局
“C”型布局、“口”型布局中，内容区都是自适应宽度（Auto），两侧的导航栏/菜单栏、侧边栏均为固定宽度（Fixed）。
四、Web页面适配
本模块从响应式、中断点、布局类型、流动布局下的模块处理、自适应这 5 方面进行阐述。