CN110377281A - A kind of method and device of dynamic generation HTML+CSS layout - Google Patents
A kind of method and device of dynamic generation HTML+CSS layout Download PDFInfo
- Publication number
- CN110377281A CN110377281A CN201910470180.2A CN201910470180A CN110377281A CN 110377281 A CN110377281 A CN 110377281A CN 201910470180 A CN201910470180 A CN 201910470180A CN 110377281 A CN110377281 A CN 110377281A
- Authority
- CN
- China
- Prior art keywords
- layout
- css
- html
- default
- newly
- 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
- 238000000034 method Methods 0.000 title claims abstract description 34
- 239000004744 fabric Substances 0.000 claims description 2
- 238000005516 engineering process Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003321 amplification Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
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
Abstract
The present invention relates to a kind of method and devices of dynamic generation HTML+CSS layout, wherein this method comprises: step 1, generates external frame model based on default or newly-built application scenarios；The application scenarios are default or newly-built according to display size；Step 2, inner frame is built in external frame based on default or newly-built layout type, generates HTML+CSS placement scheme；The layout type includes table-layout, floating is laid out, elasticity is laid out, a variety of in network topology.The layout of complex page can be rapidly completed in the present invention.
Description
Technical field
The method and dress being laid out the invention belongs to page layout technical field more particularly to a kind of dynamic generation HTML+CSS
It sets.
Background technique
Before CSS is not widely used also, html table is usually used to the selection of page layout, Content Organizing is expert at
In column, although this mode can quickly establish page framework, just need to change a large amount of HTML code if you need to modify.
CSS makes content (HTML) and performance (CSS) separation after occurring.With gradualling mature for CSS technology, it is more and more laid out skill
Art occurs, and various front-end technology frames are also to emerge one after another.
CSS provides a variety of topologies and can use in the page, needs reasonably using just Pages Design capable of being made reasonable.
Some simple lists can realize that front end frame also provides general by one or two of topology in actual application
Page layout technology, but most of pages need to can be completed by a variety of topology nestings, and layout process is cumbersome, effect
Rate is lower, poor for the layout applicability of complex page.
Summary of the invention
The object of the present invention is to provide a kind of method and devices of dynamic generation HTML+CSS layout, to be suitable for complicated page
The layout in face, and improve the efficiency of page layout.
The present invention provides a kind of methods of dynamic generation HTML+CSS layout, comprising:
Step 1, external frame model is generated based on default or newly-built application scenarios；Application scenarios are pre- according to display size
If or newly-built；
Step 2, inner frame is built in external frame based on default or newly-built layout type, generates HTML+CSS cloth
Office's scheme；Layout type includes table-layout, floating is laid out, elasticity is laid out, a variety of in network topology.
Further, step 2 further include:
Based on nested layout type, layout is increased newly in the HTML+CSS layout of generation；Nested layout type are as follows: nesting 1
The nested n-layer layout of layout layer, nested 2 layout layers ..., n is natural number.
Further, step 2 further include:
Based on layout positioning method, it is laid out positioning；Being laid out positioning method includes relative positioning, absolute fix, fixation
It is a variety of in positioning, Z-index.
Further, step 1 further include:
Preset application scenarios are saved into default layout table and/or save newly-built application scenarios to individual and are laid out
In table.
Further, step 2 further include:
The HTML+CSS placement scheme generated based on New Layout's mode is saved into personal layout table and/or will be based on
The HTML+CSS placement scheme that default layout type generates is saved into default layout table.
Further, after step 2 further include:
Export page layout and HTML+CSS code.
The present invention also provides a kind of devices of dynamic generation HTML+CSS layout, comprising:
Frame model generation module, for generating external frame model based on default or newly-built application scenarios；It is described to answer
It is default or newly-built according to display size with scene；
Placement scheme generation module, for building interior sash in external frame based on default or newly-built layout type
Frame generates HTML+CSS placement scheme；The layout type includes table-layout, floating is laid out, elasticity is laid out, in network topology
It is a variety of.
Further, the placement scheme generation module is based on nested layout type, in the HTML+CSS layout of generation
Newly-increased layout；The nesting layout type are as follows: the nested n-layer layout of nested 1 layout layer, nested 2 layout layers ..., n is natural number.
Further, the placement scheme generation module is based on layout positioning method, is laid out positioning；The layout is fixed
Position mode includes relative positioning, absolute fix, stationary positioned, a variety of in Z-index.
Further, the frame model generation module preset application scenarios are saved into default layout table and/or
Newly-built application scenarios are saved into personal layout table；
The placement scheme generation module saves the HTML+CSS placement scheme generated based on New Layout's mode to a
It saves in people's layout table and/or by the HTML+CSS placement scheme generated based on default layout type into default layout table.
According to the above aspect of the present invention, the method and device being laid out by dynamic generation HTML+CSS, can be rapidly completed complicated page
The layout in face.
The above description is only an overview of the technical scheme of the present invention, in order to better understand the technical means of the present invention,
And can be implemented in accordance with the contents of the specification, the following is a detailed description of the preferred embodiments of the present invention and the accompanying drawings.
Detailed description of the invention
Fig. 1 is a kind of flow chart of the method for dynamic generation HTML+CSS layout of the present invention；
Fig. 2 is a kind of flow chart of the device of dynamic generation HTML+CSS layout of the present invention；
Fig. 3 is a kind of Application Example of the method for dynamic generation HTML+CSS layout of the present invention；
Fig. 4 is the embodiment of nested layout in a kind of method of dynamic generation HTML+CSS layout of the present invention.
Specific embodiment
With reference to the accompanying drawings and examples, specific embodiments of the present invention will be described in further detail.Implement below
Example is not intended to limit the scope of the invention for illustrating the present invention.
Join a kind of method that dynamic generation HTML+CSS layout is present embodiments provided shown in Fig. 1, comprising:
Step S1 generates external frame model based on default or newly-built application scenarios；Application scenarios are according to display size
It is default or newly-built；
Step S2 builds inner frame based on default or newly-built layout type in external frame, generates HTML+CSS
Placement scheme；Layout type includes table-layout, floating is laid out, elasticity is laid out, a variety of in network topology.It specifically includes:
1, layout layer is defined.
A kind of layout type is selected from each layout type:
1.1 if table-layout.
HTML then generates table-layout element tags.
CSS then generates all fronts, three lines, without first table Style Attributes.
1.2 are laid out if floating
HTML then generates floating layout element label.
CSS then generate to the left, to the right, remove Style Attributes.
1.3 are laid out if elasticity
HTML then generates elasticity layout element tags.
CSS then generates box Style Attributes (major axes orientation, line feed, lineshaft registration mode, intersecting axle alignment thereof, multiaxis
Line alignment thereof) and content genres attribute (putting in order, amplification ratio, drawdown ratio, main shaft space, single element alignment thereof).
1.4 if network topology
HTML then generates network topology element tags.
CSS then generates box Style Attributes, and (row definition arranges definition, ranks name definition, network compartments size, along row axis
Alignment thereof, along column axis alignment thereof, grid track size) and content genres attribute (content name definition, initial position,
Final position, single element alignment thereof).
2, other attributes in definition layer
Height in layer is set, width, lines, projection, inset spacing, outer back gauge, background color enrich the effect of current layer.
3, nested layout layer is defined
After having defined outer layer layout, the method for repeatable step 1 and step 2 defines nesting level.
The HTML and CSS of 4 output current arrangements.
The method being laid out by dynamic generation HTML+CSS, can be rapidly completed the layout of complex page.
In the present embodiment, step 2 further include:
Based on nested layout type, layout is increased newly in the HTML+CSS layout of generation；Nested layout type are as follows: nesting 1
The nested n-layer layout of layout layer, nested 2 layout layers ..., n is natural number.
In the present embodiment, step S2 further include:
Based on layout positioning method, it is laid out positioning；Being laid out positioning method includes relative positioning, absolute fix, fixation
It is a variety of in positioning, Z-index.It specifically includes:
1, it positions: relative positioning
It is positioned relative to the normal position of an element.
2, it positions: absolute fix
Element is positioned using absolute value.The position of element is by " left ", " top ", " right " and "
" attribute is provided bottom.
3, it positions: stationary positioned
Element is positioned relative to browser window.The position of element is by " left ", " top ", " right " with
And " bottom " attribute is provided.
4、Z-index
Z-index can be used for will be after an element be placed in another element.
In the present embodiment, step S1 further include:
Preset application scenarios are saved into default layout table and/or save newly-built application scenarios to individual and are laid out
In table.
In the present embodiment, step S2 further include:
The HTML+CSS placement scheme generated based on New Layout's mode is saved into personal layout table and/or will be based on
The HTML+CSS placement scheme that default layout type generates is saved into default layout table.
In the present embodiment, step S2 further include:
The HTML+CSS placement scheme that will be generated based on New Layout's mode.
In the present embodiment, upon step s 2 further include:
Export page layout and HTML+CSS code.
Join shown in Fig. 2, the present embodiment additionally provides a kind of device of dynamic generation HTML+CSS layout, comprising:
Frame model generation module 10, for generating external frame model based on default or newly-built application scenarios；It is described
Application scenarios are default or newly-built according to display size；
Placement scheme generation module 20, for building interior sash in external frame based on default or newly-built layout type
Frame generates HTML+CSS placement scheme；The layout type includes table-layout, floating is laid out, elasticity is laid out, in network topology
It is a variety of.
The device being laid out by dynamic generation HTML+CSS, can be rapidly completed the layout of complex page.
In the present embodiment, placement scheme generation module 20 is based on nested layout type, is laid out in the HTML+CSS of generation
In increase newly layout；The nesting layout type are as follows: the nested n-layer layout of nested 1 layout layer, nested 2 layout layers ..., n is natural number.
In the present embodiment, placement scheme generation module 20 is based on layout positioning method, is laid out positioning；The layout
Positioning method includes relative positioning, absolute fix, stationary positioned, a variety of in Z-index.
In the present embodiment, frame model generation module 10 by preset application scenarios save to default layout table neutralize/
Or newly-built application scenarios are saved into personal layout table；
Placement scheme generation module 20 saves the HTML+CSS placement scheme generated based on New Layout's mode to individual
It saves in layout table and/or by the HTML+CSS placement scheme generated based on default layout type into default layout table.
In the present embodiment, page layout figure and HTML+CSS code are exported by output module.
Join shown in Fig. 3, following functions may be implemented using the method that dynamic generation HTML+CSS is laid out:
1, user's registration logs in.User registers in page end input handset number and after obtaining identifying code, and user is believed
Breath is stored.User can check existing HTML+CSS placement scheme after logging in.
2, layout is generated.
1) application scenarios.User selects default application scenarios or newly-built application scenarios to generate external frame model.It is default to answer
It can provide popular application scenarios layout templates with scene.Default application scenarios include web common-size (1366*768 pixel),
Mobile device (750*1334 pixel).Application scenarios can be created if any specialized page demand.
2) it is laid out.User selects default layout type or New Layout's mode to build inner frame in application scenarios.
3) layout is nested.User increases layout (as shown in Figure 4) newly in existing layout.
4) layout is saved.User saves layout or application scenarios into personal layout table, uses after convenient.
3, share layout.User shares the HTML+CSS placement scheme being stored in personal layout library.
4, it manages.
1) application scenarios management is preset.Management administrator is managed the information of default application.
2) layout management is preset.Administrator is managed default layout type.
3) default layout is saved.Administrator saves layout or application scenarios into default layout table.
Quickly complex page can be laid out through the invention, provide good management to page layout.
The above is only a preferred embodiment of the present invention, it is not intended to restrict the invention, it is noted that for this skill
For the those of ordinary skill in art field, without departing from the technical principles of the invention, can also make it is several improvement and
Modification, these improvements and modifications also should be regarded as protection scope of the present invention.
Claims (10)
1. a kind of method of dynamic generation HTML+CSS layout characterized by comprising
Step 1, external frame model is generated based on default or newly-built application scenarios；The application scenarios are pre- according to display size
If or newly-built；
Step 2, inner frame is built in external frame based on default or newly-built layout type, generates the layout side HTML+CSS
Case；The layout type includes table-layout, floating is laid out, elasticity is laid out, a variety of in network topology.
2. the method for dynamic generation HTML+CSS layout according to claim 1, which is characterized in that the step 2 is also wrapped
It includes:
Based on nested layout type, layout is increased newly in the HTML+CSS layout of generation；The nesting layout type are as follows: nesting 1
The nested n-layer layout of layout layer, nested 2 layout layers ..., n is natural number.
3. the method for dynamic generation HTML+CSS layout according to claim 1, which is characterized in that the step 2 is also wrapped
It includes:
Based on layout positioning method, it is laid out positioning；The layout positioning method includes relative positioning, absolute fix, fixation
It is a variety of in positioning, Z-index.
4. the method for dynamic generation HTML+CSS layout according to claim 1, which is characterized in that the step 1 is also wrapped
It includes:
Preset application scenarios are saved into default layout table and/or save newly-built application scenarios to personal layout table
In.
5. the method for dynamic generation HTML+CSS layout according to claim 1, which is characterized in that the step 2 is also wrapped
It includes:
The HTML+CSS placement scheme generated based on New Layout's mode is saved into personal layout table and/or will be based on default
The HTML+CSS placement scheme that layout type generates is saved into default layout table.
6. the method for dynamic generation HTML+CSS layout according to any one of claims 1 to 5, which is characterized in that in institute
After stating step 2 further include:
Export page layout and HTML+CSS code.
7. a kind of device of dynamic generation HTML+CSS layout characterized by comprising
Frame model generation module, for generating external frame model based on default or newly-built application scenarios；The applied field
Scape is default or newly-built according to display size；
Placement scheme generation module, it is raw for building inner frame in external frame based on default or newly-built layout type
At HTML+CSS placement scheme；The layout type includes table-layout, floating is laid out, elasticity is laid out, more in network topology
Kind.
8. the device of dynamic generation HTML+CSS layout according to claim 7, which is characterized in that the placement scheme is raw
It is based on nested layout type at module, increases layout newly in the HTML+CSS layout of generation；The nesting layout type are as follows: nested
The nested n-layer layout of 1 layout layer, nested 2 layout layers ..., n is natural number.
9. the device of dynamic generation HTML+CSS layout according to claim 7, which is characterized in that the placement scheme is raw
It is based on layout positioning method at module, is laid out positioning；The layout positioning method includes relative positioning, absolute fix, consolidates
It is a variety of in positioning, Z-index.
10. the device of dynamic generation HTML+CSS layout according to claim 7, which is characterized in that the frame model
Preset application scenarios are saved into default layout table and/or save newly-built application scenarios to individual and are laid out by generation module
In table；
The placement scheme generation module saves the HTML+CSS placement scheme generated based on New Layout's mode to personal cloth
It saves in office's table and/or by the HTML+CSS placement scheme generated based on default layout type into default layout table.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910470180.2A CN110377281A (en) | 2019-05-31 | 2019-05-31 | A kind of method and device of dynamic generation HTML+CSS layout |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910470180.2A CN110377281A (en) | 2019-05-31 | 2019-05-31 | A kind of method and device of dynamic generation HTML+CSS layout |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110377281A true CN110377281A (en) | 2019-10-25 |
Family
ID=68249593
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910470180.2A Pending CN110377281A (en) | 2019-05-31 | 2019-05-31 | A kind of method and device of dynamic generation HTML+CSS layout |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110377281A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102707945A (en) * | 2012-04-11 | 2012-10-03 | 佳都新太科技股份有限公司 | Implementation method of form designer based on layout template in Eclipse |
| CN102737106A (en) * | 2011-03-31 | 2012-10-17 | 埃森哲环球服务有限公司 | Form layout method and system |
| CN102789379A (en) * | 2011-05-20 | 2012-11-21 | 中兴通讯股份有限公司 | Method and device for constructing user interface |
| EP2833260A1 (en) * | 2013-08-02 | 2015-02-04 | Alcatel Lucent | Method and system for graphical user interface layout generation, computer program product |
| CN108090159A (en) * | 2017-12-12 | 2018-05-29 | 福建中金在线信息科技有限公司 | A kind of generation method of Website page, device, electronic equipment and storage medium |
-
2019
- 2019-05-31 CN CN201910470180.2A patent/CN110377281A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102737106A (en) * | 2011-03-31 | 2012-10-17 | 埃森哲环球服务有限公司 | Form layout method and system |
| CN102789379A (en) * | 2011-05-20 | 2012-11-21 | 中兴通讯股份有限公司 | Method and device for constructing user interface |
| CN102707945A (en) * | 2012-04-11 | 2012-10-03 | 佳都新太科技股份有限公司 | Implementation method of form designer based on layout template in Eclipse |
| EP2833260A1 (en) * | 2013-08-02 | 2015-02-04 | Alcatel Lucent | Method and system for graphical user interface layout generation, computer program product |
| CN108090159A (en) * | 2017-12-12 | 2018-05-29 | 福建中金在线信息科技有限公司 | A kind of generation method of Website page, device, electronic equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| WINNE雪: "HTML+CSS 五种布局方式", 《HTTPS://BLOG.CSDN.NET/M0_38134431/ARTICLE/DETAILS/84372226》 * |
| 李莉 等: "《Android开发实例化教程》", 31 August 2015, 北京邮电大学出版社 * |
| 胡绵涛 等: "CEGUI界面编辑器的设计与实现", 《计算机与现代化》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106648945B (en) | Interface data testing method and device and electronic equipment | |
| CN104424235B (en) | The method and apparatus for realizing user profile cluster | |
| CN105786526B (en) | A kind of efficient flow figure drawing system and method based on Web | |
| CN103365855B (en) | Method and server for generating web pages | |
| CN106033389B (en) | Test case methods of exhibiting and device | |
| CN104063361B (en) | Report design method and Report Form Design system | |
| CN103325061B (en) | A kind of community discovery method and system | |
| CN108984172A (en) | A kind of generation method and device of interface file | |
| CN103235719B (en) | The method and apparatus set up a web site | |
| CN103345522B (en) | Displaying processing, methods of exhibiting and the device of data | |
| CN108416827A (en) | A kind of planar design autoplacement device and method analyzed based on data-driven and material | |
| CN106296425A (en) | Attributed graph clustering method based on Weight associating Non-negative Matrix Factorization and system | |
| CN106780363A (en) | Picture processing method and device and electronic equipment | |
| CN101295251B (en) | Interface issuing method and device | |
| CN104461548B (en) | The adding method and device of code snippet | |
| CN103123646A (en) | Conversion method for automatically converting XML document into OML document and device | |
| CN110795093B (en) | Interactive view generation method and device | |
| CN106649428A (en) | Analyzing method and apparatus of storage files | |
| CN110377281A (en) | A kind of method and device of dynamic generation HTML+CSS layout | |
| CN104835121B (en) | Tone mapping method with entropy principle is constrained based on Infinite Norm | |
| CN106372253A (en) | Route planning method and system | |
| US10417805B2 (en) | Method for automatic constructing three-dimensional indoor scenario with behavior-constrained | |
| CN105260345B (en) | Method and device for constructing facial characters and electronic equipment | |
| CN105260317B (en) | A kind of choosing method of test case | |
| CN105183745A (en) | Method based on data visualization analysis |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191025 |