当前时讯:网页布局方法有哪些

2023-01-07 11:34:45 来源:教育快报网
1

网页布局方式有哪些

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

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


(相关资料图)

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

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

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

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

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

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

###2

网页布局分哪几个部分

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

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

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

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

1 列:一般用于移动端。

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

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

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

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

###3

常用的网页流程布局介绍

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

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布局来控制网页的各个模块。初学者在制作网页时,一定要养成分析页面布局的习惯,这样可以提高网页制作的效率。

关键词:
分享:
x 广告
x 广告

Copyright   2015-2022 魔方网版权所有  备案号:京ICP备2022018928号-48   联系邮箱:315 54 11 85 @ qq.com