网站设计怎么布局（网站设计怎么布局好看）

今天给各位分享网站设计怎么布局的知识，其中也会对网站设计怎么布局好看进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、网页布局方法
• 2、优秀网站首页设计的四大布局技巧
• 3、网页设计的布局有哪几种

网页布局方法

众所周知，屏幕的尺寸千差万别。在考虑网页布局时，主要考虑：

同时，网页布局还应该综合考虑设计和实现上的问题：

虽然屏幕宽度、高度、宽高比千差万别。但是网页的组织方式基本上是以宽度适配，高度延伸为主。

当然，也有部分网页是需要考虑高度适配的，如视频网站的全屏播放。

这里主要讨论的是宽度适配。高度适配可以做类似处理，在这里就不做赘述。

网页基础的布局主要有三种： 静态布局、流失布局、弹性布局 。

静态布局

静态布局采用像素（px）作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。

流式布局强调的是适应屏幕宽度的变化。在实际应用中，经常是设置成宽度适应，而高度不变。当页面变大时，页面布局相当于被横向拉宽了。

弹性布局

弹性布局采用rem/em等相对单位，rem/em是相对的单位会随着屏幕变化而变化。

弹性布局更强调的是在不同的条件下，显示内容除了大小不一样，其布局是一致的。也就是说，弹性布局会宽度和高度都等比放大。当页面变大时，整个页面等比放大了。

假设有两个屏幕尺寸，一个是640px，一个是1080px。有个元素在640px页面下的尺寸是64px。

如果是静态布局，在640px屏幕下，元素被设置为64px。到了1080px屏幕下，依然是64px。元素的大小不变。

如果是流式布局，页面元素会被设置成640px屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px * 10% = 108px了。元素大小随着屏幕变大了。

如果是弹性布局，假设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 * 27 = 108px。元素大小也随着屏幕变大了。

静态布局

静态布局没办法响应页面的变化，这个是优点也是缺点。

缺点是当屏幕变大时，会出现空白区域。当屏幕变小时，需要通过滚动条来浏览页面内容。

优点则是因为静态页面可以在任何条件下都按页面的设计进行显示，其适配性的问题最少，实现工作量最小。

实际上，目前很多大型的网站都是采用静态布局的。就是看中了其广泛的适配性，几乎不存在什么适配性问题，任何用户在任何条件下打开页面都显示的都是一样的。

虽然说屏幕尺寸种类繁多，但是在一定程度上屏幕宽度大体还是在一个范围之内的。应用静态布局时，可以适当放弃适配一些市场占有率很少的小屏幕显示器。

流式布局

流式布局大部分都是采用宽度适配，固定高度的方式。也就是说，页面此次被横向拉长或缩小了。

这样做的优点是页面可以适配屏幕的宽度，可以充分利用屏幕的面积，不至于出现大量空白的情况。

其缺点是，当屏幕过于宽时，页面会被拉得宽，整体显得不太协调。当屏幕过于窄时，页面会被缩得很小，部分元素的显示会出现问题。

为了规避这个问题，在实际应该上。一般会设置一个最大和最小适配宽度。当屏幕超过了最大最小宽度时，页面将不再适配屏幕。

弹性布局

弹性布局采用的是宽度和高度同时放大的方式，力求让页面在不同屏幕下在布局上是一致的。

弹性布局兼顾了静态布局和流式布局的优点，一方面其可以适配屏幕的变化，另一方面不会导致页面被横向拉宽导致比例不协调，在一定程度上保证页面布局和原设计一致。

但是这么做也带来了新的问题，页面加大会导致部分元素被拉伸，特别是图片元素，会导致失真。

所以弹性布局经常也采用了和流式布局一样的方式，设置最大最小响应尺寸，超过这个尺寸则不继续响应。

同时，针对图片失真问题，可以通过上传多个尺寸的图片进行解决。不同的屏幕尺寸响应不同的图片。不过因此也会带来了大量的维护工作，需要权衡。

由于静态布局特点，一般下列情况下会采用静态布局：

流式布局比较适用于文字型的页面。在流式布局中，虽然文字大小不会变化，但是文字段落仅需要改变换行就可以跟着宽度变化而变化。

如果屏幕尺寸变化不大，则可以考虑采用弹性布局的方式。既可以适配，又不改变页面的布局。

事实上，也有一些页面采用了几种不同的布局方式。例如，采用静态布局的侧边栏，而采用流式布局的主区域。

上文也讨论了流式布局和弹性布局不适合对尺寸跨度过大的屏幕进行适配。所以，基本上也都采用了限制最大最小适配尺寸，在适配范围内则采用流式布局或弹性布局进行适配。超过了适配范围，则变成静态布局的方式，不再响应屏幕的变化。

