一种web页面的布局方法和布局系统技术方案

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

【技术实现步骤摘要】
一种web页面的布局方法和布局系统
本专利技术属于页面布局领域，尤其涉及一种web页面的布局方法和布局系统。
技术介绍
在现代各种web(WorldWideWeb，全球广域网)应用中，往往需要页面去适应各种设备(PC，手机，平板等)不同的屏幕大小，开发人员需要花费大量时间和精力用于页面布局的实现，这种需求下催生了诸如bootstrap，foundation等一系列以栅格系统为基础的css(CascadingStyleSheets，层叠样式表)框架，让开发人员能更快速方便的实现页面布局。栅格系统是一种将页面元素平均分为一定数量的等宽小格子的系统(现有栅格系统通常分为12份)，该页面元素的子元素可以根据设置的样式值占据一定的宽度(0/12～12/12)。现有的框架全部使用百分比宽度设置实现栅格系统，仅能用于水平方向的栅格布局，而且由于栅格数值的固定，预定义的灵活性也会受到限制。典型的百分比栅格系统将父元素的宽度分为12份，每份占总宽度的8.33％，可实现两个子元素1:11、2:10、3:9…11:1的水平方向宽度比例控制，每份宽度必为8.33％的倍数，但是对于每份宽度不为8.33％的宽度本文档来自技高网...

【技术保护点】
1.一种web页面的布局方法，其特征在于，所述布局方法，包括：获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；根据获取的布局类型和栅格类型对所述待布局web页面进行布局。

【技术特征摘要】
1.一种web页面的布局方法，其特征在于，所述布局方法，包括：获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；根据获取的布局类型和栅格类型对所述待布局web页面进行布局。2.如权利要求1所述的布局方法，其特征在于，如果所述类型为：自动高度、固定尺寸栅格加比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：设置横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。3.如权利要求1所述的布局方法，其特征在于，如果所述类型为：自动高度、比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：设置横向外框值以及竖向外框值；在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。4.如权利要求1所述的布局方法，其特征在于，如果所述类型为：设备高度、固定尺寸栅格加比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：设置设备高度值、横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。5.如权利要求1所述的布局方法，其特征在于，如果所述类型为：设备高度、比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：设置设备高度值、横向外框值以及竖向外框值；在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅...

【专利技术属性】
技术研发人员：周劼，李丽，马志远，
申请(专利权)人：武汉安天信息技术有限责任公司，
类型：发明
国别省市：湖北,42