| 區(qū)域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 | 分類導(dǎo)航 | 背景圖片 | #000 | 157 |
| mainright | 名站導(dǎo)航酷站精選 | #0f0 #FFF8F0 #F0F7FF | #000i橙色 紅色 | 571 |
| coolsite | 酷站秀 | 綠色 | 黑色 | 157 |
| top4 | 門戶站 | #82F43E | #80cbf9 | 黑色 |
| bot1 | 其他網(wǎng)址 | - | 綠色 | 740 |
完成了分析，接下來進行細致的改造工作！
第一步：網(wǎng)頁頂部
對網(wǎng)頁頂部的操作還是比較簡單的，只是將每一部分改寫為div的形式。#head0原來是一個表格，其實沒有必要用表格的，因為沒有表格時，3個圖片也是排在一行，只需要對第二個圖片指定水平間距就可以和原來使用表格時的外觀完全一致。
下來#head1是幾個功能鏈接。 原來的布局為四個單元格的表格，我將表格去掉，對head1的樣式表指定寬度、高度、行高、背景色、前景色使之形成基本的布局，然后又添加了一個 #head1 a 的id選擇器，指定該區(qū)域鏈接的顏色為白色，外補?。╩argin）為16xp，接著又單獨對第一個鏈接的外補丁重新定義了一下，寫入內(nèi)聯(lián)樣式。
#head2是搜索欄。定義好#head2、 #head a:link、 #head a:visited 、后去掉表格，預(yù)覽時，發(fā)現(xiàn)這一部分被撐開了，原來是沒有對form>標(biāo)簽重定義。（做過網(wǎng)頁的人可能都知道應(yīng)該怎么處理只要把form>標(biāo)簽移動到td>的外面就行了）。但在css里我們只需要重新定義form標(biāo)簽：form{margin:0;padding:0;}，再次預(yù)覽一切OK!
有了上面的處理，對#head3的修改就比較簡單了，只需定義好#head3 、#head3 a。對#head4也進行同樣的處理。
這樣整個網(wǎng)頁頂部就處理完畢！
第二步 中部處理
整個網(wǎng)頁中這部分的處理是最復(fù)雜的，最耗時的。在制作過程中還走了彎路（剛開始分析的時候我將酷站秀部分和門戶網(wǎng)站分到了尾部來處理，結(jié)果非常的糟糕，浮動后根本無法對齊,后來將這兩部分改到了中部處理就沒有問題了）。
左側(cè)部分是一個兩列的表格，每一個鏈接前有一個綠色的菱形圖案 。一開始考慮將方塊做成一個圖片,可是最后算了一下大小，沒有必要這樣去做。由于網(wǎng)面的主鏈接是黑色的，而且已經(jīng)定義好，仔細分析后發(fā)現(xiàn)只需要定義一下列表的文字顏色和字號就完全可以解決問題。
#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;
}
下來是酷站秀，它和上面的導(dǎo)航列表包含在了一個層里面并且使用了float left 。這部分就是一個標(biāo)題圖片不好處理，剛開始指定成了#coolsite 的背景圖片 可這樣一來沒有了綠色背景襯托，只好又加了一個span>標(biāo)記。右邊的幾個鏈接處理成為列表，針對底部的兩個不同顏色的鏈接單獨指定一個綠色的樣式。
最重要的部分是名站導(dǎo)航、酷站精選。 這部分和下面的 四個門戶網(wǎng)站一起放在了一個div id=”right”>里面處理 使用了float:left ，
“名站導(dǎo)航” 和“酷站精選” 我處理成了h1> 標(biāo)題，只要重新定義h1>即可。名站導(dǎo)航下面的五列內(nèi)容 每一列里的鏈接都改為一個列表，指定其長寬，向左浮動，最后有一點尺寸的差異，所以對最后一列的寬度重新定義使之能填滿外圍圖層。這樣和原來的外觀就一致了。名站導(dǎo)航下面還有一行鏈接單獨定義了一個樣式。
接下來的“酷站精選”標(biāo)題直接應(yīng)用了h1>，整個網(wǎng)頁處理過程中最難的就是酷站精選的內(nèi)容，還沒有考慮好的時候我只是將原來的內(nèi)容進行了簡單的復(fù)制，然后處理后面的部分?；剡^頭來思考怎么處理這部分，兩個字的標(biāo)題是一個顏色，中間的內(nèi)容和右面的“更多〉〉”倒是基礎(chǔ)的鏈接顏色，每一部分之間還有細線分割，如果對每一部分簡單的處理成div>或者span>的話就失去了重構(gòu)的意義了。最后我這樣做處理：每一行還是一個列表，兩個字的小標(biāo)題應(yīng)用一個樣式并向左浮動，中間部分包含在span>里并向左浮動，右面的“更多〉〉”不再指定樣式。這樣的話比每一部分都包含在塊里面要好得多，最好的方法還不是這個，對兩個字的小標(biāo)題應(yīng)用一個重新定義過的h2>樣式才是最好的，這樣文檔的結(jié)構(gòu)要更好一些。
這部分里行與行的背景色是相間的，只要指定兩個顏色樣式，對相應(yīng)的列表指定就行了。
中部還剩下最后一塊：四個門戶網(wǎng)站的鏈接。每一個門戶包含在一個div>里，然后應(yīng)用左浮動。由于外層的div>指定了寬度，四個方框排成兩行，第一行是綠色邊框，第二行是藍色邊框，寫邊框樣式的時候以上面兩個的顏色為主，另外兩個在內(nèi)聯(lián)樣式中改寫一下。邊框中的內(nèi)容都改在列表里。列表第一行是標(biāo)題，需要應(yīng)用標(biāo)題樣式再向左浮動，哈哈效果比原來的還好。列表第二行還需要定義clear:right;這樣就使剩下的三行不產(chǎn)生浮動。
在修改過程中遇到了的一些莫名其妙的問題，還想特別說明一下：
這是一開始的左側(cè)部分樣式：
#mainleft1 ul {
font-size: 10px;
}
#mainleft1 li {
line-height: 24px;
}
在這個樣式下預(yù)覽的時候不同的瀏覽器顯示的效果是不一樣的，
后來我將樣式修改了問題才解決了：
#mainleft1 li {
font-size: 10px;
}
#mainleft1 a {
line-height:24px;
}
看上去這兩個樣式實現(xiàn)的功能是一樣的。但是效果不一樣，也許是默認樣式的問題吧！
這個問題的的確確是莫名其妙,看一下效果：
仔細看一下多出來四個字，會讓人很驚訝哦。在其他的瀏覽器里倒是沒有個問題，如果四個方框的間距設(shè)的小一些也沒有這個問題，最后沒有辦法只好設(shè)置了overflow:hidden 將其隱藏。
到此，中間部分的處理就結(jié)束了。
第三步尾部處理
修改過前兩部分后，這一部分就容易多了，制定一個#bot1，每一個框應(yīng)用一次,再應(yīng)用幾個無序列表，構(gòu)成基本外觀。在這一部分遇到的問題是：鏈接不能左對齊，指定了text-align：left;也不能,最后只好對每一行設(shè)置不同的邊界、填充，達到對齊的效果。
這樣整體就基本完成了。剩下的工作就是細致的調(diào)整邊框?qū)R和各部分的空白了。整個工程我花了三天的時間，兩天完成基本任務(wù)，最后一天用來做細致的調(diào)整。最后的文檔大小為48.8k比原來的大小整整小了30k呢
最后的完成源文件可以在我的網(wǎng)站找到，點擊瀏覽。
最新的修改2005-10-13
2005-10-28日修改，修正了在ie下顯示不正常的部分。
標(biāo)簽：衢州 寧夏 北海 晉中 鹽城 來賓 陽泉 云南
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《對hao123進行重構(gòu)》，本文關(guān)鍵詞 對,hao123,進行,重構(gòu),對,hao123,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