上面讨论的几种网页的基础布局一定程度上解决了页面适配的问题。但是随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现加大了屏幕尺寸的跨度。而上面讨论的几种网页布局恰恰是不支持屏幕尺寸跨度太大的情况的。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

自适应布局

自适应布局为不同尺寸的屏幕准备多套方案，根据不同的屏幕尺寸确定一套显示方案。具体到每一套方案，则可以用上述几种基础的网页布局进行适配。可以看成是一系列的基础布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动端等几套适配方案，然后设定屏幕适配的范围。具体显示时，会根据屏幕尺寸匹配适配范围，选定其中的一套方案进行显示。

但是自适应布局一般情况下不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏掉一些横向的页面元素，以达到适配的目的。有一些常见的处理方法：

响应式布局

响应式布局则是设置一套方案，通过调整行列的显示进行适配。当屏幕较大时，各个元素显示成一行，当屏幕变小时，转换转化成以列进行显示。

响应式布局因为需要换行来适配屏幕。所以其在页面缩小的过程中，页面布局会做改变。当页面缩小时，页面会先以流式布局或弹性布局的方式进行缩小，直至页面宽度再也无法适配时，横向显示的元素换行成纵向显示。

自适应布局

自适应布局需要设计是一系列页面布局。所以，在设计和实现上需要更多时间。

但是，因为其可以针对不同屏幕设计不同方案，方案之间相对独立。其限制较少和自由度却是比较高的。

但是注意，自适应并非几套完全不同的方案的组合，一般情况下，其主体部分是一致的。只是对部分横向的元素进行独立设计。

响应式布局

响应式布局只需要一个页面布局即可完成屏幕适配，其实现工作量比较小。但是，因为需要用一套方案适配所有屏幕尺寸。所以，在设计上需要考虑的因素比较多。

总的来说，自适应布局适用于较为复杂的页面，而响应式布局适用于页面结构简单的页面。

因为移动端和PC端的巨大差异，包括屏幕尺寸和操作方式都不尽相同。还有一种解决方案将各个端的页面单独进行设计。

这种方案优点是各个显示端可以自由的根据自身情况进行设计，从而设计出专门针对各个显示端的方案。这无疑给设计师和用户体验带来了巨大的好处。

但是这种方案带来了成倍的设计和实现工作量。同时，在产品投入使用后需要两套人马分别维护其内容。

如果您有如下的情况，可以考虑使用移动端和PC端分离的设计：

写在最后

并没有十全十美的方案，根据自身情况进行选择才是硬道理。

作为设计者，千万不要忘记了后期技术的实现、测试，运营人员的维护等工作量。同时也不要忘记了项目后期的迭代的难度。一句话，选择适合的才是最重要的。

要知道，看似很土的静态布局到现在仍然有大量的应用。千万不要做过度的设计。

优秀网站首页设计的四大布局技巧

1、响应式布局

响应式网站设计布局，指的是一种网络页面设计布局，它所遵循的理念是:集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

2、一屏以内

一张照片代表着一个世界，一屏以内的这种布局方式让读者的视线不会再受到框线的限制，比起响应式布局方式，这种布局的确多了些开阔和大气的感觉。此外，网页主画面部分还可以灵活处理，既可以向上拓展到logo和导航的顶部位置，也可以向下拓展到内容区域，这种布局方式也是非常常见的布局方式。

3、通栏

这种布局方式相对于大框套小框而言，用户浏览网页不在受到方框的限制，这种方式显得大气些，眼界显得更开阔些。

另外这种方式还有一个便利之处那就是主视觉部分可以随机灵活处理，既能往上移到网站logo和导航的位置，也可以移到向下扩展的内容区域。这种布局方式也是网站中常用的布局方式。

4、不对称布局

不对称是艺术界长期以来喜欢的技术，在网页设计师中很受欢迎。但要注意不要将不对称与不平衡混为一谈

不对称的目标是在不可能或不希望对两个部分使用相同的权重时创造平衡。使用不对称性可以创建张力和动态，并且把用户的注意力集中在各个对象(焦点)上。

关于优秀网站首页设计的四大布局技巧，青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图形处理等有浓厚的兴趣，希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

网页设计的布局有哪几种

网页设计的布局有哪几种？

1.“国”字型：

2.拐角型：

3.标题正文型：

4.左右框架型：

5.上下框架型：

6.综合框架型：

7.封面型：

8.Flash型：网页设计

9.变化型：网页设计

网站设计怎么布局的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网站设计怎么布局好看、网站设计怎么布局的信息别忘了在本站进行查找喔。