HTML and CSS tutorial-Chapter 1 use CSS style to complete webpage Layout

 

Chapter 4 Use CSS style to complete webpage Layout
Key points of this Chapter
How to center web pages
Implementation of Float-based Web Page Layout
Implementation of Complex layout of text and text Mixing

Directory:
11.1 CSS webpage Layout
11.2 centered webpage
11.3 float-based webpage Layout
11.4 Complex layout

11.1 CSS webpage Layout
1. Significance of CSS web page layout
CSS is used for webpage layout to enrich website information and improve webpage performance. Its significance is embodied in the following aspects:
 
(1) make the page Load faster
(2) more efficient Design Modification
(3) maintain consistency
(4) more friendly to viewers and browsers

2. CSS Box Model
W3C recommends placing all objects on a web page in a box. You can create a definition to control the attributes of the box. The box model mainly defines four areas: content, padding, border, and margin ). The levels of margin, padding, content, and border affect each other.

3. Basic Idea of CSS webpage Layout
When using CSS for webpage layout, we mainly consider the semantics and structure of the page content. Because a webpage controlled by CSS can easily adjust the webpage style after the webpage is completed. One purpose of CSS layout is to make the code easy to read, block clearly, and enhance code reuse. Therefore, the structure is very important.

11.2 centered webpage
1. Automatic Blank edge center design
Take the layout code of a fixed-width column as an example to add a CSS style centered on it, mainly to set the margin attribute:
Margin: 0px auto;
The margin attribute is used to control the margin of the object in the top, right, bottom, and left directions. When margin uses two parameters, the first parameter indicates the top and bottom margins, and the second parameter indicates the left and right margins.

2. Positioning center design
It is the most common method to center an Automatic Blank edge, but you can also use the positioning and negative blank edge to align the center.
First, define the container width.
Set the position attribute of the container to absolute, and set the left attribute to 50%. This positions the left edge of the container in the middle of the page, but you need to center the container. Therefore, you need to apply a negative blank edge to the left of the container, and the width is equal to half of the width of the container. This will move the container to the left half of its width, so that it is centered on the page.

11.3 float-based webpage Layout
The float-based webpage layout is to set the width of the elements to be located and then float them to the left or right. Because floating elements no longer occupy the space in the document flow, they are no longer affected by the borders surrounding them. Therefore, floating elements on each point in the layout need to be cleared.

1. Two-Column Layout
To use float to create two-column la S, you must first have a basic framework. In the following example, an HTML page consists of the header area, homepage area, and footer. The main page area is divided into two columns, the left column is used as the navigation page, and the right column is used as the display page. The main page area is the two-column layout implemented by float. The entire design is placed in a DIV, which uses the method described above to center horizontally.

2. Multi-Column Layout
One way is to set the layout of the two columns, the sum of the bandwidth in the left and right columns does not occupy the entire parent container, and then put it in the third column, it will float to the free space, that is, the middle position, in this way, three columns can be deployed.

Another method is to add the new divs firstright and secondright to the right column DIV in the layout of the two columns, and divide the right column into two columns.
Then, you can use the same style as the layout of the two columns to set the corresponding width and height for each newly added column. Then, the firstright column is moved to the left and the secondright column is moved to the right. Essentially, the right column is divided into two more columns to form the effect of three columns.

11.4 Complex layout
1. Dynamic Layout
In the dynamic layout, the size of the subject is set in percentages instead of pixels, so the user's resolution can be adaptive. This allows the dynamic layout to be scaled relative to the browser window. The columns become wider as the browser window grows. On the contrary. The column width decreases as the window decreases. A suitable dynamic layout will make the page better on the big screen and small screen.

2. Elastic Layout
The auto layout uses the relative font size to set the width of the element. You can use em to set the width of the layout when the font size increases. This can keep the President within the readable range. The appropriate elastic layout of the application is user-friendly and all elements on the page can be scaled.

3. Dynamic-elastic hybrid Layout
You can combine elastic and dynamic technologies to create a hybrid layout. In this hybrid mode, set the width in EM and set the maximum width in percentages. In a browser that supports max-width, this layout scales with the font size, but never exceeds the window width.

4. Dynamic and elastic Images
If you choose to use dynamic or elastic la S, a fixed-width image will have an impact on the design. When the layout width is reduced by an hour, the image will move and may affect each other. The image will be displayed with the natural minimum width, thus affecting the reduction of the size of some elements. Some images go beyond the elements that contain them, undermining the adjusted design. There are several ways to avoid these problems.
 
(1) For images that need to span large areas, you can consider using background images instead of image elements.
(2) If the image needs to be an image element on the page, set the width of the container element to 100% and set the overflow attribute to hidden.
(3) You can add image elements to a page without any size. Set the percent width of the image and add the same Max-width as the image width to avoid pixel distortion ).

5. pseudo Column Layout
The pseudo-column layout method is to apply duplicate background images to elements of a parent layer (such as a container Div). This background image is used to reflect the height of the Left layer, because the parent object will be held up by the high column. This technology is described in the faux column term.

For a fixed-width layout of two columns, you only need to apply a vertical duplicate background image on the container element. The width of the background image is the same as that of the left column. However, this duplicate background image must span the entire width of the container, which contains two columns. Applying this image in the same way as before will produce the faux three-column effect.