Supercharge Your Innovation With Domain-Expert AI Agents!

Webpage CSS structure automatic generation method and storage medium

A technology for automatic generation and web pages, applied in WEB pages and the Internet field, to achieve the effects of easy maintenance, clear CSS structure, and wide application range

Pending Publication Date: 2021-04-13
SHANGHAI BILIBILI TECH CO LTD
View PDF0 Cites 1 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0005] The purpose of the present invention is to overcome the above-mentioned shortcoming in the prior art, provide a kind of method, device and storage medium that can realize the automatic generation of CSS structure of webpage under the complex situation of WEB project structure, thus facilitate maintenance, improve programmer's work efficiency

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Webpage CSS structure automatic generation method and storage medium
  • Webpage CSS structure automatic generation method and storage medium
  • Webpage CSS structure automatic generation method and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0063] Such as image 3 As shown, the method for automatically generating a webpage CSS structure in this embodiment may include the following steps:

[0064] Step 1: Open a webpage in the browser, create a container element in the webpage, and set the unique identification (id) of the container, such as "main", the sample code is as follows:

[0065]

[0066] Step 2: Obtain the HTML code of the CSS organization structure to be generated, such as a parent div element whose style name (class) is page, and there are three div elements whose style names (classes) are header banner, content, and footer respectively, and the style name There is an h1 element whose style name (class) is page-title under the child div element (class) of header banner. The corresponding sample code is as follows:

[0067]

[0068] Step 3: assign the HTML code obtained in step 2 to the innerHTML attribute of the container element, this step will generate a child DOM tree with the container eleme...

Embodiment 2

[0087] Many WEB systems have implemented permission control and require users to log in before using it. Therefore, the login page is indispensable in many systems as an entry. In this scenario, usually on the login page, the user needs to enter the user name, password, verification code, etc. In order to make the page more beautiful, you need to use the corresponding CSS to control the style of the page elements. In addition, there are input box titles, input prompts, error prompts, success prompts, etc. need to write corresponding CSS.

[0088] Using the method for automatically generating webpage CSS structure of the present invention, a DOM tree can be generated according to a given HTML structure, and then the DOM tree can be traversed through JavaScript to obtain the hierarchical relationship and sequence of each node, and then a CSS structure corresponding to the hierarchy and sequence can be generated. It roughly includes the following steps:

[0089] Step A: Obtain t...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention relates to a webpage CSS structure automatic generation method and device and a storage medium, and belongs to the technical field of the Internet. The method comprises the following steps: firstly, creating a container element in a webpage, and setting an identifier of the container element; assigning the HTML code to the container element, and generating a DOM tree taking the identifier of the container element as a father node; and then traversing all nodes of the DOM tree, and generating the corresponding CSS structure, so that the automatic generation of the webpage CSS structure is realized, the CSS structure is clear and convenient to maintain especially under the conditions of complex WEB project structure and more levels of DOM elements, and the working efficiency of programmers is greatly improved. The webpage CSS structure automatic generation device is simple in structure, limited in application cost and very wide in application range.

Description

technical field [0001] The invention relates to the technical field of the Internet, in particular to the technical field of WEB pages, in particular to a method for automatically generating a CSS structure of a web page and a storage medium. Background technique [0002] Usually, at the beginning of a WEB project, the project structure is relatively simple, and there may be only a few pages. At this time, some basic CSS selectors, such as .title, input, #app, etc. can be used, and a few lines of code can be written by hand. Finish. However, as the application grows larger, the front-end interaction on the page will increase. Coupled with the semantic requirements of the HTML structure, the hierarchical relationship of the DOM elements will become more and more, and the CSS code will become more and more complex. At this time, if you still write the code line by line, the efficiency will be very low. [0003] On the other hand, if the hierarchical relationship of the CSS s...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F8/30
CPCG06F8/315
Inventor 王海洋
Owner SHANGHAI BILIBILI TECH CO LTD
Features
  • R&D
  • Intellectual Property
  • Life Sciences
  • Materials
  • Tech Scout
Why Patsnap Eureka
  • Unparalleled Data Quality
  • Higher Quality Content
  • 60% Fewer Hallucinations
Social media
Patsnap Eureka Blog
Learn More

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2025 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com