css| Tutorials | Getting Started
Second, write the whole layer structure and CSS
Next we create a new folder on the desktop named "Div+css layout Exercise", create a new two blank Notepad document under the folder, and enter the following:
Untitled Document
This is the basic structure of XHTML, named Index.htm, and another Notepad document named Css.css.
Below, we write the basic structure of the div in the tag pair, and the code is as follows:
In order to make it easier to read the code later, we should add the relevant comments, then open the Css.css file and write the CSS information, the code reads as follows:
/* Basic INFORMATION * *
Body {font:12px tahoma;margin:0px;text-align:center;background: #FFF;}
/* Page Layer Container * *
#container {width:100%}
/* Page Head * *
#Header {width:800px;margin:0 auto;height:100px;background: #FFCC99}
/* Page Main body * *
#PageBody {width:800px;margin:0 auto;height:400px;background: #CCFF00}
/* Bottom of page * *
#Footer {width:800px;margin:0 auto;height:50px;background: #00FFFF}
Save the above file and open it in a browser, we can already see the infrastructure, this is the frame of the page.
About the above CSS description (please refer to the CSS2.0 Chinese manual, download online):
1, please form good annotation habit, this is very important;
2, the body is an HTML element, all the contents of the page should be written in this label right, I will not say more;
3, to explain some common meaning of CSS code:
font:12px Tahoma;
Here the abbreviation is used, the complete code should be: Font-size:12px;font-family:tahoma; description font is 12 pixel size, font is Tahoma format;
margin:0px;
Also uses the abbreviation, the complete should be:
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
Or
margin:0px 0px 0px 0px
The order is up/right/down/left, and you can also write as margin:0 (abbreviated);
The above style shows that the body section is 0 pixels above the left margin of the upper right, and automatically adjusts the margins if you use Auto.
There are several other ways to do this:
margin:0px Auto;
The description of the bottom margin is 0px, the automatic adjustment is left and right;
There are many similarities between the padding attributes we will use in the future and the margin, their parameters are the same,
But the meaning is not the same, margin is the external distance, and padding is the internal distance.
Text-align:center
Text alignment, which can be set to left, right, and middle, where I set it to center alignment.
background: #FFF
Set the background color to white, where the color uses the abbreviation, the complete should be background: #FFFFFF.
Background can be used to fill the specified layer with background color, background picture, later we will use the following format:
Background: #ccc url (' bg.gif ') top left no-repeat;
To use #ccc (grayscale) to fill the entire layer, using bg.gif as a background image,
Top left
Indicates that the picture is at the top left of the current layer, and no-repeat indicates that only the picture size is displayed and not filled with the entire layer.
Top/right/left/bottom/center
Used to locate the background picture, representing the top/right/Bottom/left/middle, and also to use
Background:url (' bg.gif ') 20px 100px;
An accurate positioning of the x coordinates of 20 pixels and the y-coordinates of 100 pixels;
Repeat/no-repeat/repeat-x/repeat-y
Fill the entire layer/not fill/fill with the x-axis/fill the y-axis along the y axis, respectively.
Height/width/color
Represents height (px), Width (px), font color (HTML shades).
4, how to center the page?
We will save the code after you can see that the whole page is centered, so what is the reason why the page is centered?
This is because we used the following properties in #container:
margin:0 Auto;
As you can see from the previous instructions, the top and bottom margin is 0, the left or right is automatic, so the layer is centered automatically.
If you want to leave the page on the left, then cancel the auto value is OK, because the default is the left display.
By Margin:auto we can easily center the layer automatically.
5, here I only introduce these commonly used CSS properties, other please refer to CSS2.0 Chinese manual.
