Getting started with Div + CSS layout (3) -- creating a page at the top

3. Create at the top of the page (1)
After we have written the DIV structure of the page, we can start to carefully create each part.
In the article, we wrote some examples for the preview structure. We cleared all the styles in css.css and re-written the following style code:
Program code
/* Basic information */
Body {font: 12px Tahoma; margin: 0px; text-align: center; background: # FFF ;}
A: link, a: visited {font-size: 12px; text-decoration: none ;}
A: hover {}
/* Page-layer container */
# Container {width: 800px; margin: 10px auto}
Style description:
A: link, a: visited {font-size: 12px; text-decoration: none ;}
A: hover {}
These two items are the super link style on the control page, which is not described here. Please refer to the manual.
# Container {width: 800px; margin: 10px auto}
Specify the display area of the entire page.
Width: 800 px specifies the width of pixels, which is set as needed.
Margin: 10px auto, the top and bottom margins of the page are 10 pixels and displayed in the center.
As we mentioned in the previous chapter, setting the left and right margins of the layer's margin attribute to auto can Center the layer.
Next, let's start to make the TOP part. The TOP part includes the LOGO, menu, and Banner. The first thing we need to do is to slice the designed Image. Below is the slice completed under FW:
I slice the TOP part into two parts. The first part includes the LOGO and a horizontal line. The image width is PX.
Here, some friends will say, * why should we use the GIF format? Isn't it better to use JPEG?
Because the image files in GIF format are smaller, the page loading speed is faster. Before using this format, you must make sure that the image does not use too many colors. When we use the GIF format, it is feasible to see that the image changes too much from the naked eye.
* Can the next Banner still use the GIF format?
.
* Reasonable slicing is very important because the correct slicing method determines the simplicity of CSS Writing and the page loading speed.