Hao123-Experience exchange for the reconstruction of the

By a friend, I hao123.com the home page of the div+css to the layout, streamlining the source code to adapt to the current situation.

Get hao123.com home, first of the original layout of the analysis:
The source file size is 80k, the text content is more, the picture is only 6. The layout is not very complex divided into the next three lines, the upper 5 lines: Logo advertising area, a functional area, mailbox landing area, Baidu Search bar, and finally recommended. There are two rows in the middle. The first row is the category navigation, the right is the name station navigation and the sorting selection, has the 1000px high, the second row is the cool station show and four portals navigation links. The lower part is a few topic columns, there is a comprehensive search engine, the bottom of the nature is the copyright bar.

Next I made a detailed analysis of the layout and color of each section.
Hao123 to link mainly, the entire site's main link color is #000 (black), when the mouse passed into the #f00 (red) and underlined, visited the link for the #000无下划线, active link to #0f0 no underline, and some links to orange, green.
The following are the results of the analysis and the IDs specified for each section

Zone ID	Function	Background color (RGB)	Color (RGB)	Size (px)
Head0	Logo AD	-	-	743/72
Head1	Collection/help etc.	#3db836	#fff	740/15
Head2	Mail entry	#f0f7ff	#0f0	740/21
Head3	Baidu Search	#d9d9d9	#0f0	740/17
Head4	Recommended		#000	740/23
Mainleft	Category Navigation	Background picture	#000	157
Mainright	Famous station navigation cool station Select	#0f0 #FFF8F0 #F0F7FF	#000i橙色 Red	571
Coolsite	Cool Station Show	Green	Black	157
Top4	Portal Station	#82F43E	#80cbf9	Black
Bot1	Other Web sites	-	Green	740

Completed the analysis, followed by meticulous transformation work!
The first step: the top of the page
The operation of the top of the page is relatively simple, just rewrite each part as a div form. #head0原来是一个表格, there is no need to use the table, because when there is no table, 3 pictures are lined up, you just need to specify the horizontal spacing for the second picture exactly the same as when you used the table.
Down #head1 is a few feature links. The original layout is a table of four cells, I removed the table, specified the width, height, row height, background color, foreground view of the Head1 style sheet, and then added a ID selector #head1 A to specify that the area link was white. The outer patch (margin) is 16XP, and then the outer patch of the first link is redefined separately, and the inline style is written.
#head2是搜索栏. Define a good #head2, #head a:link, #head a:visited, and then remove the table, preview, found that the part is open, there is no <form> label redefined. (People who have done Web pages may know what to do, just move the <form> tab to the outside of <td>). But in CSS we just need to redefine the form tag: form{margin:0;padding:0, preview everything again ok!
With the above processing, the modification of the #head3 is relatively simple, just define a good #head3, #head3 a. The same is done with the #head4.
So the entire page at the top of the processing finished!

Second Step central processing
The processing of this part of the entire Web page is the most complex and time-consuming. In the production process has also gone a detour (just started the analysis of the time I will cool station show section and portal site to the tail to deal with, the result is very bad, floating simply can not be aligned, and later the two parts to the central processing will be no problem).

The left part is a two-column table with a green diamond pattern in front of each link. Start thinking about making a picture of the box, but finally calculate the size, there is no need to do so. Because the main link of the network surface is black, and has been defined, after careful analysis found that only need to define the text color and font size of the list can completely solve the problem.

#mainleft1 {
width:154px;
Float:left;
Background-image:url (line.gif);
border:2px solid #7bd676;
Text-align:center;
Color: #3DB836;
margin-bottom:5px;
}
#mainleft1 Li {
font-size:10px;
margin-left:8px;
}

Down is cool station show, it and the above navigation list is contained in a layer inside and use float left. This part is a title picture is not good to deal with, just started to designate as a #coolsite background picture can be thus without a green background foil, had to add a <span> mark. A few links on the right are processed into lists that specify a green style for the two different color links at the bottom.

The most important part is the famous station navigation, cool station SELECT. This section, together with the following four portals, was placed in a <div id= "right" > Handled using Float:left,
"Name Station navigation" and "Cool site selection" I processed into the The next "cool site select" Title directly applied

This section of the row and row background color is alternating, as long as the specified two color styles, the appropriate list to specify the line.
The middle is left with the last piece: four links to the portal site. Each portal is contained in a <div> and then applied to the left float. Because the outer <div> specifies the width, the four boxes are lined in two lines, the first row is a green border, the second line is a blue border, the border style is the top two colors, and the other two are rewritten in the inline style. The contents of the border are changed to the list. The first row of the list is the title, you need to apply the heading style and then left floating, haha effect than the original good. The second row of the list also needs to define clear:right so that the remaining three lines do not float.

Some puzzling questions have been encountered during the process of modification, and I would like to highlight:

The left and right parts are always misaligned

This is the beginning of the left part of the style:

#mainleft1 ul {
font-size:10px;
}
#mainleft1 Li {
line-height:24px;
}

When you preview this style, different browsers display the same effect.

Then I changed the style to solve the problem:

#mainleft1 Li {
font-size:10px;
}
#mainleft1 a {
line-height:24px;
}

It looks like the two styles implement the same functionality. But the effect is not the same, perhaps the default style of the problem!

The Bug of IE

The question is indeed baffling, look at the effect:

Take a closer look at the more than four words, it will be very surprising oh. In other browsers, there is no problem, if four box spacing set small Some also do not have this problem, finally have no way to set the Overflow:hidden to hide it.
By this, the middle part of the process is over.

Third-step tail treatment
After modifying the first two parts, this part is much easier, make a #bot1, each box to apply once, and then apply several unordered table, constitute the basic appearance. In this part of the problem encountered is: the link can not be left-aligned, specified Text-align:left, and can not, finally have to set a different boundary, padding, to achieve the effect of alignment.

So the whole is basically done. The rest of the work is to carefully adjust the border alignment and the various parts of the blank. The whole project took me three days to complete the basic task two days and the last day to make a careful adjustment. The Final Document size 48.8k is smaller than the original size of 30k.

The final completion source file can be found in my website, click Browse.

Latest Modifications 2005-10-13

2005-10-28 Day modified, modified in IE under the display of abnormal parts.