当前位置：
现在，越来越多的人想要建立自己的网站，通过自助建站系统就可以自己进行网页制作了。这无疑是一件好事，但是，很多设计师，尤其是新手设计师或者压根儿就不是设计师的小白，都在网页设计上走过不少弯路。网页制作最重要的就是网页布局，先布局，后细节，只有在选择了合适的网站布局以后，才可以顺利的进行接下来的工作。你要问网站布局有哪些？今天，深圳网站建设就为你介绍下下面几个常见的网页布局类型。
一、固定布局
固定网页布局（见图1)是指网站内容被一个固定宽度的容器包裹，容器内的区块以像素作为页面的基本单位，只需设计一套尺寸，也只展现一种布局。固定网页布局不管用户使用的是PC端还是移动端，也不管屏幕分辨率如何变化，大家看到的都是固定宽度的内容。
图1 固定网页布局
不足：不能根据用户的屏幕尺寸做出不同的表现，大屏幕上会出现大量空白，而小屏幕上可能会出现水平滚动条影响用户体验。
如某某的官网采用了该布局方式，其二级页面固定宽度布局为1093像素，无论用哪种设备浏览该网站，其布局都不变，可是用手机查看时网站时界面却未能全部显示完整。
二、流动布局
流动网页布局（见图2)是将大多数组件（包括主容器）都以百分比的形式作为页面的基本单位，根据用户的屏幕分辨率自适应，完美地利用有效空间展现最佳效果。使用这种布局方式，无论终端分辨率尺寸如何变化，网页都能自适应宽度。不过，单纯地使用流动布局的页面比较少见，它可以搭配固定布局的局部功能使用，还可以为响应式布局提供局部版式的自适应。
图5.7 流动网页布局
不足：宽度使用百分比定义，而高度和文字大小等大都是用px来固定，在较大分辨率下的显示效果会变成有些页面元素宽度被拉得很长，但是高度、文字大小还是和原来一样（即这些东西无法变得“流式”），显得非常不协调。
如国外某后台管理界面（见图3）布局上就结合了固定布局与流动布局两种方式：其左侧全局导航固定宽度为235像素；右侧内容区域则运用了百分比的形式来控制各元件的宽度，最终保证了不同分辨率设备上视觉空间的均衡布局。
图3 国外某后台管理界面
三、响应式布局
响应式网页布局（见图4）是分别为不同的屏幕分辨率终端所定义的布局。其布局原理是网页根据屏幕或浏览器的宽度选择最合适的那套进行布局，同时在每个布局中应用流式布局的理念，让页面元素宽度随着窗口调整而自动适配。
图4 响应式网页布局
不足：一是由于代码素材多，导致加载速度慢；二是响应式布局适用的网站类型有限。由于它的特点是适应不同终端、不同尺寸屏幕分辨率上的信息版式布局。由于图片、文字信息的栅格响应比较容易，因此响应式布局比较适用于内容较少、结构简单的公司活动宣传网站，而不适用于内容、功能复杂的电子商务类网站等。
如星巴克官网（见图5)就使用了响应式网页布局，即便是使用不同的终端、改变浏览器的宽度，其页面版式也会通过字段自动换行，图片自适大小变化而呈现出与设备宽度匹配的最佳状态。这种因宽度判断的不同界面布局自适应地改变的节点被叫作断点。目前大多网站选择响应式断点的设计模式，主要有基于设备和内容优先两种。
图5 星巴克官网
第一种基于设备的模式是通过主流设备的类型及尺寸来确定布局断点（见图6），从而设计多套样式，再分别投射到响应的设备。如你的页面主要兼容的设备为手机、平板、桌面电脑3种，那么就需要根据主流手机分辨率尺寸设置两个断点。下图中设置的断点是720像素与990像素，即若你的屏幕宽度小于720像素的将会出现A的版式，而当宽度大于等于720像素且小于990像素的将会出现B的版式，大于990像素则会显示C的版式。
图6 基于设备确定断点
图7 基于内容确定断点
图7 基于内容确定断点
当前文章链接：/construction/design/1858.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
