CSS Box Mode 1 (Quick Start with DIV Layout)_html/css

CSS Box Mode 1 (Quick Start with DIV Layout)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:28:17

Original

1067 people have browsed it

The center has recently recruited dozens of people, and I have become a little whirlwind. It seems that I will have to stay on this mountain for a few more days. After all, there are dozens of people, so how can we just leave it alone? I’ll post a post first to warm up! I also hope that the senior brothers and sisters from the previous years can give me more

advice.

The attribute names we often hear in web design: content, padding, border, margin, CSS box mode all have these attributes. We can understand these attributes by transferring them

to the boxes (boxes) in our daily life. The boxes we see in our daily life also have these attributes, so it is called the box pattern. Then the content is what is in the box; the filling is the foam or other earthquake-resistant auxiliary materials added to prevent the

things (valuable) in the box from being damaged; the border is the box itself; as for the border, it describes the box When placing them, they should not be piled together. A certain gap should be left for ventilation and

for easy removal. In web design, content often refers to text, pictures and other elements, but it can also be small boxes (DIV nested). Unlike boxes in real life, things in real life generally cannot be larger than boxes

otherwise the box will be stretched and damaged, and the CSS box is elastic. The things inside are larger than the box itself and will stretch it at most, but it will not be damaged. The filling only has the width attribute, which can be understood as the thickness of the anti-seismic accessories

in the boxes in life, while the border has size and color, which we can understand as the thickness of the boxes we see in life and what the box is used for. Made of colored materials, the boundary is the distance between the box and other things. In real life

suppose we place boxes of different sizes and colors at certain intervals and in a certain order in a square. Finally, when we look down from the square, we see the shapes and The structure is similar to the web page layout design we want to do

The traditional front-end web design is carried out like this: according to the requirements, first consider the main color and what type of pictures to use , what fonts, colors, etc. to use, and then use software such as Photoshop to freely draw them,

and finally cut them into small pictures, and no longer freely design HTML to generate pages. After switching to CSS for typesetting, we To change this idea, ***at this time we mainly consider the semantics and structure of the page content***, because a webpage with strong

CSS control, after the webpage is completed, you can easily Adjust the web page style you want. Moreover, another purpose of CSS layout is to make the code readable, clear the blocks, and enhance code reuse, so the structure is very important.

If you want to say that my web design is very complicated, will it be possible to achieve that effect later? What I want to tell you is that if the effect cannot be achieved with CSS, it is generally difficult to achieve it with tables, because the control power of CSS is too powerful. By the way, it is better to use CSS for typesetting A very practical advantage is that if you are taking orders to build a website, if you use CSS to layout the web page, if the customer is not satisfied with it later, especially the color

, then it will be easy to change it It's quite easy. You can even customize several styles of CSS files for customers to choose from, or write a program to implement dynamic calls, so that the website can dynamically change styles.

Achieving the separation of structure and presentation

Before starting the real layout practice, let’s understand one more thing? The separation of structure and presentation. This also uses the characteristics of CSS layout, the separation of structure and presentation. Finally, the code will be concise and easy to update. Isn't this the purpose of learning CSS? For example, P is a structured tag. Where there is a P tag, it indicates that this is a paragraph block. Margin is a performance attribute. I want to indent the right side of a paragraph by 2 characters. Some people will think of adding a space

space, and then continue to add spaces, but now you can specify a CSS style for the P tag: P {text-indent: 2em;}, so that the resulting body content is as follows, without any additional performance control tags:

Code:

Please support (Shantou Little Tornado)

If you want to modify this paragraph with font, font size, background, line spacing, etc., just add it directly Just add the corresponding CSS to the P style. There is no need to write it like this:

Code:

Paragraph content< /font>

This is written with a mixture of structure and expression. If many paragraphs have a unified structure and expression, it will be cumbersome to write the code in this way.

In example:

Typesetting with CSS

Code:

结构代码是这样的：代码:

Homepage

< ;a href="#">Article

Album

Blog

Forum< /li>
Help

Second paragraph