Web page layout method and device

Abstract

The embodiment of the present invention provides a web page layout method and device, the method comprising: determining a parent element on a web page; dividing the parent element into multiple parts on the x-axis and y-axis respectively; determining child elements and texture coordinates; calculating the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element respectively; and calculating and determining the position of the child element in the parent element based at least on the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element respectively. The web page layout method and device of the present invention can effectively improve the efficiency of page layout.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of web front-end technology, and in particular to a web page layout method and device. Background Art

[0002] Web standards are composed of a series of standards. A web page is mainly composed of three parts: structure layer, presentation layer and behavior layer. The corresponding standards are also divided into three aspects: structured standard languages ​​mainly include XHTML, HTML and XML, presentation layer standard languages ​​mainly include CSS, and behavior standards mainly include object model, DOM, ECMAScript, etc.

[0003] In terms of layout, there are two types: code-based and visual. Code is the most typical DIV+CSS layout, table layout (table), iframe framework (used in special places) layout. The commonly used layout method is div+css layout. Of course, the concept of layout is relatively broad, because there are also many layout methods in CSS, such as flex, float and position. In particular, the position layout is widely used, but the existing position layout has a large amount of calculation. Developers must not only pay attention to the specific layout of the page and the layout of each content module, but also pay attention to the specific position and appearance of each section, whether the inserted content matches it, etc., which makes the layout efficiency low. Summary of the invention

[0004] The present invention provides a web page layout method and device which can effectively improve the efficiency of page layout.

[0005] In order to solve the above technical problems, an embodiment of the present invention provides a web page layout method, comprising:

[0006] Determine the parent element on the web page;

[0007] Divide the parent element into multiple parts on the x-axis and y-axis respectively;

[0008] Determine sub-elements and texture coordinates;

[0009] Calculate the number of shares of the texture coordinates on the x-axis and y-axis of the parent element respectively;

[0010] The position of the child element in the parent element is determined by calculating at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element.

[0011] As an optional embodiment, the parent element is formed by a partial area or the entire area on the web page.

[0012] As an optional embodiment, the calculating the number of shares of the texture coordinates respectively in the x-axis and y-axis directions of the parent element includes:

[0013] Determine the texture coordinates as [[a,b],[c,d]], wherein a and b represent the starting positions of the sub-element in the x-axis and y-axis directions, respectively, and c and d represent the ending positions of the sub-element in the x-axis and y-axis directions, respectively;

[0014] Based on the position of the sub-element in the x-axis direction, the number of the sub-element in the x-axis direction is calculated and determined to be (c-a+1);

[0015] Based on the position of the sub-element on the y-axis, the number of shares of the sub-element on the y-axis is determined to be (d-b+1).

[0016] As an optional embodiment, the calculating and determining the position of the child element in the parent element based at least on the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element includes:

[0017] Based on the number of shares of the child element in the x-axis and y-axis, the proportion of the child element relative to the parent element in the x-axis and y-axis is calculated and determined;

[0018] The position of the child element in the parent element is determined based at least on the proportion calculation.

[0019] As an optional embodiment, the determining the position of the child element in the parent element at least based on the proportion calculation includes:

[0020] Get the length values ​​of the parent element in the x-axis direction and the y-axis direction respectively, where the length values ​​of the x-axis direction and the y-axis direction are the width and height values ​​of the parent element respectively;

[0021] Determine the width and height of the child element based on the width and height of the parent element and the proportion;

[0022] The position of the child element in the parent element is determined by calculation based at least on the width and height values ​​of the child element.

[0023] As an optional embodiment, the calculating and determining the position of the child element in the parent element based at least on the width and height of the child element includes:

[0024] Based on the starting position of the child element in the x-axis and y-axis directions, determine the percentage value of the child element from the boundary of the parent element in the x-axis and the percentage value of the child element from the boundary of the parent element in the y-axis;

[0025] The position of the child element in the parent element is determined based on the percentage value and the width and height values ​​of the child element.

[0026] As an optional embodiment, it also includes:

[0027] Determine the position of each of the child elements on the parent element based on the texture coordinates of the child elements;

[0028] Based on the position, a plurality of areas are divided on the parent element for matching and displaying corresponding child elements.

[0029] As an optional embodiment, it also includes:

[0030] The child elements with the same texture coordinates can swap their positions in the parent element.

[0031] As an optional embodiment, it also includes:

[0032] When the parent element responds to the instruction to change the interface size, the child element determines the change parameter of the interface size and performs a proportional size change accordingly based on the change parameter.

