网页布局方式有哪些

网页布局常用的方式有这些：1.固定布局。为网页设置一个固定的宽度，通常以px做为长度单位;2.流式布局，为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整。

1、固定布局。为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

(资料图)

这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。

2、流式布局(Liquid Layout)。为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位(通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示)，高度大都是用px来固定住。流式布局的代表作是栅格系统(网格系统)。

例如设置网页主体的宽度为80%，min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真)。

缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调

3、栅格化布局。将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

比如像 bootstrap，foundation 这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。

网页布局分哪几个部分

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域。头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。

2. 菜单导航区域。菜单导航条包含了一些链接，可以引导用户浏览其他页面。

3.内容区域。内容区域一般有三种形式：

1 列：一般用于移动端。

2 列：一般用于平板设备。

3 列：一般用于 PC 桌面设备。

不相等的列：不相等的列一般是在中间部分设置内容区域，这块是最主要的，左右两侧可以作为一些导航等相关内容，这三列加起来的宽度是100。

4. 底部区域。底部区域在网页的最下方，一般包含版权信息和联系方式等。

常用的网页流程布局介绍

需要注意的是，为了提高网页制作的效率，布局时通常需要遵循一定的布局流程，具体如下。

1) 确定页面的版心宽度

版心指的是页面的有效使用面积，是主要元素以及内容所在的区域，一般在浏览器窗口中水平居中显示。在设计网页时，页面尺寸宽度一般为1200~1920像素。但是为了适配不同分辨率的显示器，一般设计版心宽度为1000~1200像素。

例如屏幕分辨率为1024×768像素的浏览器，在浏览器内有效可视区域宽度为1000像素，所以尽量设置版心宽度为1000像素。设计师在设计网站时尽量适配主流的屏幕分辨率。常见的宽度值为960px、980px、1000 px、1200px等。

2) 分析页面中的模块

在运用CSS布局之前，首先要对页面有一个整体的规划，包括页面中有哪些模块，以及模块之间关系(关系分为并列关系和包含关系)。例如，图3所示为最简单的页面布局，该页面主要由头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)五部分组成。

3) 控制网页的各个模块

当分析完页面模块后，就可以运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。