网页设计中的布局 第1篇
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
网页设计中的布局 第2篇
流动布局可以看做是静态布局的动态版，响应式布局可以看做是几个不同尺寸的流动布局，在每个流动布局之间进行自适应。流动布局、响应式布局、弹性布局和flex布局都能实现自适应的效果，只不过弹性布局是用em/rem为单位，流动布局和响应式布局是以百分比为单位，flex由于兼容性问题，PC端不太常用。
各种布局不是绝对的，可以综合使用，目的都是使页面在不同分辨率的设备上实现更好的用户体验，针对不同性质的网站采用合适的布局方式。
我这里将栅格设计放了进来，但实际上，页面布局可以基于栅格也可以不基于栅格，完全看设计师个人和实际工作场景了。
----------------------------------------------------------------------------
看完布局，你会发现，很多国内常用的布局都和栅格有关，有些网页设计师在做的时候也喜欢用栅格来规范自己的设计稿，所以我简单的梳理了一下栅格的小知识，希望对大家有用。
首先，栅格化设计（grid-design ）不等于栅格化开发（css grid ）。我之前一直以为用栅格就要实现网页的响应式，由于我们是to b类的网站，所以刚开始很抵触，总觉得没法定宽设计某个模块，后来查了些资料才发现，这是两回事。
栅格化设计是针对设计师而言，主要是为了提高网页的规范性和统一性，可以不考虑页面的响应式；而栅格化开发，是针对开发人员，特指前端攻城狮使用的css框架，用来实现页面的响应式布局。也就是你可以按照栅格去出设计稿，但不一定基于栅格开发，基于栅格开发意味着需要实现网页响应式布局。
那么栅格是什么，想必大家都很清楚，就是将网页划分为几个等分栏。大概就长下面这样
栅格包括列宽（column）、间隔（gutter）和外边框margin，gutter是左右均分，分别位于列宽的两侧，margin是位于整个网页的两侧的空白区，由1/2的gutter和一个padding组成，一般来说网页的总宽度是不包含左右两侧的margin的。
网页设计中的布局 第3篇
轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。
总结
好的网页设计具有很强的适应性并且对用户来说始终是友好的。
遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。
文章分享的是常见的布局形式，如果你有其他不错的布局分享，也可以留言分享哦。