网页布局

网页布局就是以最适合浏览的方式，将图片、文字、动画等按照一定规律遵循一定的形式美法则，放在不同位置。

按照定义方式分类

网页布局方式分为固定式和响应式。

按照能否适应屏幕大小，构成的网页原件的定义方式分为两种，一种是像素型，另一种是百分比型。由不同网页原件定义方式可构成不同的网页布局形式，一种是按像素定义的固定式，另一种是按百分比定义的响应式。

1、固定式

把这种由像素定义原件的网页布局方式称为固定式，是因为网页中的内容宽度是用像素这种绝对单位定义的，当把网页窗口缩小时，界面会有一部分内容被遮挡，用户需要浏览被遮挡的信息时，需要使用页面下端的滚动条。这种网页很常见，如站酷，简书

网页端全屏显示 在网页端缩小窗口

2、自适应

自适应布局，即这些页面内容是由百分比这种相对单位定义的，能够随着窗口显示大小的比例来调整在页面所占的比例大小，所以能够适应多个终端，不同分辨率的屏幕，无论是手机、平板还是电脑，都能够很好地适应，给用户良好的体验，就拿优设为例

网页端全屏显示 在网页端缩小窗口

按照页面排版方式分类

网页布局分为国字型，卡片式，瀑布流，海报型，标题正文型，综合框架型

1、国字型

页面上方有横导航栏，侧导航栏两侧分布，网页最底端分布可点击的超链接，适合内容丰富、信息量大的大型网站，如天猫，苏宁易购

天猫首页 苏宁易购 首页.png

2、卡片式布局

导航栏一般为横向或纵向，有的为隐藏式导航栏，导航栏一般有一个或两个，网页主要信息分成若干个等比例小方块或者以这些小方块拼合而成的方块组成，一般为等距分布，这种布局多运用于设计类作品展示，或者一些多图片的视频网站，如dribbble、优酷

dribbble 首页 优酷 首页

3、瀑布流

导航栏一般为横向，突出搜索功能与图片展示，一般应用于图片素材网站，图片不用放大加载就可以看到全貌，用户可以更直观地找到自己想要的信息，如花瓣网,pinterest

花瓣 最新 pinterest 首页

4、海报式

这种布局一般出现在一些时尚、个人、工作室网站的首页，突出图片，简要的品牌logo形象周围加文本链接进行点缀，真正做到少而精。这种布局处理得当会十分简洁大气、个性化。突出展示重要的产品或作品，给人耳目一新的感觉。如Zara,星巴克

Zara 首页 星巴克 首页

5、标题正文型

一般是文章、登录页等采用，里面包含大量的文字信息，类似以PDF文档，百度文库，微信推送的文章，知乎里面的文章详情均采用这种布局。是最为常见的布局方式，还有world文档编辑的文本······

微信推文 知乎上的一篇文章

6、表格式布局

一般为检索性或者导航信息网站，里面涵盖大量的信息分类，便于查找信息，表格栏一般隐藏，如114网址导航

114 网址导航 首页

7、综合框架型

包含上面介绍的部分布局方式，综合信息比较多的，如中国青年网

中国青年网 首页

总结

网页布局分类方式很多，可以从版式布局切入，或者是由于实现工具的不同导致的布局变化样式的差异导致的不同布局切入...手机上还有九宫格、竖排列表、全屏式....