Example of getting started with DIV + CSS layout (3) creating at the top of the page

After we have written the DIV structure of the page, we can start to carefully prepare 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:

Example Source 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.

After splitting, we also need to analyze the TOP part and write the DIV structure into the Header with the following code:

Example Source Code
　　　

　　　　
• Homepage

　　　　

　　　　
• Blog

　　　　

　　　　
• Design

　　　　

　　　　
• Album

　　　　

　　　　
• Forum

　　　　

　　　　
• About

　　　

　　
　　
　　
Why do you want to write this?

You can customize the menu style later.
Why add the following code?

Example Source Code

Insert this code to easily insert some separation styles between menu options, such as vertical bars in the preview image.

Then we write the following style in css.css:

Example Source Code/* page header */
# Header {background: url(logo.gif) no-repeat}
Style description:
# Header {background: url(logo.gif) no-repeat}
Add a background image LOGO to the page header without filling.

Here, we have not specified the height of the header layer. Why not?

Because there are menus and banner items in the header layer, the height of the layer is unknown for the time being, and the attribute of the layer allows the layer to automatically set and adjust according to the content. Therefore, we do not need to specify the height.