If you want to try to typeset web pages without using tables, you can use CSS to typeset your web pages, that is, you can often use DIV to orchestrate your web page structure, or you want to learn about the standard design of web pages, or your boss wants you to change the traditional form layout mode to improve the competitiveness of enterprises, one of the things you must understand is the CSS box mode, which is the core of DIV layout, traditional table formatting uses different sizes of tables and nested tables to locate typographical Web content. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. Because the web page code in this way is concise, easy to update, and compatible with more browsers, such as PDA devices, can also be browsed normally, it is worthwhile to discard the favorite table layout, more importantly, the advantages of CSS typographical web pages are far more than that. I will not mention them here. I can search for relevant information myself.
Understanding the CSS box model
What is the CSS box mode? Why is it a box? First, let's talk about the attribute names that we often hear in Web Design: content, padding, border, and margin all have these attributes.
The CSS box pattern attributes can be transferred to the box (box) in our daily life for understanding. The box we see in our daily life also has these attributes, so it is called The Box pattern. Then the content is what is installed in the box, and the filling is the foam or other anti-seismic accessories added for fear of damage (valuable) in the box; the border is the box itself; as for the boundary, it means that the boxes cannot be all stacked together. Leave some gaps to maintain ventilation, and at the same time to facilitate the removal. In webpage design, content often refers to text, images, and other elements, but it can also be a small box (DIV nesting). Unlike in real life, in real life, things generally cannot be bigger than the box, otherwise the box will be broken, while the CSS box is elastic, and the content inside is bigger than the box itself, but it will not be damaged. Fill only has the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has big and small colors, we can also understand the thickness of the box we see in our lives and the color of the box. The boundary is the distance between the box and other things. In real life, suppose we place boxes of different sizes and colors in a certain gap and order on a square, and finally look down over the square, the figure and structure we see are similar to the webpage layout we want to design, as shown in the figure below.
Web page layout piled up by a box
How much do I understand the CSS box mode? If it is not thorough enough, I will give an example later and explain it with the concept of a box.
Change our thinking
The traditional front-end webpage design is like this: according to requirements, we should first consider the dominant colors, types of images to be used, fonts and colors, and so on, then we can use Photoshop and other software to draw them freely. Finally, we can cut them into small images. We can't design HTML to generate pages freely. After CSS is used, we need 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 can easily adjust the webpage style you want after the webpage is completed, in addition, the CSS layout aims to make the code easy to read, clear blocks, and enhance code reuse. Therefore, the structure is very important. If you want to say that my webpage design is complex, can you achieve that later? What I want to tell you is that if CSS cannot be used to achieve the effect, it is difficult to use tables, because CSS control capabilities are too powerful, by the way, CSS layout has a very practical advantage: if you are using a single website, and if you are using a CSS layout webpage, what will be unsatisfactory to the customer later, in particular, it is quite easy to change the color. You can even customize CSS files of several styles for customers to choose from, or write a program to achieve dynamic calling, allows websites to dynamically change their styles.
1st 2 3 4 5 6 7 pages
