Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the steps of making DIV CSS?

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the steps of making DIV CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the steps of making DIV CSS.

First, analyze the art drawing of belt cutting

It is essential to analyze web art drawings before CSS is made, and the lack of analysis will make your layout messy. Our analysis should also follow the content from the whole to the part, from the outside to the inside, and from the top to the bottom:

1. Web page structure

Analyze the structure of the web page, so that you can figure out how to layout the web page frame, such as analyzing the left and right, upper and lower structure of the web page, so as to facilitate the grasp of the overall layout.

Such as important headers, content parts, and bottom copyright.

What is the structure of the content part and how the layout can be split.

2. The analysis needs to cut out the picture material.

Analyze the web art drawings that serve as the background of the web page and those are the content images.

As a web background image, if the background is not repeated, the content on the occluded background picture is generally hidden and then cut out as a whole, and if the background can be tiled and displayed repeatedly, how can we cut out and reduce the size of the material?

3. Special effect analysis.

If there are special effects in the web page, how can we achieve it? we can also find special effects to embed. At this time, we need to collect more commonly used CSS+JS special effects (CSS special effects, CSS modules) to facilitate layout.

4. Overall grasp

Through the overall and local analysis, we should have a clear idea of the CSS layout of this web page, how to lay out the overall frame, how to split the structural layout of the web page, whether there are difficulties in the part, and how to solve the difficulties.

Second, cut out the material

According to the analysis of the first step, cut out the pictures and materials in the web page, and export the slices by PS.

General picture GIF format, if the picture is translucent, generally export PNG format (ie6 png transparent solution), picture content is generally exported to jpg format.

Third, introduce DIVCSS5 initialization template

A copy of the initialization template will be copied and the folder project name will be named. The provided initialization css template, including CSS file (style.css), HTML file (index.html), and images folder for putting pictures, has been created with a new common folder structure.

CSS template

Fourth, put the cut-out web page image material into the initialization template

We put the web material pictures into the images folder of the new project.

Start the layout from top to bottom and from the outside to the inside

1. Basic modification settings

Generally use DW software to open index.html, first of all to make basic settings, such as according to the web page art drawing using PS to get the text color, background color, set the font color, background color, if the background is the picture in the setting of CSS background picture.

2. Grasp the layout

Generally, the layout is from top to bottom, from the outside to the inside, first the largest structural frame of the same level, and then the local layout.

For example, the head, we begin to layout the outermost div box of the head, set the center of the css layout, the width of css, etc., and then layout the upper and lower structure of the head, and then set the local left and right frame and the final layout content (the left and right layout generally uses css float style).

For example, the left and right structure content, generally first layout the outermost box, follow the layout around the structure of 2 boxes, and then return to the left box, start to layout the left side of the content. Beginners do not want to layout the outermost box, start to layout the left and left content, while the right structure does not set the layout, if this can easily lead to layout confusion and layout errors.

Important: must first the outermost layer, how to correspond to the left and right box large frame layout, and then go back to the left or right side from top to bottom layout part.

The above layout to grasp the layout steps so that you are organized in the layout, not easy to cause layout confusion and no way to start.

At the same time, when laying out, you may not be sure whether your layout is correct or not. You can test compatibility in a browser while laying out. Novices should never test after laying out a web page in the software. This can easily lead to incorrect compatibility problems. Testing in the layout can find problems and solve problems, making DIV+CSS pages more compatible.

When laying out, you may encounter:

Css naming

Css hack

6. Test css compatibility and complete layout

After the web page layout is finished, the final commonly used browser compatibility test is carried out, and finally adjusted and modified, so that a html web page from the web page art drawing to the completion of css is completed.

At this point, I believe you have a deeper understanding of "what are the steps of DIV CSS production?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report