[0033] Another embodiment of the present invention also provides a web page layout device, including:

[0034] A first determination module, used to determine a parent element on a web page;

[0035] A division module, used for dividing the parent element into multiple parts on the x-axis and the y-axis respectively;

[0036] A second determination module is used to determine the sub-element and the texture coordinates;

[0037] A first calculation module, used for calculating the number of shares of the texture coordinates respectively occupied by the x-axis and the y-axis of the parent element;

[0038] The second calculation module is used to calculate and determine the position of the child element in the parent element based on at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis of the parent element.

[0039] Based on the disclosure of the above embodiments, it can be known that the beneficial effects of the embodiments of the present invention include determining a parent element on a web page, dividing the parent element into multiple parts on the x-axis and y-axis, determining the child elements and texture coordinates, calculating the number of parts that the texture coordinates occupy on the x-axis and y-axis of the parent element, and then determining the position of the child element in the parent element based on at least the number of parts that the texture coordinates occupy on the x-axis and y-axis of the parent element. Based on the above method, the decoupling of page layout from components and HTML elements can be achieved, that is, the decoupling of business and layout can be achieved, so that the operation of page layout can be done by configuring the corresponding coordinates, and the content of the child elements can be directly handed over to the components for display. Business personnel no longer need to care about related issues such as the connection between layout and business, and can focus on developing the specific business and functions of child elements. In addition, the method configuration of the present application divides the coordinate system of the width and height of the parent element, so that the child elements can be flexibly configured through coordinates, which is more convenient for various forms of layout. The method of the present application also supports the interchangeability of child elements of the same size. When the size of the parent element changes, the child elements can automatically enlarge and reduce proportionally, which is convenient for developers to develop and significantly improves page layout efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] The accompanying drawings are used to provide a further understanding of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings:

[0041] Figure 1 Flow chart of a web page layout method in an embodiment of the present invention.

[0042] Figure 2 FIG. 4 is a flow chart of a web page layout method in another embodiment of the present invention.

[0043] Figure 3 This is a diagram showing the actual application results of the web page layout method in an embodiment of the present invention.

[0044] Figure 4 4 is a structural block diagram of a web page layout device in an embodiment of the present invention. DETAILED DESCRIPTION

[0045] The specific embodiments of the present invention are described in detail below with reference to the accompanying drawings, but are not intended to limit the present invention.

[0046] It should be understood that various modifications may be made to the embodiments disclosed herein. Therefore, the following description should not be considered as limiting, but merely as an example of an embodiment. Other modifications within the scope and spirit of the present disclosure will occur to those skilled in the art.

[0047] The accompanying drawings, which are incorporated in and constitute a part of the specification, illustrate embodiments of the present disclosure and, together with the general description of the present disclosure given above and the detailed description of the embodiments given below, serve to explain the principles of the present disclosure.

[0048] These and other characteristics of the invention will become apparent from the following description of a preferred form of embodiment given as a non-limiting example, with reference to the accompanying drawings.

[0049] It should also be understood that, although the invention has been described with reference to some specific examples, those skilled in the art will be able to realize many other equivalent forms of the invention that have the characteristics recited in the claims and are therefore within the scope of protection defined thereby.

[0050] The above and other aspects, features and advantages of the present disclosure will become more apparent from the following detailed description when taken in conjunction with the accompanying drawings.

[0051] Specific embodiments of the present disclosure are described hereinafter with reference to the accompanying drawings; however, it should be understood that the disclosed embodiments are merely examples of the present disclosure, which may be implemented in a variety of ways. Well-known and / or repeated functions and structures are not described in detail to avoid obscuring the present disclosure with unnecessary or redundant details. Therefore, the specific structural and functional details disclosed herein are not intended to be limiting, but merely serve as a basis and representative basis for the claims to teach those skilled in the art to use the present disclosure in a variety of ways with substantially any suitable detailed structure.

[0052] This specification may use the phrases "in one embodiment," "in another embodiment," "in a further embodiment," or "in other embodiments," all of which may refer to one or more of the same or different embodiments according to the present disclosure.

[0053] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0054] Figure 1 FIG. 1 is a flow chart of a web page layout method in an embodiment of the present invention. Figure 1 As shown, an embodiment of the present invention provides a web page layout method, including:

[0055] Determine the parent element on the web page;

[0056] Divide the parent element into multiple parts on the x-axis and y-axis respectively;

[0057] Determine sub-elements and texture coordinates;

