Layout of one column on the second day

Today, we begin to learn the layout of a column in "ten days to learn web standards (div + CSS)", which includes the following forms:

• Fixed width of a column
• Center a column with fixed width
• Adaptive width of one column
• Center an adaptive width Column
• One column, two blocks at most

In the previous section, we reviewed the basics of XHTML and CSS. Today, we officially started our webpage design journey with Dreamweaver, produced by Adobe. I believe you have used this software before. I will not talk about how to use it. To take care of some of our friends, the CSS part of today's course is visually generated. However, we recommend that you write as much as possible to improve efficiency.

I. fixed width of a column

Let's take a look at a column with fixed width. First, we need to create a new page:

Note: The document type here is transitional. Currently we use this loose verification method.

Next, insert a div tag in the page. You can click the "insert Div tag" button in the toolbar to name the DIV in the displayed dialog box, let's name it layout (the name is based on your needs ).

After the DIV is inserted, In the CSS style panel on the right, define the style with the ID of layout. Then, design the width of 500 and the height of 300 in the box option of the open CSS edit dialog box. For the sake of clarity, we set a background color for this Div so that we can preview the size and position.

Select "advanced" here and enter "# layout" in the selector. If you select a div and click "add", it will be automatically added. Because it is a definition ID, we need to add # first. The detailed description of ID and class will be provided later.

Let's preview it and see the Display Effect in IE. A column of fixed width is made in this way. It's easy! The CSS code is shown as follows in IE:

<Style type = "text/CSS">
# Layout {Height: 300px; width: 400px; Background: #99 ffcc ;}
</Style>

 

  Tip: you can modify some code before running it.

 

2. fixed width center of one column

Compared with a column with a fixed width, we need to solve the problem of center. Here we use the margin attribute of CSS: margin. In IE6 and later versions and standard browsers, when you set the margin: auto; of a box model, you can center the box model. Add this attribute to the CSS style sheet to see the effect:

# Layout {Height: 300px; width: 400px; Background: #99 ffcc; margin: auto ;}

In the Dreamweaver design view, check whether the center is already in the center. Let's preview the center in IE.

 

 

  Tip: you can modify some code before running it.

 

3. Adaptive width of one column

The adaptive width is different from the browser. The width of the box model changes with the browser width. The percentage of width is used. When the width of a box model is not set, it is displayed relative to the browser by default. Let's remove the width in the fixed width example:

# Layout {Height: 300px; Background: #99 ffcc ;}

Some friends may ask, why are there white edges so wide? This is caused by the default margin of the body. Body, h1-h6, UL, and other elements have margins or other styles by default when we do not define any style sheets. Here we add the following item to the CSS style: body {margin: 0;} to remove the default outer margin of the body. Then we can preview it and the white edge will be gone.

Body {margin: 0px ;}
# Layout {Height: 300px; Background: #99 ffcc ;}

Here, the selector type is the easiest place for new friends to confuse. Class: Refers to defining a class that can be referenced by multiple objects. Label: Refers to redefining the default HTML Tag, for example, you can define the body {margin: 0}, which means to set the outer margin of the body to 0, while H2 {color: # f00} sets the text color of all H2 labels to red; in advanced mode, the ID and pseudo class are put together, which is an unreasonable place and has been separated in cs4. Id starts with #. ID can only act on one object and cannot act on multiple objects. Priority is higher than class, which is the difference between ID and class. Pseudo classes will be explained in detail in section 9

If we need to display it by 80% of the browser, set the width to 80%. When the browser window size is changed, the width of the box model will also change.

 

  Tip: you can modify some code before running it.

 

4. Adaptive center of one column

Similarly, as with the fixed width center, we only need to set the DIV's outer margin to auto to realize center.

Body {margin: 0px ;}
# Layout {margin: auto; Height: 300px; Background: #99 ffcc; width: 80% ;}

 

  Tip: you can modify some code before running it.

 

5. One column, two columns, and multiple block la s

The General website can be divided into the upper and lower structures, that is, the header, the middle body, and the bottom. We can use three Div blocks to divide them into headers, maincontent, and footer ).

The Code is as follows:

Body {margin: 0; padding: 0 ;}
# Header {margin: 5px auto; width: 500px; Height: 80px; Background: #9f9 ;}
# Main {margin: 5px auto; width: 500px; Height: 400px; Background: # 9ff ;}
# Footer {margin: 5px auto; width: 500px; Height: 80px; Background: #9f9 ;}

For easy differentiation, the background color is set in the background item, which is not in the texture. In this way, the other two DIV blocks are set, and the whole effect is displayed. This is the layout structure of most websites.

 

  Tip: you can modify some code before running it.

 

 

Many may ask: why is the spacing between two adjacent containers not 10px, but 5px? According to our normal understanding, we think it should be the sum of two values. In fact, here is the maximum value after the two values are merged. In the CSS manual, vertical adjacent outer margins of block-level elements are merged, while intra-row elements do not actually occupy the upper and lower margins. The left and right margins of the element in the row are not merged. Similarly, the margins of floating elements are not merged. Allow negative margin values, but be careful when using them (Concepts about block-level elements and intra-row elements are described in the next section ).

Vi. Summary

This course involves the following knowledge points:

1. Visual CSS generation and formatting

This tutorial is easy for beginners to learn and uses the dw css visual generation method. Skilled friends should write as much as possible to improve work efficiency. At present, we hope everyone can remember it. CSS formatting refers to CSS formatting. A careful friend has found that the CSS code I posted here is written in one row for each class or ID. Maybe you still divide them into multiple rows. How can you get them to one row? See the following code and illustration:

Body {
Margin: 0;
Padding: 0;
}
# Header {
Margin: 5px auto;
Width: 500px;
Height: 80px;
Background: #9f9;
}
# Main {
Margin: 5px auto;
Width: 500px;
Height: 400px;
Background: # 9ff;
}
# Footer {
Margin: 5px auto;
Width: 500px;
Height: 80px;
Background: #9f9;
}

After the above three steps, check whether your code is the same as mine. Also

2. CSS abbreviations

Many Attributes of CSS can be abbreviated as follows:

Select the project to be abbreviated and then generate the CSS code in short form. Here is a short form of combining multiple attributes into one piece. You can also use the color value for short. For example, the color value is # ff6600; it can be abbreviated as # f60; two digits can be abbreviated as # c2c2c2.

3. CSS syntax

CSS syntax consists of the following three parts: the selector can be ID, class, or tag; the attribute and value are used to define a feature of this object. For example, if the length of a table is 120, the width is 60, and the format of CSS is used, the table {length: 120; width: 60;} is not easy to understand.

4. ID and class selector

ID can only correspond to one element on the page, just like our ID card number. Each person has a different ID. Class is a class and can correspond to multiple elements, such as first-year and third-class students, it may correspond to 10 20 students.

The priority of ID is higher than that of class. For example, James stayed to clean the students in Class 3 today. Therefore, class 3 students have a physical education class, while Xiao Ming's cleaning is an ID. Although Xiao Ming is also a student in class 3, the ID is higher than the class, so xiao ming executes the cleaning task.