Div CSS layout introductory tutorial (2. Writing the overall layer structure and CSS)_html/css_WEB-ITnose

Div+CSS布局入门教程 (2.写入整体层结构与CSS)

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

 

下面，我们在标签对中写入DIV的基本结构，代码如下：

　
   
   

   
   

　　　　

　　　　

　　

   
   

In order to make it easier to read the code in the future, we should add relevant comments. Next, open the css.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 body */
#PageBody {
width:800px;
margin:0 auto;
height:400px;
background:#CCFF00
}

/*Page Bottom*/
#Footer {
width:800px;
margin:0 auto;
height:50px;
background:#00FFFF
}

Save the above file and open it with a browser. At this time we can already see the basic structure. This is the frame of the page.

Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, available for download online):

1. Please develop good commenting habits , this is very important;

2. Body is an HTML element. All content on the page should be written within this tag pair, so I won’t say more;

3 , explain the meaning of some commonly used CSS codes:

font:12px Tahoma;
Abbreviations are used here, the complete code should be: font-size:12px; font-family:Tahoma; the description font is 12 pixels in size, font in Tahoma format;

margin:0px;
also uses abbreviations, the complete version should be:

margin-top:0px; margin-right:0px; margin-bottom:0px;margin-left:0px
or
margin:0px 0px 0px 0px

The order is top/right/bottom/left, you can also write margin:0 (abbreviation ; auto;
indicates that the top and bottom margins are 0px, and the left and right margins are automatically adjusted;

The padding attribute we will use in the future has many similarities with margin. Their parameters are the same,

just represent each one. The meanings are different, margin is the outer distance, and padding is the inner distance.

text-align:center
Text alignment can be set to left, right, or center. Here I set it to center alignment.

background:#FFF

Set the background color to white. The abbreviation is used for the color here. The complete color should be background:#FFFFFF.
background can be used to fill the specified layer with background color and background image. We will use the following format in the future:

background:#ccc url('bg.gif') top left no-repeat;

Representation: Use #CCC (grayscale color) to fill the entire layer, use bg.gif as the background image,
top left
indicates that the image is located at the upper left end of the current layer, no-repeat indicates that only the image size is displayed without Fill the entire layer.
top/right/left/bottom/center
is used to position the background image, indicating top/right/bottom/left/center respectively; you can also use
background:url('bg.gif') 20px 100px;
means that the X coordinate is 20 pixels and the Y coordinate is 100 pixels.
repeat/no-repeat/repeat-x/repeat-y
respectively means filling the entire layer/no Fill / Fill along the X axis / Fill along the Y axis.

height / width / color
represents height (px), width (px), and font color (HTML color system table) respectively.

4. How to center the page?

After saving the code, you can see that the entire page is displayed in the center. So what is the reason why the page is displayed in the center?

is because we used the following attributes in #container:

margin:0 auto;

According to the previous explanation, you can know that the top and bottom margins are 0, and the left and right margins are automatic, so this layer will Automatically centered.

If you want the page to be on the left, just cancel the auto value, because it is displayed on the left by default.
With margin:auto we can easily center the layer automatically.

5. Here I only introduce these commonly used CSS properties. For others, please refer to the CSS2.0 Chinese manual.