[0058] Calculate the number of shares of the texture coordinates on the x-axis and y-axis of the parent element respectively;

[0059] The position of the child element in the parent element is determined by calculating at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element.

[0060] The method in this embodiment can be applied to various scenarios where web page layout is required.

[0061] Based on the disclosure of the above embodiments, it can be known that the beneficial effects of this embodiment include determining the parent element on the web page, dividing the parent element into multiple parts on the x-axis and y-axis, determining the child elements and texture coordinates, calculating the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element, and then determining the position of the child element in the parent element based on at least the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element. Based on the above method, the decoupling of page layout from components and HTML elements can be achieved, that is, the decoupling of business and layout can be achieved, so that the operation of page layout can be done by configuring the corresponding coordinates, and the content of the child elements can be directly handed over to the components for display. Business personnel no longer need to care about the connection between layout and business and other related issues, and can focus on developing the specific business and functions of child elements. In addition, the method configuration of this embodiment divides the coordinate system of the width and height of the parent element so that the child elements can be flexibly configured through coordinates, which is more convenient for various forms of layout. The method of this embodiment also supports the interchangeability of child elements of the same size. When the size of the parent element changes, the child elements can automatically enlarge and reduce proportionally, which is convenient for developers to develop and significantly improves page layout efficiency.

[0062] Specifically, the parent element in this embodiment is formed by a part of the area or the whole area on the web page. For example, the parent element can be a certain section on the page, that is, a certain area, or the whole page. For example, if there is only one area on the page about the book advertisement, then the area of ​​the book advertisement on the page can be considered as a parent element, or if the entire page is about the book advertisement, then all areas of the page are the parent element.

[0063] Further, Figure 1 FIG. 1 is a flow chart of a web page layout method in another embodiment of the present invention. Figure 2 As shown, in this embodiment, the calculation of the number of shares of the texture coordinates respectively on the x-axis and y-axis of the parent element includes:

[0064] Determine the texture coordinates as [[a,b],[c,d]], wherein a and b represent the starting positions of the sub-element in the x-axis and y-axis directions, respectively, and c and d represent the ending positions of the sub-element in the x-axis and y-axis directions, respectively;

[0065] Based on the position of the sub-element in the x-axis direction, the number of the sub-element in the x-axis direction is calculated and determined to be (c-a+1);

[0066] Based on the position of the sub-element on the y-axis, the number of shares of the sub-element on the y-axis is determined to be (d-b+1).

[0067] The step of calculating and determining the position of the child element in the parent element based at least on the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element comprises:

[0068] Based on the number of shares of the child element in the x-axis and y-axis, the proportion of the child element relative to the parent element in the x-axis and y-axis is calculated and determined;

[0069] The position of the child element in the parent element is determined based at least on the proportion calculation.

[0070] Further, determining the position of the child element in the parent element based at least on the proportion calculation includes:

[0071] Get the length values ​​of the parent element in the x-axis direction and the y-axis direction respectively, where the length values ​​of the x-axis direction and the y-axis direction are the width and height values ​​of the parent element respectively;

[0072] Determine the width and height of the child element based on the width and height of the parent element and the proportion;

[0073] The position of the child element in the parent element is determined by calculation based at least on the width and height values ​​of the child element.

[0074] Further, calculating and determining the position of the child element in the parent element based at least on the width and height of the child element includes:

[0075] Based on the starting position of the child element in the x-axis and y-axis directions, determine the percentage value of the child element from the boundary of the parent element in the x-axis and the percentage value of the child element from the boundary of the parent element in the y-axis;

[0076] The position of the child element in the parent element is determined based on the percentage value and the width and height values ​​of the child element.

[0077] Specifically, in order to better illustrate the above embodiment, the following is described in conjunction with a specific embodiment:

[0078] 1) First, determine the parent element, and divide the width and height of the parent element into corresponding parts according to the x-axis and y-axis, for example, the x-axis is divided into 6 parts, the x value is 6, and the y-axis is divided into 12 parts, the y value is 12, wherein the size of each part in the x-axis is the same, and the size of each part in the y-axis is the same, but the size of each part in the x-axis and the y-axis can be the same or different, and the specific size is not unique. In addition, the number of parts in each axis only represents an embodiment, and can be divided into more or fewer parts in actual application;

[0079] 2) Determine the coordinate attribute on each sub-element, that is, the texture coordinate. The texture coordinate can be determined according to the actual content of the sub-element, for example, the texture coordinate value can be [[3,2], [5,8]], where [3,2] represents the starting position of the x-axis and the y-axis, and [5,8] represents the ending position of the x-axis and the y-axis. Based on the texture coordinates and the number of shares along each axis determined in step 1, it can be calculated that the number of shares of the sub-element on the x-axis is (5-3+1), that is, 3 shares, and the number of shares on the y-axis is (8-2+1), that is, 7 shares.

[0080] 3) By using the number of copies of the child element on the x-axis and y-axis, it can be calculated that the current child element occupies 3 / 6 of the parent element in the x-axis direction and 7 / 12 of the parent element in the y-axis direction;

[0081] 4) Calculate the width and height of the child element by the width and height of the parent element and the proportion of the child element on the x-axis and y-axis;

[0082] 5) Based on the starting position of the child element on the x-axis and y-axis, such as [3,2] above, we can calculate that the percentage of the child element in the parent element to the left (the boundary along the x-axis, equivalent to the width value) is (3-1) / 6*100, and the percentage of the child element in the parent element to the top (the boundary along the y-axis, equivalent to the height value) is (2-1) / 12*100;

[0083] 6) Use percentage values ​​and the width and height values ​​of child elements to position child elements at corresponding positions under parent elements to achieve page layout effects.

[0084] Furthermore, the method in this embodiment also includes:

[0085] Determine the position of each of the child elements on the parent element based on the texture coordinates of the child elements;

[0086] Based on the position, a plurality of areas are divided on the parent element for matching and displaying corresponding child elements.

[0087] That is, based on the above method, the position of each child element under the parent element is determined on the parent element, and the corresponding area position is marked on the parent element based on the position of each child element. For details, please refer to Figure 3 As shown, Figure 3 In the attached figure shown in , the parent element is divided into 38 parts along the x-axis and 31 parts along the y-axis. At this time, the page is divided into multiple areas, and the texture coordinates, position coordinates and other characteristic parameters of the sub-elements can also be identified on the multiple areas. The current page divided into areas can be used as a template. When the developer needs to layout the web page, he can select a matching template according to the sub-elements to be set to quickly complete the page layout.

[0088] Furthermore, the method in this embodiment also includes:

[0089] The child elements with the same texture coordinates can swap their positions in the parent element.

[0090] As mentioned above, the page currently divided into sub-element layout areas can be regarded as a template, and sub-elements with different contents can be configured in each area, but the size parameter (one of the sub-element characteristic parameters) of each sub-element must be the same as the size parameter of the corresponding area. Therefore, the user can arbitrarily select a sub-element of the same size and layout it in an area of ​​matching size for display. This provides convenience for developers in page layout, making the layout more flexible and efficient, and no longer restricted by the previous coupling relationship between business, components, and HTML elements. Developers can flexibly configure the above-mentioned sub-element coordinates and subsequently switch the display position of sub-elements with the same size parameters relative to the parent element, which can not only improve the efficiency of page layout, but also realize more page layouts that developers want.

[0091] Furthermore, the method in this embodiment also includes:

[0092] When the parent element responds to the instruction to change the interface size, the child element determines the change parameter of the interface size and performs a proportional size change accordingly based on the change parameter.

[0093] For example, when child elements have been added to a parent element, when the parent element receives a resize instruction, it responds to the instruction and changes the interface, that is, the page size. All child elements will accordingly determine the size change parameters of the parent element, such as the specific change amount, and make proportional size changes based on the change parameters and their own size, that is, proportional scaling. This does not require manual changes by developers, which provides convenience for developers and further improves the efficiency and flexibility of page layout.

[0094] like Figure 4 As shown, another embodiment of the present invention also provides a web page layout device, including:

[0095] A first determination module, used to determine a parent element on a web page;

[0096] A division module, used for dividing the parent element into multiple parts on the x-axis and the y-axis respectively;

[0097] A second determination module is used to determine the sub-element and the texture coordinates;

[0098] A first calculation module, used for calculating the number of shares of the texture coordinates respectively occupied by the x-axis and the y-axis of the parent element;

[0099] The second calculation module is used to calculate and determine the position of the child element in the parent element based on at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis of the parent element.

[0100] Based on the disclosure of the above embodiments, it can be known that the beneficial effects of this embodiment include determining the parent element on the web page, dividing the parent element into multiple parts on the x-axis and y-axis, determining the child elements and texture coordinates, calculating the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element, and then calculating and determining the position of the child element in the parent element at least based on the number of parts occupied by the texture coordinates on the x-axis and y-axis of the parent element. Based on the above device, the decoupling of page layout from components and HTML elements can be achieved, that is, the decoupling of business and layout can be achieved, so that the operation of page layout can be done by configuring the corresponding coordinates, and the content of the child elements can be directly handed over to the components for display. Business personnel no longer need to care about the connection between layout and business and other related issues, and can focus on developing the specific business and functions of the child elements. In addition, the device configuration of this embodiment divides the coordinate system of the width and height of the parent element so that the child elements can be flexibly configured through coordinates, which is more convenient for various forms of layout. The device of this embodiment also supports the interchangeable positions of child elements of the same size. When the size of the parent element changes, the child elements can automatically enlarge and reduce proportionally, which is convenient for developers to develop and significantly improves page layout efficiency.

[0101] As an optional embodiment, the parent element is formed by a partial area or the entire area on the web page.

[0102] As an optional embodiment, the calculating the number of shares of the texture coordinates respectively in the x-axis and y-axis directions of the parent element includes:

[0103] Determine the texture coordinates as [[a,b],[c,d]], wherein a and b represent the starting positions of the sub-element in the x-axis and y-axis directions, respectively, and c and d represent the ending positions of the sub-element in the x-axis and y-axis directions, respectively;

[0104] Based on the position of the sub-element in the x-axis direction, the number of the sub-element in the x-axis direction is calculated and determined to be (c-a+1);

[0105] Based on the position of the sub-element on the y-axis, the number of shares of the sub-element on the y-axis is determined to be (d-b+1).

[0106] As an optional embodiment, the calculating and determining the position of the child element in the parent element based at least on the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element includes:

[0107] Based on the number of shares of the child element in the x-axis and y-axis, the proportion of the child element relative to the parent element in the x-axis and y-axis is calculated and determined;

[0108] The position of the child element in the parent element is determined based at least on the proportion calculation.

[0109] As an optional embodiment, the determining the position of the child element in the parent element at least based on the proportion calculation includes:

[0110] Get the length values ​​of the parent element in the x-axis direction and the y-axis direction respectively, where the length values ​​of the x-axis direction and the y-axis direction are the width and height values ​​of the parent element respectively;

[0111] Determine the width and height of the child element based on the width and height of the parent element and the proportion;

[0112] The position of the child element in the parent element is determined by calculation based at least on the width and height values ​​of the child element.

[0113] As an optional embodiment, the calculating and determining the position of the child element in the parent element based at least on the width and height of the child element includes:

[0114] Based on the starting position of the child element in the x-axis and y-axis directions, determine the percentage value of the child element from the boundary of the parent element in the x-axis and the percentage value of the child element from the boundary of the parent element in the y-axis;

[0115] The position of the child element in the parent element is determined based on the percentage value and the width and height values ​​of the child element.

[0116] As an optional embodiment, it also includes:

[0117] A third determination module, used to determine the position of each of the child elements on the parent element according to the texture coordinates of the child elements;

[0118] Based on the position, a plurality of areas are divided on the parent element for matching and displaying corresponding child elements.

[0119] As an optional embodiment, it also includes:

[0120] The exchange module is used to exchange the positions of the child elements with the same texture coordinates in the parent element.

[0121] As an optional embodiment, it also includes:

[0122] The fourth determination module is used for, when the parent element responds to the instruction to change the interface size, the child element determines the change parameter of the interface size and performs proportional size change accordingly based on the change parameter.

[0123] Another embodiment of the present invention further provides an electronic device, comprising:

[0124] one or more processors;

[0125] a memory configured to store one or more programs;

[0126] When the one or more programs are executed by the one or more processors, the one or more processors are enabled to implement the above method.

[0127] An embodiment of the present invention further provides a storage medium on which a computer program is stored, and when the program is executed by a processor, the method described above is implemented. It should be understood that each solution in this embodiment has the corresponding technical effect in the above method embodiment, which will not be repeated here.

[0128] The embodiment of the present invention also provides a computer program product, which is tangibly stored on a computer-readable medium and includes computer-readable instructions, and when the computer-executable instructions are executed, at least one processor executes the method in the embodiment described above. It should be understood that each solution in this embodiment has the corresponding technical effect in the above method embodiment, which will not be repeated here.

[0129] It should be noted that the computer storage medium of the present application may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access storage medium (RAM), a read-only storage medium (ROM), an erasable programmable read-only storage medium (EPROM or flash memory), an optical fiber, a portable compact disk read-only storage medium (CD-ROM), an optical storage medium, a magnetic storage medium, or any suitable combination of the above. In the present application, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate or transmit a program configured to be used by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, antenna, optical cable, RF, etc., or any suitable combination of the above.

