Next, create a folder on the desktop named "DIV + CSS layout exercise", create two empty Notepad documents under the folder, and enter the following content:
This is the basic structure of XHTML, named as index.htm. another document is named as css.css.
The following code writes the basic structure of the DIV to the <body> </body> label pair:
| The code is as follows: | Copy code |
<Div id = "container"> [color = # aaaaaa] <! -- Page layer container --> [/color] |
|
To make it easier to read the code later, we should write the CSS file and write the CSS information. The code is as follows:
| The code is as follows: | Copy code |
/* Basic information */ /* Page-layer container */ /* Page header */ /* Page subject */ /* Bottom of the page */
|
|
Save the above file and open it in a browser. Now we can see the basic structure. This is the page framework.
For more information about CSS, see the Chinese CSS2.0 manual and download it online ):
1. Make good comments. This is very important;
2. The body is an HTML element, and all the content on the page should be written in this tag pair. I will not say much about it;
3. Explain the meanings of some common CSS codes:
Font: 12px Tahoma;
The abbreviation is used here. The complete code should be: font-size: 12px; font-family: Tahoma; indicating that the font is 12 pixels in size and the font is in Tahoma format;
Margin: 0px;
The abbreviation is also used, which should be:
Margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px
Or
Margin: 0px 0px 0px 0px
The order is Upper/right/Lower/left. You can also write it as margin: 0 (abbreviation );
The above style indicates that the margin between the upper right and lower right sides of the body is 0 pixels. If auto is used, the margin is automatically adjusted,
There are also the following statements:
Margin: 0px auto;
It indicates that the top and bottom margins are 0 px and the left and right sides are automatically adjusted;
The padding attribute we will use later has many similarities with margin, and their parameters are the same,
However, their meanings are different. margin is an external distance while padding is an internal distance.
Text-align: center
Text alignment, which can be set to left, right, and center. Here I set it to center alignment.
Background: # FFF
Set the background color to white. Here, the color is abbreviated. The Complete color should be background: # FFFFFF.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
