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:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Link href = "css.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
</Body>
</Html>
This is the basic structure of XHTML, named as index.htm. another document is named as css.css.
Next, we write the basic structure of the DIV in the <body> </body> tag pair,CodeAs follows:
<Div id = "Container"> <! -- Page layer container -->
<Div id = "Header"> <! -- Page header --> </div>
<Div id = "pagebody"> <! -- Page subject -->
<Div id = "sidebar"> <! -- Sidebar --> </div>
<Div id = "mainbody"> <! -- Subject content --> </div>
</Div>
<Div id = "footer"> <! -- At the bottom of the page --> </div>
</Div>
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:
/* Basic information */
Body {
Font: 12px tahoma;
Margin: 0px;
Text-align: center;
Background: # FFF;
}
/* Page-layer container */
# Container {
Width: 100%
}
/* Page header */
# Header {
Width: 800px;
Margin: 0 auto;
Height: 100px;
Background: # ffcc99
}
/* Page subject */
# Pagebody {
Width: 800px;
Margin: 0 auto;
Height: 400px;
Background: # ccff00
}
/* Bottom of the page */
# Footer {
Width: 800px;
Margin: 0 auto;
Height: 50px;
Background: #00 FFFF
}
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.
Background can be used to fill the background color and background image of a specified layer. The following format will be used in the future:
Background: # CCC url('bg.gif ') top left no-Repeat;
Fill the entire layer with #ccc(grayscale) and use bg.gif as the background image,
Top left
Indicates that the image is located at the top left of the current layer, and no-repeat indicates that only the image size is displayed without filling the entire layer.
Top/right/left/bottom/center
It is used to locate the background image, indicating the upper/right/lower/left/middle. You can also use
Background: url('bg.gif ') 20px 100px;
The X coordinate is 20 pixels, And the Y coordinate is 100 pixels;
Repeat/no-repeat/repeat-x/repeat-y
Fill the entire layer/not fill/fill along the X axis/fill along the Y axis respectively.
Height/width/color
Height (PX), width (PX), and font color (HTML color table ).
4. How to center a page?
After saving the code, you can see that the entire page is displayed in the center. Why is the page displayed in the center?
This is because the following attributes are used in # container:
Margin: 0 auto;
According to the preceding instructions, we can know that the top and bottom margins are 0 and the left and right are automatic. Therefore, the layer is automatically centered.
If you want to set the page to the left, you can cancel the auto value, because it is displayed on the left by default.
With margin: auto, we can easily center layers automatically.
5. Here I will only introduce these common CSS attributes. For more information, see the css2.0 Chinese manual.
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
