网页首页常用的布局方法-布局方式-怎么排版

网页首页设计常用的方式主要有三种，分别为无边框布局、卡片式布局和分割线布局设计。如果想具体了解网页首页常用的布局方法，那不妨接着往下看吧!

一、无边框布局

无边框布局设计是近年来经常使用的布局设计，在设计时用空格来代替页面的分割线。

这一般以大的图片为中心但是在用户看时是很舒服的，因为希望内容是规律的，区间之间的内容相对一致、重叠并且紧密。

二、卡片式布局

与传统的版面设计方法相比，网站主页版面设计以卡片式的版面设计方法整体提高了版面利用率，为网站建设过程提供了更多的便利。卡片设计布局方式有很多：

1.页面的使用率得到了提高。将卡片作为容器，然后将不同种类的内容放在不同的卡片上，不仅便于区分内容，而且页面风格统一。

以传统列表为例，内容以垂直滚动的方式显示，但显示的内容有限，而卡片设计则采用滑动的方式，这对解决空间问题有很大帮助。

2、内容在卡片上更容易被区分。正如我以前说过的卡片就像一个容器。不同的内容放在不同的卡片上，可以更好地识别内容的类型。

3、卡型设计体验感增强且有控制性。

三、设计分割线

另一种常见的页面布局设计方法是分割线设计的布局，其中内容的可编辑性非常好，以及帮助用户熟悉页面的布局。分割线是在整个页面上分割不同种类的内容，使信息独立。

(1)流式布局 Fluid

流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。

通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。

流布局与媒体查询和优化样式技术密切相关。

(2)固定布局 Fixed

在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px。因为960可以整除3，4，5，6，8，10，12和15。

这种布局具有很强的稳定性与可控性。

但固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。

(3)弹性布局 Elastic

弹性布局跟流布局很像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em或者rem，避免了根据px局部在高分辨率下几乎无法辨识的缺点，又相对于%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，需要一段时间适应而且不易从其他布局转换过来。

(4)伸缩 Flex box

使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。

1、单屏网站设计

单屏网站设计 ，并非单页面网站设计，由头部banner 内容 底部构成，有时候也只有头部 banner 底部，而把内容放在内页展示。

这样做所面临的挑战是必须在一个页面上获得所有必要的信息。同时，您需要确保页面具有视觉吸引力和用户友好性。

Banner广告图的设计是整个网站中的重中之重，广告图设计打造品牌、突出产品亮点、利用新颖的设计吸引用户，单屏网站设计以其视觉吸引力和创意设计为人称赞，既简洁大气又不失美感，苹果官网首页便是采用这种布局。

2、长页面网站设计

长页面网站设计 ，由头部banner、内容一、内容二、内容三、底部构成，在首页布局上，尽可能得展示公司的产品服务优势，打造产品卖点，因为其营销性质，也称为营销型网站设计。

长页面网站设计，比起单屏网站来讲，内容更丰富，深受众多企业的喜爱，不仅是一种很好的宣传方式，也能吸引很多有效的消费群体。

3、长页面网站设计原则

(1)做好每个版块内容规划和布局。例如公司介绍、产品介绍、服务核心优势、新闻资讯、在线留言询价等内容的宣传展示，按照内容的侧重点对每个版块内容展示进行排序。

(2)页面整洁，避免繁琐。每个网站都有自己的风格，但是无论是从事哪种类型的网站，我们都需要保持自己的风格整齐、统一，避免过于繁琐、花哨的页面布局。

页面布局过于的花哨和繁琐，会让顾客浏览的时候，感觉到视觉疲惫，造成浏览时间过短，会影响整体的访问数量和质量。

(3)避免营销广告弹窗。相信有很多朋友和我一样，在平时浏览网站的时候，最讨厌的就是总有一些各种类型的诱导广告弹出窗口，不仅很影响客户的浏览心情，也为客户带来了不好的感受。

(4)友情链接：友情链接，也称为网站交换链接、互惠链接、互换链接、联盟链接等，常作为一种网站推广基本手段，可以给自己的网站增加相应浏览量。