Shulou(Shulou.com)06/02 Report--

What this article shares to you is about how to write the overall layer structure and CSS in the Div+CSS layout, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Write the whole layer structure and CSS

Next, let's create a new folder on the desktop, named "DIV+CSS layout exercise", create two empty notepad documents 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.

Next, we write the basic structure of DIV in the tag pair, as follows:

[color=#aaaaaa] [/ color] [color=#aaaaaa] [/ color]

To make it easier to read the code later, we should add relevant comments. Next, open the css.css file and write the CSS information as follows:

/ * basic information * / body {font:12pxTahoma;margin:0px;text-align:center;background:#FFF;} / * Page layer container * / # container {width:100%} / * Page header * / # Header {width:800px;margin:0auto;height:100px;background:#FFCC99} / * Page body * / # PageBody {width:800px;margin:0auto;height:400px;background:#CCFF00} / * bottom of the page * / # Footer {width:800px Margin:0auto;height:50px;background:#00FFFF}

Save the above file, open it with a browser, and we can already see the infrastructure, and this is the frame of the page.

Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, which can be downloaded online):

1. Please form a good habit of annotation, which is very important

2. Body is a HTML element, and everything on the page should be written in this tag pair, so I won't say much about it.

3. Explain the meaning of some commonly used CSS codes:

Font:12pxTahoma

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

Margin:0px

Abbreviations are also used, and the complete ones should be:

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

Or

Margin:0px0px0px0px

The order is top / right / bottom / left, or you can write as margin:0 (abbreviation)

The above style shows that the upper right and lower left margin of the body part is 0 pixels, and the margin is adjusted automatically if auto is used.

◆ can also be written in the following ways:

Margin:0pxauto

It shows that the upper and lower margins are 0px, and the left and right sides are automatically adjusted.

The padding attribute that we will use later has many similarities with margin, and their parameters are the same.

It's just that they have different meanings. Margin is the external distance, while padding is the internal distance.

Text-align:center

Text alignment, can be set to left, right, center, here I set it to center alignment.

Background:#FFF

Set the background color to white, where the color uses an acronym, the complete should be background:#FFFFFF.

Background can be used to fill a specified layer with background color and background image. We will use the following format in the future:

Background:#cccurl ('bg.gif') topleftno-repeat

Indicates: fill the entire layer with # CCC (grayscale) and use bg.gif as the background image

Topleft

Indicates that the picture is at the upper left of the current layer, and no-repeat means that only the size of the picture is displayed and the entire layer is not filled.

Top/right/bottom/left/center

Used to locate the background picture, representing the top / right / bottom / left / center, respectively; you can also use the

Background:url ('bg.gif') 20px100px

Indicates that the X coordinate is 20 pixels and the Y coordinate is 100 pixels.

Repeat/no-repeat/repeat-x/repeat-y

Means to fill the entire layer / not fill / fill along the X axis / fill along the Y axis, respectively.

Height/width/color

Represent height (px), width (px), font color (HTML color table), respectively.

4. How to center the page?

After you save the code, you can see that the whole page is centered, so what makes the page centered?

Because we used the following attributes in # container:

Margin:0auto

As you can see from the previous instructions, the upper and lower margin is 0, which is automatic, so the layer is automatically centered.

If you want to keep the page on the left, you can cancel the autovalue, because the default is to display on the left.

With margin:auto, we can easily center the layer automatically.

The above is how to write the overall layer structure and CSS in the Div+CSS layout. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.