[0130] It should be understood that although the present application is described according to various embodiments, not every embodiment contains only one independent technical solution. This narrative method of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment may also be appropriately combined to form other implementation methods that can be understood by those skilled in the art.

[0131] The above embodiments are only exemplary embodiments of the present invention and are not intended to limit the present invention. The protection scope of the present invention is defined by the claims. Those skilled in the art may make various modifications or equivalent substitutions to the present invention within the essence and protection scope of the present invention, and such modifications or equivalent substitutions shall also be deemed to fall within the protection scope of the present invention.

Claims

1. A web page layout method, characterized in that: include: Determine the parent element on the web page; Divide the parent element into multiple parts on the x-axis and y-axis respectively; Determine sub-elements and texture coordinates; Calculate the number of shares of the texture coordinates on the x-axis and y-axis of the parent element respectively; Determine the position of the child element in the parent element by calculating at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element; The calculating and determining the position of the child element in the parent element based at least on the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element comprises: Based on the number of shares of the child element in the x-axis and y-axis, the proportion of the child element relative to the parent element in the x-axis and y-axis is calculated and determined; Get the length values ​​of the parent element in the x-axis direction and the y-axis direction respectively, where the length values ​​of the x-axis direction and the y-axis direction are the width and height values ​​of the parent element respectively; Determine the width and height of the child element based on the width and height of the parent element and the proportion; Based on the starting position of the child element in the x-axis and y-axis directions, determine the percentage value of the child element from the boundary of the parent element in the x-axis and the percentage value of the child element from the boundary of the parent element in the y-axis; The position of the child element in the parent element is determined based on the percentage value and the width and height values ​​of the child element.

2. The web page layout method according to claim 1, characterized in that: The parent element is formed by a part or all of the area on the web page.

3. The web page layout method according to claim 1, characterized in that: The calculating the number of shares of the texture coordinates respectively on the x-axis and the y-axis of the parent element comprises: Determine the texture coordinates as [[a,b],[c,d]], wherein a and b represent the starting positions of the sub-element in the x-axis and y-axis directions, respectively, and c and d represent the ending positions of the sub-element in the x-axis and y-axis directions, respectively; Based on the position of the sub-element in the x-axis direction, the number of the sub-element in the x-axis direction is calculated and determined to be (c-a+1); Based on the position of the sub-element on the y-axis, the number of shares of the sub-element on the y-axis is determined to be (d-b+1).

4. The web page layout method according to claim 1, characterized in that: Also includes: Determine the position of each of the child elements on the parent element based on the texture coordinates of the child elements; Based on the position, a plurality of areas are divided on the parent element for matching and displaying corresponding child elements.

5. The web page layout method according to claim 1, characterized in that: Also includes: The child elements with the same texture coordinates can swap their positions in the parent element.

6. The web page layout method according to claim 1, characterized in that: Also includes: When the parent element responds to the instruction to change the interface size, the child element determines the change parameter of the interface size and performs a proportional size change accordingly based on the change parameter.

7. A web page layout device, characterized in that: include: A first determination module, used to determine a parent element on a web page; A division module, used for dividing the parent element into multiple parts on the x-axis and the y-axis respectively; A second determination module is used to determine the sub-element and the texture coordinates; A first calculation module, used for calculating the number of shares of the texture coordinates respectively occupied by the x-axis and the y-axis of the parent element; A second calculation module, used for calculating and determining the position of the child element in the parent element based on at least the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element; The step of calculating and determining the position of the child element in the parent element based at least on the number of portions of the texture coordinates respectively occupied in the x-axis and y-axis directions of the parent element comprises: Based on the number of shares of the child element in the x-axis and y-axis, the proportion of the child element relative to the parent element in the x-axis and y-axis is calculated and determined; Get the length values ​​of the parent element in the x-axis direction and the y-axis direction respectively, where the length values ​​of the x-axis direction and the y-axis direction are the width and height values ​​of the parent element respectively; Determine the width and height of the child element based on the width and height of the parent element and the proportion; Based on the starting position of the child element in the x-axis and y-axis directions, determine the percentage value of the child element from the boundary of the parent element in the x-axis and the percentage value of the child element from the boundary of the parent element in the y-axis; The position of the child element in the parent element is determined based on the percentage value and the width and height values ​​of the child element.

Images