[发明专利]一种网页布局方法及装置

说明书

本发明实施例提供了一种网页布局方法及装置，所述方法包括：在网页上确定父元素；将所述父元素在x轴及y轴上分别划分成多份；确定子元素及纹理坐标；计算所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数；至少基于所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数计算确定所述子元素在所述父元素中的位置。本发明的网页布局方法及装置能够有效提高页面布局效率。

技术领域

本发明实施例涉及web前端技术领域，特别涉及一种网页布局方法及装置。

背景技术

Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。对应的标准也分三方面：结构化标准语言主要包括XHTML和HTML以及XML，表现层标准语言主要包括CSS，行为标准主要包括对象模型，DOM、ECMAScript等。

布局方面，分为两种：代码上的，视觉上的。代码就是最典型的DIV+CSS布局，表格布局(table)，iframe框架(特殊地方使用)布局。目前常用的布局方式是，div+css布局的方式。当然布局的概念比较广泛，因为在css中也存在很多布局的方法，比如flex、float和position。尤其是position方式的布局，使用较为广泛，但是现有的position布局，计算量大，开发人员不仅要关注页面的具体布局，各内容模块的排版，还要关注各个板块的具体位置，外形，插入的内容是否与其匹配等等，因此使得布局效率较低。

发明内容

本发明提供了一种能够有效提高页面布局效率的网页布局方法及装置。

为了解决上述技术问题，本发明实施例提供了一种网页布局方法，包括：

在网页上确定父元素；

将所述父元素在x轴及y轴上分别划分成多份；

确定子元素及纹理坐标；

计算所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数；

至少基于所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数计算确定所述子元素在所述父元素中的位置。

作为一可选实施例，所述父元素由所述网页上的部分区域或全部区域形成。

作为一可选实施例，所述计算所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数，包括：

确定所述纹理坐标为[[a,b],[c,d]]，其中，所述a，b分别代表所述子元素在x轴，y轴向的起始位置，c，d分别代表所述子元素在x轴，y轴向的结束位置；

基于所述子元素在x轴向的位置计算确定所述子元素在x轴所占份数为(c-a+1)；

基于所述子元素在y轴向的位置计算确定所述子元素在y轴所占份数为(d-b+1)。

作为一可选实施例，所述至少基于所述纹理坐标分别在所述父元素的x轴和y轴向所占的份数计算确定所述子元素在所述父元素中的位置，包括：

基于所述子元素在x轴向，y轴向所占的份数计算确定所述子元素相对于所述父元素分别在x轴、y轴上的占比；

至少基于所述占比计算确定所述子元素在所述父元素中的位置。

作为一可选实施例，所述至少基于所述占比计算确定所述子元素在所述父元素中的位置，包括：

获得所述父元素分别在所述x轴向、y轴向的长度值，所述x轴向、y轴向的长度值分别为所述父元素的宽、高值；

基于所述父元素的宽、高值及所述占比分别确定所述子元素的宽、高值；

至少基于所述子元素的宽、高值计算确定所述子元素在所述父元素中的位置。