CN109240774B - 一种web页面的布局方法和布局系统 - Google Patents
一种web页面的布局方法和布局系统 Download PDFInfo
- Publication number
- CN109240774B CN109240774B CN201710539355.1A CN201710539355A CN109240774B CN 109240774 B CN109240774 B CN 109240774B CN 201710539355 A CN201710539355 A CN 201710539355A CN 109240774 B CN109240774 B CN 109240774B
- Authority
- CN
- China
- Prior art keywords
- value
- grid
- vertical
- size
- layout
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明适用于页面布局领域，提供了一种web页面的布局方法和布局系统，所述布局方法包括：获取待布局万维网web页面的类型，所述类型包括：布局类型，以及是否包含固定尺寸栅格，所述布局类型包括：自动高度或设备高度；根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局。本发明实施例，获取待布局web页面的类型，根据类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对待布局web页面进行布局，使得web页面中可以包含固定尺寸栅格和比例尺寸栅格，丰富了web页面的设计，增加了web页面的样式。
Description
技术领域
本发明属于页面布局领域，尤其涉及一种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页面的布局方法的流程图；
图2为本发明另一示例性实施例示出的一种web页面的布局方法的流程图；
图3为本发明再一示例性实施例示出的一种web页面的布局方法的流程图；
图4为本发明再一示例性实施例示出的一种web页面的布局方法的流程图；
图5为本发明再一示例性实施例示出的一种web页面的布局方法的流程图；
图6为本发明一示例性实施例示出的一种web页面的布局系统的结构图；
图7为本发明另一示例性实施例示出的一种web页面的布局系统的结构图；
图8为本发明再一示例性实施例示出的一种web页面的布局系统的结构图；
图9为本发明再一示例性实施例示出的一种web页面的布局系统的结构图；
图10为本发明再一示例性实施例示出的一种web页面的布局系统的结构图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。
如图1所示为本发明一示例性实施例示出的一种web页面的布局方法的流程图，所述布局方法包括：
步骤S101，获取待布局万维网web页面的类型，所述类型包括：布局类型，以及是否包含固定尺寸栅格，所述布局类型包括：自动高度或设备高度。
在本发明实施例中，布局类型是一个web(World Wide Web，万维网)页面首先需要确定的特征，确定了布局类型才可以进行后续的布局工作。Web页面的布局类型包括但不限于：自动高度、设备高度。自动高度即web页面根据内容的增长而增长，页面内容每增长一行，页面高度也增长一行；设备高度即web页面的页面主体固定为设备的可视区域的高度，在该布局类型下，设备的可视区域是多少，web页面即为多少，如：4.7寸可视区域的手机，则web页面的页面主体为4.7寸，5.5寸可视区域的手机，则web页面的页面主体为5.5寸，如果是7.9寸可视区域的平板电脑，则web页面的页面主体为7.9寸。
固定尺寸栅格是相对于比例尺寸栅格而言的，web页面可以由少量固定尺寸栅格和多个比例尺寸栅格组成，少量固定尺寸栅格的尺寸相互独立，多个比例尺寸栅格之间按比例划分，如：50px:100px:150px(1:2:3)，或者100px:150px:250px(2:3:5)等可根据实际使用的需要随意设定，是否包含固定尺寸栅格是本发明实施例的一个重要部分，是否包含固定尺寸栅格，终端也将会使用不同的布局方法，用户可以在开始进行布局之前确定是否包含固定尺寸栅格。
需要指出的是，根据布局类型的特性，不同的布局类型可以适应不同的布局需求：设备高度可以满足单屏页面的布局请求，自动高度可以满足多屏页面的布局请求。
步骤S102，根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局。
在本发明实施例中，对于不同的类型，终端使用不同的布局方法，对web页面进行布局，该类型包括：自动高度且包含自定义尺寸栅格、自动高度但不包含自定义尺寸栅格、设备高度且包含自定义尺寸栅格、设备高度但不包含自定义尺寸栅格。
横向外框和纵向外框用于定义水平方向和竖直方向的栅格系统外框，横向外框设置flex-direction为row，纵向外框设置flex-direction为column，横向外框和竖向外框之间可以相互套用实现复杂的组合布局。
如图2所示为本发明另一示例性实施例示出的一种web页面的布局方法的流程图，如果所述类型为：自动高度且包含固定尺寸栅格，所述根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局，包括：
步骤S201，设置横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值。
在本发明实施例中，虽然web页面类型为自动高度，但仍然需要对外框进行设值，因此需要对：横向外框、竖向外框、固定尺寸栅格分别设值，其中固定尺寸栅格值包括：横向固定尺寸栅格值以及竖向固定尺寸栅格值。
需要指出的是，由于web页面的类型为自动高度，所以在web页面的height(高度方向)不设值。
步骤S202，获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值。
在本发明实施例中，外框值减去固定尺寸栅格值获取的剩余尺寸值即为比例尺寸栅格可以进行设值的空间，上述步骤即为了获取剩余尺寸。需要指出的是，剩余尺寸需要从横、竖两方面分别计算，即需要用横向外框值减去横向固定尺寸栅格值，以及竖向外框值减去竖向固定尺寸栅格值。
步骤S203，在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
在本发明实施例中，在剩余值中划分比例尺寸栅格值，并不表明剩余值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设剩余尺寸值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图3所示为本发明再一示例性实施例示出的一种web页面的布局方法的流程图，如果所述类型为：自动高度但不包含固定尺寸栅格，所述根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局，包括：
步骤S301，设置横向外框值以及竖向外框值。
在本发明实施例中，虽然web页面类型为自动高度，但仍然需要对外框进行设值，因此需要对：横向外框、竖向外框分别设置。
需要指出的是，由于web页面的类型为自动高度，所以在web页面的height(高度方向)不设值。
步骤S302，在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
在本发明实施例中，在外框值中划分比例尺寸栅格值，并不表明外框值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设外框值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图4所示为本发明再一示例性实施例示出的一种web页面的布局方法的流程图，如果所述类型为：设备高度且包含固定尺寸栅格，所述根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局，包括：
步骤S401，设置设备高度值、横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值。
在本发明实施例中，由于web页面类型为设备高度，因此需要对：设备高度、横向外框、竖向外框、固定尺寸栅格分别设值，其中固定尺寸栅格值包括：横向固定尺寸栅格值以及竖向固定尺寸栅格值。
需要指出的是，由于web页面的类型为设备高度，所以在web页面的height(高度方向)设值为100vh。其中，使用设备高度时终端可满足单屏页面的布局需求。
步骤S402，获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值。
在本发明实施例中，外框值减去固定尺寸栅格值获取的剩余尺寸值即为比例尺寸栅格可以进行设值的空间，上述步骤即为了获取剩余尺寸。需要指出的是，剩余尺寸需要从横、竖两方面分别计算，即需要用横向外框值减去横向固定尺寸栅格值，以及竖向外框值减去竖向固定尺寸栅格值。
步骤S403，在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
在本发明实施例中，在剩余值中划分比例尺寸栅格值，并不表明剩余值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设剩余尺寸值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图5所示为本发明再一示例性实施例示出的一种web页面的布局方法的流程图，如果所述类型为：设备高度但不包含固定尺寸栅格，所述根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局，包括：
步骤S501，设置设备高度值、横向外框值以及竖向外框值。
在本发明实施例中，由于web页面类型为设备高度，因此需要对：设备高度、横向外框以及竖向外框分别设置。
需要指出的是，由于web页面的类型为设备高度，所以在web页面的height(高度方向)设值为100vh。其中，使用设备高度时终端可满足单屏页面的布局需求。
步骤S502，在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
在本发明实施例中，在外框值中划分比例尺寸栅格值，并不表明外框值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样外框值空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设外框值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
在本发明实施例中，获取待布局web页面的类型，根据类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对待布局web页面进行布局，使得web页面中可以包含固定尺寸栅格和比例尺寸栅格，丰富了web页面的设计，增加了web页面的样式。
如图6所示为本发明一示例性实施例示出的一种web页面的布局系统的结构图，所述布局系统包括：
类型获取单元601，用于获取待布局万维网web页面的类型，所述类型包括：布局类型，以及是否包含固定尺寸栅格，所述布局类型包括：自动高度或设备高度。
在本发明实施例中，布局类型是一个web(World Wide Web，万维网)页面首先需要确定的特征，确定了布局类型才可以进行后续的布局工作。Web页面的布局类型包括但不限于：自动高度、设备高度，自动高度即web页面根据内容的增长而增长，页面内容每增长一行，页面高度也增长一行，设备高度即web页面的页面主体固定为设备的可视区域的高度，在该布局类型下，设备的可视区域是多少，web页面即为多少，如：4.7寸可视区域的手机，则web页面的页面主体为4.7寸，5.5寸可视区域的手机，则web页面的页面主体为5.5寸，如果是7.9寸可视区域的平板电脑，则web页面的页面主体为7.9寸。
固定尺寸栅格是相对于比例尺寸栅格而言的，web页面可以由少量固定尺寸栅格和多个比例尺寸栅格组成，少量固定尺寸栅格的尺寸相互独立，多个比例尺寸栅格之间按比例划分，如：50px:100px:150px(1:2:3)，或者100px:150px:250px(2:3:5)等可根据实际使用的需要随意设定，是否包含固定尺寸栅格是本发明实施例的一个重要部分，是否包含固定尺寸栅格，终端也将会使用不同的布局方法，用户可以在开始进行布局之前确定是否包含固定尺寸栅格。
需要指出的是，根据布局类型的特性，不同的布局类型可以适应不同的布局需求：设备高度可以满足单屏页面的布局请求，自动高度可以满足多屏页面的布局请求。
布局单元602，用于根据所述类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对所述待布局web页面进行布局。
在本发明实施例中，对于不同的类型，终端使用不同的布局方法，对web页面进行布局，该类型包括：自动高度且包含自定义尺寸栅格、自动高度但不包含自定义尺寸栅格、设备高度且包含自定义尺寸栅格、设备高度但不包含自定义尺寸栅格。
横向外框和纵向外框用于定义水平方向和竖直方向的栅格系统外框，横向外框设置flex-direction为row，纵向外框设置flex-direction为column，横向外框和竖向外框之间可以相互套用实现复杂的组合布局。
如图7所示为本发明另一示例性实施例示出的一种web页面的布局系统的结构图，所述布局单元602，包括：
设置子单元701，用于设置横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值。
在本发明实施例中，虽然web页面类型为自动高度，但仍然需要对外框进行设值，因此需要对：横向外框、竖向外框、固定尺寸栅格分别设值，其中固定尺寸栅格值包括：横向固定尺寸栅格值以及竖向固定尺寸栅格值。
需要指出的是，由于web页面的类型为自动高度，所以在web页面的height(高度方向)不设值。
剩余值获取子单元702，用于获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值。
在本发明实施例中，外框值减去固定尺寸栅格值获取的剩余尺寸值即为比例尺寸栅格可以进行设值的空间，上述步骤即为了获取剩余尺寸。需要指出的是，剩余尺寸需要从横、竖两方面分别计算，即需要用横向外框值减去横向固定尺寸栅格值，以及竖向外框值减去竖向固定尺寸栅格值。
划分子单元703，用于在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
在本发明实施例中，在剩余值中划分比例尺寸栅格值，并不表明剩余值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设剩余尺寸值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图8所示为本发明再一示例性实施例示出的一种web页面的布局系统的结构图，所述布局单元602，包括：
设置子单元801，用于设置横向外框值以及竖向外框值。
在本发明实施例中，虽然web页面类型为自动高度，但仍然需要对外框进行设值，因此需要对：横向外框、竖向外框分别设置。
需要指出的是，由于web页面的类型为自动高度，所以在web页面的height(高度方向)不设值。
划分子单元802，用于在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
在本发明实施例中，在外框值中划分比例尺寸栅格值，并不表明外框值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设外框值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图9所示为本发明再一示例性实施例示出的一种web页面的布局系统的结构图，所述布局单元602，包括：
设置子单元901，用于设置设备高度值、横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值。
在本发明实施例中，由于web页面类型为设备高度，因此需要对：设备高度、横向外框、竖向外框、固定尺寸栅格分别设值，其中固定尺寸栅格值包括：横向固定尺寸栅格值以及竖向固定尺寸栅格值。
需要指出的是，由于web页面的类型为设备高度，所以在web页面的height(高度方向)设值为100vh。其中，使用设备高度时终端可满足单屏页面的布局需求。
剩余值获取子单元902，用于获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值。
在本发明实施例中，外框值减去固定尺寸栅格值获取的剩余尺寸值即为比例尺寸栅格可以进行设值的空间，上述步骤即为了获取剩余尺寸。需要指出的是，剩余尺寸需要从横、竖两方面分别计算，即需要用横向外框值减去横向固定尺寸栅格值，以及竖向外框值减去竖向固定尺寸栅格值。
划分子单元903，用于在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
在本发明实施例中，在剩余值中划分比例尺寸栅格值，并不表明剩余值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设剩余尺寸值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
如图10所示为本发明再一示例性实施例示出的一种web页面的布局系统的结构图，所述布局单元602，包括：
设置子单元1001，用于设置设备高度值、横向外框值以及竖向外框值。
在本发明实施例中，由于web页面类型为设备高度，因此需要对：设备高度、横向外框以及竖向外框分别设置。
需要指出的是，由于web页面的类型为设备高度，所以在web页面的height(高度方向)设值为100vh。其中，使用设备高度时终端可满足单屏页面的布局需求。
划分子单元1002，用于在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
在本发明实施例中，在外框值中划分比例尺寸栅格值，并不表明外框值的全部都被比例尺寸栅格划分，根据实际使用的需要，使用了多少则表示比例尺寸栅格值需要多少，这样外框值空余的部分就可以用于应急使用，而不必因为空间不足而重新设计最小比例尺寸栅格值。
举例说明：
假设外框值为20个最小比例尺寸栅格，而实际使用中比例尺寸栅格为：1:4:8，即只使用了13个比例尺寸栅格，这样可将比例尺寸栅格最大数设置为13，而不是20。
本发明实施例，获取待布局web页面的类型，根据类型，通过横向外框、竖向外框、固定尺寸栅格以及比例尺寸栅格对待布局web页面进行布局，使得web页面中可以包含固定尺寸栅格和比例尺寸栅格，丰富了web页面的设计，增加了web页面的样式。
本领域普通技术人员可以理解为上述实施例所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
本领域普通技术人员还可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以在存储于一计算机可读取存储介质中，所述的存储介质，包括：ROM/RAM、磁盘、光盘等。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种web页面的布局方法，其特征在于，所述布局方法，包括：
获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；
根据获取的布局类型和栅格类型对所述待布局web页面进行布局；
如果所述类型为：自动高度、固定尺寸栅格加比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：
设置横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；
获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；
在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
2.如权利要求1所述的布局方法，其特征在于，如果所述类型为：自动高度、比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：
设置横向外框值以及竖向外框值；
在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
3.如权利要求1所述的布局方法，其特征在于，如果所述类型为：设备高度、固定尺寸栅格加比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：
设置设备高度值、横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；
获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；
在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
4.如权利要求1所述的布局方法，其特征在于，如果所述类型为：设备高度、比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：
设置设备高度值、横向外框值以及竖向外框值；
在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
5.一种web页面的布局系统，其特征在于，所述布局系统，包括：
类型获取单元，用于获取待布局web页面的类型，所述类型包括：布局类型、栅格类型，所述布局类型包括：自动高度或设备高度，所述栅格类型包括：固定尺寸栅格加比例尺寸栅格或者比例尺寸栅格；
布局单元，用于根据获取的布局类型和栅格类型对所述待布局web页面进行布局；
如果所述类型为：自动高度、固定尺寸栅格加比例尺寸栅格，所述根据获取的布局类型和栅格类型对所述待布局web页面进行布局，包括：
设置横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；
获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；
在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
6.如权利要求5所述的布局系统，其特征在于，所述类型为：自动高度、比例尺寸栅格，所述布局单元，包括：
设置子单元，用于设置横向外框值以及竖向外框值；
划分子单元，用于在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
7.如权利要求5所述的布局系统，其特征在于，所述类型为：设备高度、固定尺寸栅格加比例尺寸栅格，所述布局单元，包括：
设置子单元，用于设置设备高度值、横向外框值、竖向外框值、横向固定尺寸栅格值以及竖向固定尺寸栅格值；
剩余值获取子单元，用于获取横向外框值减去横向固定尺寸栅格值的横向剩余尺寸值，并获取竖向外框值减去竖向固定尺寸栅格值的竖向剩余尺寸值；
划分子单元，用于在所述横向剩余尺寸值中划分横向比例尺寸栅格值，并在所述竖向剩余尺寸值中划分竖向比例尺寸栅格值。
8.如权利要求5所述的布局系统，其特征在于，所述类型为：设备高度、比例尺寸栅格，所述布局单元，包括：
设置子单元，用于设置设备高度值、横向外框值以及竖向外框值；
划分子单元，用于在所述横向外框值中划分横向比例尺寸栅格值，并在所述竖向外框值中划分竖向比例尺寸栅格值。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710539355.1A CN109240774B (zh) | 2017-07-04 | 2017-07-04 | 一种web页面的布局方法和布局系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710539355.1A CN109240774B (zh) | 2017-07-04 | 2017-07-04 | 一种web页面的布局方法和布局系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109240774A CN109240774A (zh) | 2019-01-18 |
| CN109240774B true CN109240774B (zh) | 2022-08-09 |
Family
ID=65083261
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710539355.1A Active CN109240774B (zh) | 2017-07-04 | 2017-07-04 | 一种web页面的布局方法和布局系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109240774B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113536179B (zh) * | 2021-06-21 | 2023-12-26 | 北京达佳互联信息技术有限公司 | 页面的生成方法、装置、电子设备和存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103677830A (zh) * | 2013-12-11 | 2014-03-26 | 乐视网信息技术（北京）股份有限公司 | 一种确定栅格系统的方法及装置 |
| CN103970894A (zh) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | 自适应调整的界面流式布局显示的方法和系统 |
| CN106484388A (zh) * | 2015-09-02 | 2017-03-08 | 腾讯科技（深圳）有限公司 | 用户界面的实现方法和装置 |
-
2017
- 2017-07-04 CN CN201710539355.1A patent/CN109240774B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103677830A (zh) * | 2013-12-11 | 2014-03-26 | 乐视网信息技术（北京）股份有限公司 | 一种确定栅格系统的方法及装置 |
| CN103970894A (zh) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | 自适应调整的界面流式布局显示的方法和系统 |
| CN106484388A (zh) * | 2015-09-02 | 2017-03-08 | 腾讯科技（深圳）有限公司 | 用户界面的实现方法和装置 |
Non-Patent Citations (1)
| Title |
|---|
| bootstrap的栅格布局与两列布局结合使用;yezi-dream;《https://www.cnblogs.com/yezi-dream/p/6100703.html》;20161212;1-2 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109240774A (zh) | 2019-01-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109032801B (zh) | 一种请求调度方法、系统及电子设备和存储介质 | |
| CN102411880B (zh) | 一种led显示屏带载配置系统及其配置带载的方法 | |
| CN105809323A (zh) | 任务分配方法和系统 | |
| CN106502659B (zh) | 一种移动设备网页单页面的布局方法及系统 | |
| CN103699608A (zh) | 页面布局方法及装置 | |
| US9847075B2 (en) | Electronic device for displaying and adjusting image layers in graphical user interface and method thereof | |
| CN109240774B (zh) | 一种web页面的布局方法和布局系统 | |
| CN103729236A (zh) | 一种限制云计算用户资源使用额度的方法 | |
| CN106899857A (zh) | 服务器负载调节方法、装置及服务器 | |
| CN109753641A (zh) | 一种更改对象位置的方法、装置、电子设备及存储介质 | |
| CN104679391B (zh) | 智能手表的图标显示方法及装置 | |
| CN102479033A (zh) | 一种图表浏览方法、装置及系统 | |
| CN105578301A (zh) | 一种直播间中弹幕发送长度的优化方法与装置 | |
| CN106168959B (zh) | 网页布局方法及装置 | |
| CN114579223A (zh) | 一种界面布局方法、电子设备和计算机可读存储介质 | |
| CN103870762A (zh) | 分区访问方法和电子设备 | |
| CN103647754A (zh) | 云计算中拓扑图的绘制方法与装置 | |
| CN106534227A (zh) | 用于扩展分布式一致性服务的方法和设备 | |
| JP2017509095A5 (zh) | ||
| CN109344371B (zh) | 表头的生成方法和装置 | |
| CN106155563B (zh) | 一种磁盘访问控制方法及装置 | |
| CN110703988B (zh) | 一种分布式存储的存储池创建方法、系统、终端及存储介质 | |
| CN109388498B (zh) | 一种互斥的处理方法、装置、设备及介质 | |
| CN102231105B (zh) | 一种控件排列方法及系统 | |
| WO2016111553A1 (ko) | 실시간 격자형 콘텐츠 공유 방법 및 시스템 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |