Static Web page production

Summarize the work. Ask, why do not know how to start seeing this homework?

Now complete, know how to break down this page, in the figure of the split line, can be subdivided as follows:

In this way, according to each module to subdivide, first look at the header of this module, you can see a logo large icon, and then followed by the navigation bar.

Just started to want to put these two parts as two div nested in the DIV header inside, but because, which yellow background image to be nested under the logo word, so the final layout is like this.

Here Debug ul in the Float:left, not very clear why this situation occurs. Here Ul,li is set to Float:left, then note that label a sets it to block-level element Display:block, and set its height and width, this is for the background picture can be full display, when the mouse moved to the corresponding label when the display picture, I set this:

#headernav ul Li a:hover{
Color: #000000;
Background-image:url (image/nav_btn.png);
}

OK, then look at the middle of the setup, first look at the approximate layout.

Picture Div layout is relatively simple, is to start wondering why when the width of the picture is not so wide, it is how to automatically center, this is a problem, when the width is long enough, it is filled, this is of course clear.

Then analyze the following:

Contentleft inside is a left navigation bar, this also took a little time to ponder.

I don't know how to get out of the box. Then ask others to know how to design, first is a list of the form so think of the use of UL and Li, ul give it a such attribute list-style-type:none; You can clear the dots before each list.

Look at the specific list of content to how to design, first of each list is preceded by a navigation icon, the icon has just begun to use the IMG tag, each li put a:

<li><a href= "#" >&nbsp;&nbsp; Company Consulting </a></li>.

However, when the mouse is moved to the label, do not know how to change the SRC attribute of IMG, so this way leads to the function is not perfect, so the later changed to give Li a background map. This setting:

#contentleft ul li{
width:170px;
height:33px;
line-height:30px;
Float:left;
border:1px solid #D0D0D0;
margin-bottom:-1px;
Background-image:url (image/liicon2.png);
Background-repeat:no-repeat;
BACKGROUND-POSITION:38PX 12px;
}

Note these two properties:

Background-repeat:no-repeat;
BACKGROUND-POSITION:38PX 12px;

This is the key that the icon correctly renders the original image.

OK, so set, pay attention to the last Li box, it is not anything in it, you add a background map, will be the last Li box also add a picture, so there is a problem, how I want to make the last Li and the previous not the same, just began to think of is using the Last-child attribute, This is the setting:

#contentleft ul li:last-child{
Background:none;}

But this is not the case in the IE8, so the last option

#contentleft ul li.lastchild{
Background:none;}

<li class= "LastChild" ></li>

Add a LastChild class to the last Li. In this case, there is no background map in the last Li box.

Then look at the mouse over the label, the background of the change of the effect of how to write:

#contentleft ul li:hover{
Background-image:url (image/liicon.png);
Background-repeat:no-repeat;
Background-position:38px 12px;}

#contentleft ul li.lastchild:hover{
Background:none;
}

Because the picture is not placed in the a tag, so to separate control its color, this is actually not very reasonable ...

#contentleft ul Li a:hover{
Color: #2C8AC9;
}

Mainly on the image processing, just think of the next, why not put the picture in a background map, so that you can better control the effect, supposedly, should be put together, but just repeated toss, did not, temporarily or in this way forget.

Because of the green this column and other different, so I used a div, this kind of treatment is not very good, under normal circumstances, it should be the same as the last Li's treatment, here again toss the next try.

Tried, the result is to re-distinguish a div better, there are many places different, not too good control.

Look at the right side of the content, this piece better control, no difficulty.

Finally look at the bottom of the control:

A horizontal line, a bottom navigation bar.

The horizontal line is designed like this:

#line {
Background-color: #B2D00F;
border:1px solid #B2D00F;
height:3px;
margin-top:8px;}

The bottom navigation bar is just a couple of a tags and let them center text-align:center; OK.

OK, page completion:

Yes, note that there is a background drawing out. PS cutout, cut the picture will be a point.