Introduction to Div+css Layout (iii)--top of the page production

css| Tutorials | Getting Started | page

Third, the top of the page production (1)

When we have written the general DIV structure of the page, we can start to make each part in detail.

In the previous chapter we wrote some styles that were written to preview the structure, and we cleaned out all the styles in Css.css and rewritten the following style codes:
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 are the control page of the hyperlink style, specifically I do not explain, please refer to the manual.

#container {width:800px;margin:10px Auto}

Specifies the display area of the entire page.
The width:800px specifies a width of 800 pixels, which is set according to the actual requirements.
margin:10px Auto, is the page, the bottom margin is 10 pixels, and the center is displayed.
As we have said in the previous chapter, setting the left and right margins of the margin property of a layer to auto allows the layer to be centered.

Next, we start to make the top section, which includes logos, menus, and banner, first of all we have to do is to slice the design of the picture, the following is done under the FW of the slices:

I slice the top part into two parts, the first part including the logo and a horizontal line. Because the logo picture does not have too many colors, here I will save this part as GIF format, palette selection for accurate, select alpha transparency, color version of white (here should be the same color as background), exported to logo.gif, image width of 800px.

Here, some friends say, * Why do you use the GIF format? Isn't it better to use JPEG?
Because the picture files in GIF format are smaller, this will allow the page to load faster, of course, before using this format must be determined that the picture does not use too much color, when we use the GIF format, from the naked eye can not see how much the picture changes, so this is feasible.

* Can the next Banner section also use GIF format?
The answer is no, because the banner part is a meticulous picture, if you use the GIF format color will be too much damage, so you must use the JPEG format, the file exported to banner.jpg.

* Reasonable slicing is very important because the method of slicing correctly determines the simplicity of the CSS writing and the page load speed.

After cutting the slices, we also need to analyze the top section and write the div structure to the header code as follows:

• Home




• Blog




• Design




• Album




• Forum




• About

Why to write this, because the menu use List

form, you can easily customize the menu in the future style.

And why do you want to add the following code?

Inserting this piece of code makes it easy to insert some separate styles between menu options, such as vertical bar separation in a preview chart.

Then we write the following style in Css.css:
/* Page Head * *
#header {background:url (logo.gif) No-repeat}

Style Description:
#header {background:url (logo.gif) No-repeat}
Add a background picture logo to the header of the page and do not fill it.

Here, we do not specify the height of the header layer, why not specify it?

Because the header layer also has a menu and banner items, so the height of the layer is temporarily unknown, and the layer's properties can let the layer according to the content automatically set adjustment, so we do not need to specify the height.

* Next, we start to make the menu, to stay in the next chapter, tutorials in the relevant documents to the next chapter to download!

third, the top of the page production (2)----Use list

make menu

Before starting this section, make sure that you have written to the Div, CSS to index.htm and css.css files with reference to the previous sections.
In this section I'll show you how to use a list

To make the menu.

• Home




• Blog




• Design




• Album




• Forum




• About

The above is the structure of this part, there are about

,

These two HTML elements to refer to the relevant content, they are the most important role in the HTML in the form of a list to display some information.

There is also a need for everyone to be clear, when defined in HTML as id= "divID", in the CSS corresponding to the setting of the syntax is #divid{}, if the HTML is defined as class= "divID", the corresponding setting in the CSS syntax is. divID.
If a In addition, all elements of HTML can be defined, such as table, TR, TD, Th, Form, img, input ... And so on, if you want to set them in CSS, write directly to the name of the element plus a pair of braces {}. All CSS code should be written in curly braces {}.

As described above, we first write the following code in the CSS.CSS:
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

Explain:
#menu ul {list-style:none;margin:0px;}
List-style:none, this is the point before canceling the list, because we don't need these points.
margin:0px, this sentence is to remove the indentation of UL, so that all the list content is not indented.

#menu ul li {float:left;}
The float:left here is where the content is displayed on the same line, so floating properties (float) are used.

To this step, we recommend that you first save the preview effect, we add the following content, the effect is as follows:

At this point, the list content is lined up in one line, we #menu ul li {} and then add code margin:0 10px:
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

margin:0 The role of 10px is to create a 20 pixel distance between the contents of the list (left: 10px, right: 10px), the effect of the preview is as follows:

Now that the prototype is out, we'll fix the location of the menu and change the code as follows:
#menu {padding:20px 20px 0 0}
* * Use padding:20px 20px 0 0来 Fixed menu location * *
#menu ul {float:right;list-style:none;margin:0px;}
/* Added float:right so that menu is on the right side of the page * *
#menu ul li {float:left;margin:0 10px}

At this point, the location has been determined, but in the mind map, there is a vertical line between the menu options, how to do?
Don't forget, we've already left an empty

, and use it if you want to add a vertical bar.
In the way described above, we add the following code:
. menudiv {width:1px;height:28px;background: #999}

Save Preview, is the vertical bar already out? About this code is not much to say, it should be very easy to understand.

However, the text of the menu option is at the top, and we modify it to the following code:
#menu ul li {float:left;margin:0 10PX;DISPLAY:BLOCK;LINE-HEIGHT:28PX}

About display:block;line-height:28px Everyone can go to see the manual, I will not say more.

The effect has basically been achieved, the remaining is to modify the menu hyperlink style, add the following code in the CSS.CSS: #menu ul Li A:link, #menu ul li a:visited {font-weight:bold;color: #666}
#menu ul Li a:hover{}
This is not much said, there is nothing to say, the final effect is as follows:

This section is finished here, by the way to provide you with the material:
Idea Map: Click to download
HTML and CSS source files: Click to download