Study Notes on CSS website layout recording (5)

Chapter 5 CSS content Layout

5.1 text Layout

5.1.1 topic Layout

When you typeset the main bar of a webpage, you only need to directly place the paragraph text in p or other objects, and then apply the style control such as spacing, line spacing, and font size to the paragraph text to form a prototype of layout.

5.1.2 Column Layout

CSS2 technology cannot directly achieve column-based layout for common paragraph text. If you want to achieve double-or three-column layout like newspapers, A two-column control must be formed by the floating positioning of two divs like the two-column layout, and then the text must be filled in the two columns respectively. The XHTML code is as follows:

      ...     ... 

For two-column layout, two divs are placed in the container # layout. The CSS code is as follows:

   { :; :; }  { :; :; }  { :; :; :; }

The width and padding of The. col used for column sharding are written and moved to the left to meet the requirements for two-column layout. This is consistent with the principle of the two-column layout.

The use of CSS2 column layout is not a good solution. text is divided into two sections and placed in two divs, which does not guarantee the scalability in the future. Column-count and column-width attributes are provided for section CSS3.

5.2 text and text mixed Layout

In traditional table layout, you often insert a table, insert an image into the table, and apply the align attribute to control the Center, Center, or right display of the image. In CSS layout, more implementations will be achieved.

5.2.1 basic image control

The text-align attribute is used to control the center display of the content in the object. After this attribute is applied, the img object can also be centered in the div. In practice, text may sometimes be moved around the Image Layout. In this case, you can use the floating Positioning method to set the object's float attribute to let the text content flow to the side of the object.

5.2.2 irregular text wrapping

It is a special way to enclose text, that is, to enclose text along the irregular edges of an image. However, div and img are inserted into the page in the form of squares, and the browser cannot identify the edge of the image. In this case, some technical means are required.

Because the image itself is square-like and the layout cannot change its status, it is impossible to insert an image into a paragraph separately. Only the image is placed in the text as a background. Background and text are two-layer hanging. You want to use a div object to create a nearly irregular nature. You need to insert some divs before the paragraph. The XHTML code is as follows:

      CSS FAQ                                                  ... 

Nine div objects are inserted and their content is kept empty. We hope that the nine div blocks have their own width and height to form an irregular edge effect. The CSS code is as follows:

   { :; :; }  {:;:; } {:;:; } {:;:; } {:;:; } {:;:; } {:;:; } {:;:; } {:;:; } {:;:; }

First, the nine squares are arranged with float: left, and each square is arranged with clear: left, so that floating objects are not allowed on the left, in this way, each div does not float each other. Because the text does not have the clear attribute, it is close to the right of all Divs.

5.3 full Graph Layout

The core of CSS layout for full-Graph Layout is its control of floating positioning and its flexibility. You can use CSS to change the style of Full-Graph Layout at any time. The XHTML code is as follows:

                         Title: Sun         Date: 2014-4-29                             Title: Wind         Date: 2014-4-29                             Title: Cloud         Date: 2014-4-29                             Title: Rain         Date: 2014-4-29     

In the above Code, # layout is used as the main container and div is used to place images. The purpose of using div is. It is convenient to control the image width. In addition to adding images, you can also add other information, such as the film name and shooting time. The CSS code is as follows:

   { :; :; :; :; :; :; :; :; }  { :; :; :; :; }  { :; :; }

In the preceding CSS code, a 1 px border line is added to the div image area under each # layout, and float: left is used to arrange the images in sequence, you can set the margin to control the padding effect between the image and other images. You can set the width and height of the div to make it arranged neatly and orderly. You can set the padding to make the image and the edge have a certain amount of space; to ensure that the div is pulled up because the text is too long, you can set overflow: hidden to access the expanded object of the content. Finally, you can set the text style.

5.4 table layout

5.4.1 full use of table labels

In traditional table layout design, three table labels, table tr, and td are often used. XHTML also provides many table-specific labels, which are described in the previous chapter and are not described here.

5.4.2 table style Control

The style of a table is no different from that of other objects. You can also use attributes such as margin, padding, border, and background to operate tables.

5.4.3 form Table Design

Because the formatting in the form is also implemented through the form, you can simply design the form through the form style.