對hao123進行重構_經驗交流

受朋友之託，我對hao123.com網站首頁進行了div+css的重新布局，精簡源碼，以適應現在的形勢。

拿到hao123.com的首頁，首先對原來的布局進行了分析：
源檔案的大小為80k，文字內容較多，圖片只有6個。布局不是很複雜分上中下三行，上部有5行： logo 廣告區、 一個 功能區、 郵箱登陸區、 百度搜尋欄、 最後是推薦。中部有兩行 每行有兩列 第一行左邊是分類導航， 右邊是名站導航和分類精選， 有1000px高， 第二行是酷站秀 和 四個門戶網站的導航連結。下部是幾個專題欄目，還有 一個綜合搜尋引擎，最底部自然就是著作權欄了。

接下來我對每一部分的布局和顏色進行了詳細的分析。
Hao123以連結為主，整個網站主要的連結顏色 是#000（黑色）， 滑鼠經過時變為 #f00（紅色）並添加了底線， 訪問過的連結為 #000無底線， 活動連結為 #0f0 無底線 ，還有一部分連結為橙色、綠色 。
下面是分析後的結果以及對每一部分指定的id

地區id	功能	背景色(rgb)	顏色(rgb)	尺寸(px)
Head0	logo AD	-	-	743/72
head1	收藏/協助等	#3db836	#fff	740/15
head2	郵箱入口	#f0f7ff	#0f0	740/21
head3	百度搜尋	#d9d9d9	#0f0	740/17
head4	推薦		#000	740/23
mainleft	分類導航	背景圖片	#000	157
mainright	名站導航酷站精選	#0f0 #FFF8F0 #F0F7FF	#000i橙色 紅色	571
coolsite	酷站秀	綠色	黑色	157
top4	門戶站	#82F43E	#80cbf9	黑色
bot1	其他網址	-	綠色	740

完成了分析，接下來進行細緻的改造工作！
第一步：網頁頂部
對網頁頂部的操作還是比較簡單的，只是將每一部分改寫為div的形式。#head0原來是一個表格，其實沒有必要用表格的，因為沒有表格時，3個圖片也是排在一行，只需要對第二個圖片指定水平間距就可以和原來使用表格時的外觀完全一致。
下來#head1是幾個功能連結。 原來的布局為四個儲存格的表格，我將表格去掉，對head1的樣式表指定寬度、高度、行高、背景色、前景色彩使之形成基本的布局，然後又添加了一個 #head1 a 的id選取器，指定該地區連結的顏色為白色，外補丁（margin）為16xp，接著又單獨對第一個連結的外補丁重新定義了一下，寫入內聯樣式。
#head2是搜尋欄。定義好#head2、 #head a:link、 #head a:visited 、後去掉表格，預覽時，發現這一部分被撐開了，原來是沒有對

標籤重定義。（做過網頁的人可能都知道應該怎麼處理只要把標籤移動到的外面就行了）。但在css裡我們只需要重新定義form標籤：form{margin:0;padding:0;}，再次預覽一切OK!
有了上面的處理，對#head3的修改就比較簡單了，只需定義好#head3 、#head3 a。對#head4也進行同樣的處理。
這樣整個網頁頂部就處理完畢！

第二步 中部處理
整個網頁中這部分的處理是最複雜的，最耗時的。在製作過程中還走了彎路（剛開始分析的時候我將酷站秀部分和門戶網站分到了尾部來處理，結果非常的糟糕，浮動後根本無法對齊,後來將這兩部分改到了中部處理就沒有問題了）。

左側部分是一個兩列的表格，每一個連結前有一個綠色的菱形圖案 。一開始考慮將方塊做成一個圖片,可是最後算了一下大小，沒有必要這樣去做。由於網面的主連結是黑色的，而且已經定義好，仔細分析後發現只需要定義一下列表的文字顏色和字型大小就完全可以解決問題。

#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;
}

