[发明专利]一种web页面的布局方法和布局系统

说明书

本发明适用于页面布局领域，提供了一种web页面的布局方法和布局系统，所述布局方法包括：获取待布局万维网web页面的类型，所述类型包括：布局类型，以及是否包含固定尺寸栅格，所述布局类型包括：自动高度或设备高度；根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局。本发明实施例，获取待布局web页面的类型，根据类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对待布局web页面进行布局，使得web页面中可以包含固定尺寸栅格和比例尺寸栅格，丰富了web页面的设计，增加了web页面的样式。

技术领域

本发明属于页面布局领域，尤其涉及一种web页面的布局方法和布局系统。

背景技术

在现代各种web(World Wide Web，全球广域网)应用中，往往需要页面去适应各种设备(PC，手机，平板等)不同的屏幕大小，开发人员需要花费大量时间和精力用于页面布局的实现，这种需求下催生了诸如bootstrap，foundation等一系列以栅格系统为基础的css(Cascading Style Sheets，层叠样式表)框架，让开发人员能更快速方便的实现页面布局。栅格系统是一种将页面元素平均分为一定数量的等宽小格子的系统(现有栅格系统通常分为12份)，该页面元素的子元素可以根据设置的样式值占据一定的宽度(0/12～12/12)。现有的框架全部使用百分比宽度设置实现栅格系统，仅能用于水平方向的栅格布局，而且由于栅格数值的固定，预定义的灵活性也会受到限制。

典型的百分比栅格系统将父元素的宽度分为12份，每份占总宽度的8.33％，可实现两个子元素1:11、2:10、3:9…11:1的水平方向宽度比例控制，每份宽度必为8.33％的倍数，但是对于每份宽度不为8.33％的宽度设置如1:10、3:4、1:6等无法实现，如果开发中一定需要实现该类需求要么放弃使用栅格系统，要么重新设置整个栅格系统每份宽度(如：要实现3:4，则需重新设置栅格系统每份宽度为14.28％，宽度值1至7，对应的要重设从1至7的每个占比的宽度值，1为14.28％、2为28.56％以此类推)。

发明内容

本发明实施例的目的在于提供一种web页面的布局方法和布局系统，以解决现有技术页面布局由于单位栅格固定造成灵活性差的问题。

本发明实施例是这样实现的，一种web页面的布局方法，所述布局方法，包括：

获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；

根据获取的布局类型和栅格类型对所述待布局web页面进行布局。

本发明实施例的另一目的在于提供一种web页面的布局系统，所述布局系统，包括：

类型获取单元，用于获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；

布局单元，用于根据获取的布局类型和栅格类型对所述待布局web页面进行布局。

本发明实施例，获取待布局web页面的布局类型和栅格类型，根据获取的布局类型和栅格类型对所述待布局web页面进行布局，使得竖直方向和水平方向的高度比例可以分别得到控制，同时在竖直方向和水平方向丰富了web页面的设计，增加了web页面的样式。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一示例性实施例示出的一种web页面的布局方法的流程图；