Reconstruction of hao123 _ Experience Exchange

By friends, I hao123.com the home page of the Div+css re-layout, streamline the source code to adapt to the current situation.

Get hao123.com home, first of the original layout was analyzed:
The size of the source file is 80k, the text content is more, the picture only 6. Layout is not very complex in the next three lines, the upper 5 lines: Logo advertising area, a functional area, mailbox landing area, Baidu Search bar, the last is recommended. In the middle there are two rows each row has two columns the first row to the left is the category navigation, the right is the name of the station navigation and sorting picks, 1000px High, the second line is cool station show and four portals navigation links. The lower part is a few thematic columns, there is a comprehensive search engine, the bottom is naturally the copyright bar.

Next I analyze the layout and color of each part in detail.
Hao123 to link-based, the main link color of the whole site is #000 (black), when the mouse changed to #f00 (red) and added an underscore, visited the link is #000无下划线, the active link is #0f0 without an underscore, and a part of the link is orange, green.
The following is the result of the analysis and the ID specified for each part

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

Completed the analysis, the next detailed transformation work!
First step: Top of page
The action on the top of the page is relatively simple, just to rewrite each part as a div. #head0原来是一个表格, in fact, there is no need to use the table, because there is no table, 3 pictures are also in line, only need to specify the second picture of the horizontal spacing can be the original use of the table when the appearance of exactly the same.
Down #head1 is a few functional links. The original layout is a table of four cells, I removed the table, the HEAD1 style sheet specified width, height, row height, background color, foreground color to form a basic layout, and then added a #head1 A's ID selector, specify that the area link color is white, The outer patch (margin) is 16XP, and then the first link's outer patch is redefined again, writing inline styles.
#head2是搜索栏. Define the #head2, #head a:link, #head a:visited, and then remove the table, preview, found that this part was open, there is no

Label redefinition. (People who do Web pages probably know what to do with it.Label moves toOn the outside of the line). 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 #head3 is relatively simple, just define good #head3, #head3 a. The same treatment is done for #head4.
So the entire page at the top of the process is 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 also took a detour (just beginning analysis when I will cool station show part and portal site to the tail to deal with, the result is very bad, floating after simply can not be aligned, later to change these two parts to the central processing there is no problem).

The left section is a two-column table with a green diamond pattern in front of each link. The first thing to consider is to make a picture of the block, but at the end of the size, there is no need to do so. Since the main link of the mesh is black and has been defined, careful analysis reveals that only the text color and font size of the list can be resolved.

#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 the cool station show, which is included in a layer with the above navigation list and uses float left. This part is a title picture bad processing, just started to designate a #coolsite background image can be so without a green background, had to add a mark. Several links on the right are processed as a list, specifying a green style for each of the two different color links at the bottom.

The most important part is the famous station navigation, cool station selection. This section and the following four portals are placed in one inside processing using the Float:left,
"Name Station Navigator" and "Cool Station selection" I processed it.

Title, just redefine

Can. Name Station navigation The following five columns the links in each column are changed to a list, specify their length and width, float to the left, and finally have a little difference in size, so redefine the width of the last column so that it fills the perimeter layer. This is consistent with the original appearance. Name Station navigation There is also a row of links below that defines a single style.
The next "Cool Station picks" heading is directly applied

, the most difficult part of the entire Web page process is the cool station selection of content, not yet considered good when I simply copy the original content, and then to deal with the later parts. Back to think about how to deal with this part, two words of the title is a color, the middle of the content and the right of the "more 〉〉" is the basis of the link color, each part also has a thin line of division, if each part is simply processed into or, the meaning of refactoring is lost. Finally, I do this: each row is a list, a two-word title applies a style and floats to the left, and the middle part is included in theand floating to the left, the "more 〉〉" on the right no longer specifies the style. This is much better than every part in the block, the best way to do this is to apply a redefined two-word headline

Style is the best, so the structure of the document is better.

This part of the row and row of the background color is a phase, as long as the specified two color style, the corresponding list is specified on the line.
There's only one last piece in the middle: four links to the portal site. Each portal is contained in one, then the left float is applied. Because the outer layer specifies the width, the four squares are lined up in two rows, the first row is a green border, the second row is a blue border, the writing border style is dominated by the top two colors, and the other two are rewritten in the inline style. The contents of the border are changed in the list. The first row of the list is the title, you need to apply the title style and then left floating, haha effect than the original good. The second row of the list also needs to define the clear:right, so that the remaining three rows do not create a float.

Some puzzling problems encountered during the revision process, but also want to specifically explain:

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 previewing in this style, different browsers will show the same effect.

Later 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 it!

IE Bug

The problem is really puzzling, look at the effect:

A closer look at four more words will surprise you. In other browsers is not a problem, if the spacing of the four box is not the problem, and finally there is no way to set the Overflow:hidden to hide it.
At this, the middle part of the process is over.

Third-step tail processing
After modifying the first two parts, this part is much easier, make a #bot1, apply each box once, and then apply several unordered lists to form the basic appearance. The problem encountered in this section is that the link cannot be left-aligned, the text-align:left is specified, or, finally, you have to set a different boundary and fill for each row to achieve the alignment effect.

So the whole is basically finished. The rest of the work is to fine-tune the frame alignment and the blanks of each part. The whole project took me three days, two days to complete the basic tasks, the last day to make careful adjustments. The Final Document size is 48.8k smaller than the original size of 30k.

The final completion source files can be found on my website and click to browse.

Latest Revision 2005-10-13

Revised in 2005-10-28, fixed an abnormal display under IE.

