网页设计页面布局 第1篇
模块就是我们的设计区块，可以是一段文字、一张图片，又或是其他元素。其中，背景/点缀元素并不能算作是设计模块，所以无需严格遵循栅格系统。
以 12 栅格系统为例，它可以根据业务需要被等分成2、3、4、6、12份，也可以被不对称分割为 1:2:1、1:3:2、2:3:3、1:2、3:1、1:5、3:5 等比例。设计者可以根据实际需求，自由组合。
网页设计页面布局 第2篇
背景层样式固定，在页面中永远置于页面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
背景层可分为纯色背景、图片背景。
纯色背景常用颜色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。图片背景又包括图形、文字、图片等元素构成的背景，主要用于装饰页面、引导视觉。
网页设计页面布局 第3篇
缺点：
以上就是今天和大家分享的设计师必收藏的 10 种前端页面布局，这些布局模式，或者说框架，几乎是 “约定俗成”的，它们为用户所熟知，本身也更贴合用户对内容的识别模式和使用习惯。巧妙的运用一些前端页面布局模板，也能帮你快速提升工作效率，即时设计就为设计师提供了海量精美的设计资源，一键套用，简直不要太方便！掌握了这些工作小技巧帮你轻松搞定下一个 case！
网页设计页面布局 第4篇
基础布局包括：上下布局、左右布局、“T”型布局。这三种布局结构相对简单且常见。
上下布局：上半部分为导航模块，下半部分为主内容模块。导航栏宽度限制了导航的数量和文本长度，适用于导航较少、页面篇幅较长的网站。是使用场景最多的框架布局。
左右布局：页面左侧为全局导航模块，右侧为主内容模块。这种布局提高了导航的可见性，也有利于页面之间的切换，适用于结构简单的网站。
“T”型布局：常用于社交文章类网站，顶部全局导航承接了所有子入口的功能，内容区域再划分成菜单栏（或侧边栏）、主内容模块两部分。
网页设计页面布局 第5篇
指当前任务或内容相关的临时出现层，优先级最高。一般承载当前需要临时处理的任务，如：对话框组件。
对话框以滑出或者弹出的形式展现给用户，底部内容层不可操控，被蒙版遮罩禁用，在操作需要聚焦的分支流程时使用。
三、栅格系统
本模块从关于栅格、模块、间距系统、关于适配这4方面进行阐述。
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律。
熟练地运用栅格系统，不仅可以减少决策成本、提高设计理解力，还可以实现响应式布局、加速团队协作并保证视觉还原。
网页设计页面布局 第6篇
响应式不是简单的等比缩放。我们要在保证易用性的基础上，根据内容的重要性灵活布局。流动布局下的模块处理方式分为 5 种：挤压-拉伸、左右-上下、 删减-增加、变换位置、隐藏-展开。
挤压-拉伸
模块内容随着屏幕宽度进行挤压或拉伸。
适用场景：适用于文本内容、纯色背景、按钮、填选框等伸缩不会发生变形的元素。
左右-上下
模块内容从左右排列变为上下排列。
适用场景：适用于图文列表、主内容+右侧推荐等所有左右排版的组合。
删减-增加
移动端空间有限，需对不重要的内容（如重复的快捷入口、推荐链接、相关的广告等）进行删减。
不同于桌面端网页，移动端可视区域相对较小，且受使用环境等因素的影响较大（如在公交、地铁中，内容过多/多小，不易阅读及操作）。因此，删减掉不重要的内容，保留主线任务内容极为重要。
可删减的相关内容不一定只出现在侧边栏，它也会穿插在主要内容模块附近，以上仅为某种情况的示例，切勿以偏概全。
实际网页应用示例：
变换位置
根据设备的宽度、内容的重要层级等变换模块的显示位置。
适用场景：侧边栏有次要内容模块（不可删减的网页），适配至移动端，可将两侧内容移动至页面底部（主要内容下方）。（网页端两栏、三栏布局，适配至移动端变为单栏布局）
PC端多栏布局适配至移动端单栏布局中时，模块的上下顺序由模块的重要层级排序决定。重要级别越高，显示位置越靠近页面顶部，反之靠近页面底部。
实际网页应用示例：
隐藏-展开
内容过多时可选择收起，以弹窗或者单独一个页面显示。