CN112464122A - Grid-based mobile terminal H5 page grid layout method - Google Patents
Grid-based mobile terminal H5 page grid layout method Download PDFInfo
- Publication number
- CN112464122A CN112464122A CN202011375117.XA CN202011375117A CN112464122A CN 112464122 A CN112464122 A CN 112464122A CN 202011375117 A CN202011375117 A CN 202011375117A CN 112464122 A CN112464122 A CN 112464122A
- Authority
- CN
- China
- Prior art keywords
- page
- grid
- alignment
- mobile terminal
- based mobile
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The grid-based mobile terminal H5 page grid layout method divides the content filled in the H5 page into a plurality of grids, sets the layout mode of the H5 page, sets the alignment mode of the H5 page according to the alignment attribute of the H5 page, reduces the code amount and reduces the redundancy rate, and relates to the field of web page layout.
Description
Technical Field
The invention relates to the field of webpage layout, in particular to a grid-based mobile terminal H5 webpage grid layout method.
Background
When writing a mobile terminal H5 page, a pure css floating or flex layout mode is usually adopted, and only a transverse one-dimensional layout is adopted, so that for the css style written by the mobile terminal, the code amount is increased, and the redundancy is high.
Disclosure of Invention
In order to solve the defects of the prior art, an embodiment of the present invention provides a grid-based mobile terminal H5 page grid layout method, including the following steps:
dividing the content filled in the H5 page into a plurality of grids by using a grid layout method;
setting a layout mode of an H5 page;
and setting the alignment mode of the H5 page according to the alignment attribute of the H5 page.
Preferably, dividing the content filled in the H5 page into a plurality of grids using a grid layout method includes:
the display attribute display of the root node element in the H5 page is set to gidd.
Preferably, the setting of the layout mode of the H5 page includes:
the layout of the H5 page is set to horizontal/vertical.
Preferably, according to the alignment attribute of the H5 page, setting the alignment mode of the H5 page includes:
the alignment mode of the H5 page is set as a line alignment mode by giving specific parameters to the alignment attribute justify-items or justify-self of the root node element in the H5 page.
Preferably, according to the alignment attribute of the H5 page, setting the alignment mode of the H5 page includes:
the alignment mode of the H5 page is set as a column alignment mode by giving specific parameters to the alignment attribute align-items or align-self of the root node element in the H5 page.
Preferably, the method further comprises:
the number of columns of the grid in the H5 page is set by assigning specific parameters to the attribute grid-template-columns of the root node element in the H5 page.
Preferably, the method further comprises:
and (4) giving specific parameters to grid-row attributes of child node elements in the H5 page, and executing a line crossing operation on the child node elements.
Preferably, the method further comprises:
and (4) giving specific parameters to grid-column attributes of child node elements in the H5 page, and executing cross-column operation on the child node elements.
The grid-based mobile terminal H5 page grid layout method provided by the embodiment of the invention has the following beneficial effects:
(1) the H5 page can be laid out in two dimensions, which is more convenient and visual;
(2) the code amount is reduced, and the redundancy is reduced.
Drawings
Fig. 1 is a schematic flow chart of a grid-based mobile terminal H5 page grid layout method according to an embodiment of the present invention;
fig. 2 is a schematic diagram of multiple grids for dividing content filled in an H5 page according to an embodiment of the present invention.
Detailed Description
The present invention will be described in detail with reference to the following embodiments.
The grid-based mobile terminal H5 page grid layout method provided by the embodiment of the invention comprises the following steps:
s101, dividing the content filled in the H5 page into a plurality of grids by using a grid layout method.
The gird layout does not depend on the structure of the dom nodes, and the whole page is divided into a plurality of grids, as shown in fig. 2, the whole H5 page comprises 5 modules, and one module is one grid.
S102, setting a layout mode of the H5 page.
S103, setting the alignment mode of the H5 page according to the alignment attribute of the H5 page.
Optionally, dividing the content filled in the H5 page into a plurality of grids by using a grid layout method includes:
the display attribute display of the root node element in the H5 page is set to gidd.
Optionally, setting a layout manner of the H5 page includes:
the layout of the H5 page is set to horizontal/vertical.
Optionally, according to the alignment attribute of the H5 page, setting the alignment manner of the H5 page includes:
the alignment mode of the H5 page is set as a line alignment mode by giving specific parameters to the alignment attribute justify-items or justify-self of the root node element in the H5 page.
As a specific example, the alignment of the H5 page is set to the centered row alignment by setting the attribute justify-items to center.
Optionally, according to the alignment attribute of the H5 page, setting the alignment manner of the H5 page includes:
the alignment mode of the H5 page is set as a column alignment mode by giving specific parameters to the alignment attribute align-items or align-self of the root node element in the H5 page.
As a specific example, by setting the attribute align-items to left, the alignment of the H5 page is set to the left column alignment.
Optionally, the method further comprises:
the number of columns of the grid in the H5 page is set by assigning specific parameters to the attribute grid-template-columns of the root node element in the H5 page.
As a specific example, by assigning the attribute grid-template-columns to the parameter lfr 1fr 1fr, the number of columns of the grid is set to three columns and the width of the grid is adaptive, that is, the size of each row and each column is set flexibly.
Optionally, the method further comprises:
and (4) giving specific parameters to grid-row attributes of child node elements in the H5 page, and executing a line crossing operation on the child node elements.
Optionally, the method further comprises:
and (4) giving specific parameters to grid-column attributes of child node elements in the H5 page, and executing cross-column operation on the child node elements.
As a specific embodiment, as shown in fig. 2, if the module 3 spans 2 columns, it can be implemented by assigning the attribute grid column to the value 2.
According to the grid-based mobile terminal H5 page grid layout method provided by the embodiment of the invention, the grid layout method is utilized to divide the content filled in the H5 page into a plurality of grids, the layout mode of the H5 page is set, and the alignment mode of the H5 page is set according to the alignment attribute of the H5 page, so that the code amount is reduced, and the redundancy is reduced.
In the foregoing embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
It will be appreciated that the relevant features of the method and apparatus described above are referred to one another.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
The algorithms and displays presented herein are not inherently related to any particular computer, virtual machine, or other apparatus. Various general purpose systems may also be used with the teachings herein. The required structure for constructing such a system will be apparent from the description above. Moreover, the present invention is not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the present invention as described herein, and any descriptions of specific languages are provided above to disclose the best mode of the invention.
In addition, the memory may include volatile memory in a computer readable medium, Random Access Memory (RAM) and/or nonvolatile memory such as Read Only Memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). The memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The above are merely examples of the present application and are not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.
Claims (8)
1. A grid-based mobile terminal H5 page grid layout method is characterized by comprising the following steps:
dividing the content filled in the H5 page into a plurality of grids by using a grid layout method;
setting a layout mode of an H5 page;
and setting the alignment mode of the H5 page according to the alignment attribute of the H5 page.
2. The grid-based mobile terminal H5 page grid layout method of claim 1, wherein the dividing content filled in the H5 page into a plurality of grids by using the grid layout method comprises:
the display attribute display of the root node element in the H5 page is set to gidd.
3. The grid-based mobile terminal H5 page grid layout method of claim 1, wherein setting a layout mode of H5 pages includes:
the layout of the H5 page is set to horizontal/vertical.
4. The grid-based mobile terminal H5 page grid layout setting method of claim 1, wherein setting an alignment mode of H5 pages according to an alignment attribute of H5 pages comprises:
the alignment mode of the H5 page is set as a line alignment mode by giving specific parameters to the alignment attribute justify-items or justify-self of the root node element in the H5 page.
5. The grid-based mobile terminal H5 page grid layout method of claim 1, wherein setting an alignment mode of H5 pages according to the alignment attributes of H5 pages comprises:
the alignment mode of the H5 page is set as a column alignment mode by giving specific parameters to the alignment attribute align-items or align-self of the root node element in the H5 page.
6. The grid-based mobile terminal H5 page grid layout method according to any one of claims 1-5, further comprising:
the number of columns of the grid in the H5 page is set by assigning specific parameters to the attribute grid-template-columns of the root node element in the H5 page.
7. The grid-based mobile terminal H5 page grid layout method according to any one of claims 1-5, further comprising:
and (4) giving specific parameters to grid-row attributes of child node elements in the H5 page, and executing a line crossing operation on the child node elements.
8. The grid-based mobile terminal H5 page grid layout method according to any one of claims 1-5, further comprising:
and (4) giving specific parameters to grid-column attributes of child node elements in the H5 page, and executing cross-column operation on the child node elements.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011375117.XA CN112464122A (en) | 2020-11-30 | 2020-11-30 | Grid-based mobile terminal H5 page grid layout method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011375117.XA CN112464122A (en) | 2020-11-30 | 2020-11-30 | Grid-based mobile terminal H5 page grid layout method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112464122A true CN112464122A (en) | 2021-03-09 |
Family
ID=74806275
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011375117.XA Pending CN112464122A (en) | 2020-11-30 | 2020-11-30 | Grid-based mobile terminal H5 page grid layout method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112464122A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113468460A (en) * | 2021-09-02 | 2021-10-01 | 北京优锘科技有限公司 | Method, device and equipment for rendering Web page based on YAML (Yaml language) |
| CN113536179A (en) * | 2021-06-21 | 2021-10-22 | 北京达佳互联信息技术有限公司 | Page generation method and device, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101609403A (en) * | 2009-07-29 | 2009-12-23 | 金蝶软件（中国）有限公司 | A kind of page layout dynamic switch method and system |
| CN105608084A (en) * | 2014-11-14 | 2016-05-25 | 北大方正集团有限公司 | Regulation method and device of webpage page layout |
| CN110032692A (en) * | 2019-01-04 | 2019-07-19 | 阿里巴巴集团控股有限公司 | Method, apparatus, calculating equipment and machine readable storage medium for layout page |
-
2020
- 2020-11-30 CN CN202011375117.XA patent/CN112464122A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101609403A (en) * | 2009-07-29 | 2009-12-23 | 金蝶软件（中国）有限公司 | A kind of page layout dynamic switch method and system |
| CN105608084A (en) * | 2014-11-14 | 2016-05-25 | 北大方正集团有限公司 | Regulation method and device of webpage page layout |
| CN110032692A (en) * | 2019-01-04 | 2019-07-19 | 阿里巴巴集团控股有限公司 | Method, apparatus, calculating equipment and machine readable storage medium for layout page |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113536179A (en) * | 2021-06-21 | 2021-10-22 | 北京达佳互联信息技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113536179B (en) * | 2021-06-21 | 2023-12-26 | 北京达佳互联信息技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113468460A (en) * | 2021-09-02 | 2021-10-01 | 北京优锘科技有限公司 | Method, device and equipment for rendering Web page based on YAML (Yaml language) |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11726679B2 (en) | Applying endurance groups to zoned namespaces | |
| CN112464122A (en) | Grid-based mobile terminal H5 page grid layout method | |
| CN102687121B (en) | Error recovery in stacked storage | |
| CN102081964A (en) | Method and system for refreshing dynamic random access memory | |
| JP2014199545A (en) | Program, parallel operation method, and information processor | |
| CN106899426B (en) | User access number statistical method and system thereof | |
| US11042518B2 (en) | Blockchain-based hierarchical data storage | |
| US20210056088A1 (en) | Blockchain based hierarchical data storage | |
| CN102567514A (en) | Data processing method and system | |
| US11620503B2 (en) | Neural network processing | |
| CN106844288A (en) | A kind of random string generation method and device | |
| CN111680472A (en) | Table data processing method and device, computer equipment and readable storage medium | |
| CN104346407A (en) | Method and device thereof for interacting data of report form and XML file in data reporting system | |
| CN106610824B (en) | Page height self-adaption method and device | |
| CN109948083B (en) | Webpage processing method and device | |
| CN104598409A (en) | Method and device for processing input and output requests | |
| CN107506369A (en) | A kind of data access method and equipment | |
| CN110020291B (en) | Webpage layout processing method and device | |
| CN111914524A (en) | Method and device for automatically generating table data | |
| CN106469174B (en) | Method for reading data and device | |
| CN110795421A (en) | Method for preventing dirty data from being generated | |
| CN103218314B (en) | A kind of data buffer storage device being applied to parallel filtering computing | |
| CN109582938B (en) | Report generation method and device | |
| CN111694904A (en) | Method for storing and retrieving road data in map | |
| CN101620571A (en) | Method and device for managing addresses of memory space |
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 |