下來是酷站秀，它和上面的導航列表包含在了一個層裡面並且使用了float left 。這部分就是一個標題圖片不好處理，剛開始指定成了#coolsite 的背景圖片 可這樣一來沒有了綠色背景襯托，只好又加了一個標記。右邊的幾個連結處理成為列表，針對底部的兩個不同顏色的連結單獨指定一個綠色的樣式。

最重要的部分是名站導航、酷站精選。 這部分和下面的 四個門戶網站一起放在了一個裡面處理 使用了float:left ，
“名站導航” 和“酷站精選” 我處理成了

標題，只要重新定義

即可。名站導航下面的五列內容 每一列裡的連結都改為一個列表，指定其長寬，向左浮動，最後有一點尺寸的差異，所以對最後一列的寬度重新定義使之能填滿外圍圖層。這樣和原來的外觀就一致了。名站導航下面還有一行連結單獨定義了一個樣式。
接下來的“酷站精選”標題直接應用了

，整個網頁處理過程中最難的就是酷站精選的內容，還沒有考慮好的時候我只是將原來的內容進行了簡單的複製，然後處理後面的部分。回過頭來思考怎麼處理這部分，兩個字的標題是一個顏色，中間的內容和右面的“更多〉〉”倒是基礎的連結顏色，每一部分之間還有細線分割，如果對每一部分簡單的處理成或者的話就失去了重構的意義了。最後我這樣做處理：每一行還是一個列表，兩個字的小標題應用一個樣式並向左浮動，中間部分包含在裡並向左浮動，右面的“更多〉〉”不再指定樣式。這樣的話比每一部分都包含在塊裡面要好得多，最好的方法還不是這個，對兩個字的小標題應用一個重新定義過的

樣式才是最好的，這樣文檔的結構要更好一些。

這部分裡行與行的背景色是相間的，只要指定兩個顏色樣式，對相應的列表指定就行了。
中部還剩下最後一塊：四個門戶網站的連結。每一個門戶包含在一個裡，然後應用左浮動。由於外層的指定了寬度，四個方框排成兩行，第一行是綠色邊框，第二行是藍色邊框，寫邊框樣式的時候以上面兩個的顏色為主，另外兩個在內聯樣式中改寫一下。邊框中的內容都改在列表裡。列表第一行是標題，需要應用標題樣式再向左浮動，哈哈效果比原來的還好。列表第二行還需要定義clear:right;這樣就使剩下的三行不產生浮動。

在修改過程中遇到了的一些莫名其妙的問題，還想特別說明一下：

左右兩部分始終對不齊

這是一開始的左側部分樣式：

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

在這個樣式下預覽的時候不同的瀏覽器顯示的效果是不一樣的，

後來我將樣式修改了問題才解決了：

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

看上去這兩個樣式實現的功能是一樣的。但是效果不一樣，也許是預設樣式的問題吧！

IE 的bug

這個問題的的確確是莫名其妙,看一下效果：

仔細看一下多出來四個字，會讓人很驚訝哦。在其他的瀏覽器裡倒是沒有個問題，如果四個方框的間距設的小一些也沒有這個問題，最後沒有辦法只好設定了overflow:hidden 將其隱藏。
到此，中間部分的處理就結束了。

第三步尾部處理
修改過前兩部分後，這一部分就容易多了，制定一個#bot1，每一個框應用一次,再應用幾個無序列表，構成基本外觀。在這一部分遇到的問題是：連結不能靠左對齊，指定了text-align：left;也不能,最後只好對每一行設定不同的邊界、填充，達到對齊的效果。

這樣整體就基本完成了。剩下的工作就是細緻的調整邊框對齊和各部分的空白了。整個工程我花了三天的時間，兩天完成基本任務，最後一天用來做細緻的調整。最後的文檔大小為48.8k比原來的大小整整小了30k呢

最後的完成源檔案可以在我的網站找到，點擊瀏覽。

最新的修改2005-10-13

2005-10-28日修改，修正了在ie下顯示不正常的部分。

