對(duì)hao123進(jìn)行重構(gòu)

熱門標(biāo)簽：電銷機(jī)器人的宣傳語(yǔ) 沸思外呼線路 400電話辦理安徽 南通電話外呼系統(tǒng)開發(fā) 石家莊電話機(jī)器人電話 北京銷售外呼系統(tǒng)線路 江西防封卡外呼系統(tǒng)怎么安裝 電銷智能機(jī)器人靠譜么 南寧外呼電銷系統(tǒng)招商

受朋友之托，我對(duì)hao123.com網(wǎng)站首頁(yè)進(jìn)行了div+css的重新布局，精簡(jiǎn)源碼，以適應(yīng)現(xiàn)在的形勢(shì)。

拿到hao123.com的首頁(yè)，首先對(duì)原來(lái)的布局進(jìn)行了分析：
源文件的大小為80k，文字內(nèi)容較多，圖片只有6個(gè)。布局不是很復(fù)雜分上中下三行，上部有5行： logo 廣告區(qū)、 一個(gè) 功能區(qū)、 郵箱登陸區(qū)、 百度搜索欄、 最后是推薦。中部有兩行 每行有兩列 第一行左邊是分類導(dǎo)航， 右邊是名站導(dǎo)航和分類精選， 有1000px高， 第二行是酷站秀 和 四個(gè)門戶網(wǎng)站的導(dǎo)航鏈接。下部是幾個(gè)專題欄目，還有 一個(gè)綜合搜索引擎，最底部自然就是版權(quán)欄了。

接下來(lái)我對(duì)每一部分的布局和顏色進(jìn)行了詳細(xì)的分析。
Hao123以鏈接為主，整個(gè)網(wǎng)站主要的鏈接顏色 是#000（黑色）， 鼠標(biāo)經(jīng)過(guò)時(shí)變?yōu)?#f00（紅色）并添加了下劃線， 訪問(wèn)過(guò)的鏈接為 #000無(wú)下劃線， 活動(dòng)鏈接為 #0f0 無(wú)下劃線 ，還有一部分鏈接為橙色、綠色 。
下面是分析后的結(jié)果以及對(duì)每一部分指定的id

區(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

完成了分析，接下來(lái)進(jìn)行細(xì)致的改造工作！
第一步：網(wǎng)頁(yè)頂部
對(duì)網(wǎng)頁(yè)頂部的操作還是比較簡(jiǎn)單的，只是將每一部分改寫為div的形式。#head0原來(lái)是一個(gè)表格，其實(shí)沒有必要用表格的，因?yàn)闆]有表格時(shí)，3個(gè)圖片也是排在一行，只需要對(duì)第二個(gè)圖片指定水平間距就可以和原來(lái)使用表格時(shí)的外觀完全一致。
下來(lái)#head1是幾個(gè)功能鏈接。 原來(lái)的布局為四個(gè)單元格的表格，我將表格去掉，對(duì)head1的樣式表指定寬度、高度、行高、背景色、前景色使之形成基本的布局，然后又添加了一個(gè)    #head1 a 的id選擇器，指定該區(qū)域鏈接的顏色為白色，外補(bǔ)丁（margin）為16xp，接著又單獨(dú)對(duì)第一個(gè)鏈接的外補(bǔ)丁重新定義了一下，寫入內(nèi)聯(lián)樣式。
#head2是搜索欄。定義好#head2、 #head a:link、 #head a:visited 、后去掉表格，預(yù)覽時(shí)，發(fā)現(xiàn)這一部分被撐開了，原來(lái)是沒有對(duì)form>標(biāo)簽重定義。（做過(guò)網(wǎng)頁(yè)的人可能都知道應(yīng)該怎么處理只要把form>標(biāo)簽移動(dòng)到td>的外面就行了）。但在css里我們只需要重新定義form標(biāo)簽：form{margin:0;padding:0;}，再次預(yù)覽一切OK!
有了上面的處理，對(duì)#head3的修改就比較簡(jiǎn)單了，只需定義好#head3 、#head3 a。對(duì)#head4也進(jìn)行同樣的處理。
這樣整個(gè)網(wǎng)頁(yè)頂部就處理完畢！

第二步 中部處理
整個(gè)網(wǎng)頁(yè)中這部分的處理是最復(fù)雜的，最耗時(shí)的。在制作過(guò)程中還走了彎路（剛開始分析的時(shí)候我將酷站秀部分和門戶網(wǎng)站分到了尾部來(lái)處理，結(jié)果非常的糟糕，浮動(dòng)后根本無(wú)法對(duì)齊,后來(lái)將這兩部分改到了中部處理就沒有問(wèn)題了）。

左側(cè)部分是一個(gè)兩列的表格，每一個(gè)鏈接前有一個(gè)綠色的菱形圖案 。一開始考慮將方塊做成一個(gè)圖片,可是最后算了一下大小，沒有必要這樣去做。由于網(wǎng)面的主鏈接是黑色的，而且已經(jīng)定義好，仔細(xì)分析后發(fā)現(xiàn)只需要定義一下列表的文字顏色和字號(hào)就完全可以解決問(wè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;
}

下來(lái)是酷站秀，它和上面的導(dǎo)航列表包含在了一個(gè)層里面并且使用了float left 。這部分就是一個(gè)標(biāo)題圖片不好處理，剛開始指定成了#coolsite 的背景圖片 可這樣一來(lái)沒有了綠色背景襯托，只好又加了一個(gè)span>標(biāo)記。右邊的幾個(gè)鏈接處理成為列表，針對(duì)底部的兩個(gè)不同顏色的鏈接單獨(dú)指定一個(gè)綠色的樣式。

最重要的部分是名站導(dǎo)航、酷站精選。 這部分和下面的 四個(gè)門戶網(wǎng)站一起放在了一個(gè)div id=”right”>里面處理 使用了float:left ，
“名站導(dǎo)航” 和“酷站精選” 我處理成了h1> 標(biāo)題，只要重新定義h1>即可。名站導(dǎo)航下面的五列內(nèi)容 每一列里的鏈接都改為一個(gè)列表，指定其長(zhǎng)寬，向左浮動(dòng)，最后有一點(diǎn)尺寸的差異，所以對(duì)最后一列的寬度重新定義使之能填滿外圍圖層。這樣和原來(lái)的外觀就一致了。名站導(dǎo)航下面還有一行鏈接單獨(dú)定義了一個(gè)樣式。
接下來(lái)的“酷站精選”標(biāo)題直接應(yīng)用了h1>，整個(gè)網(wǎng)頁(yè)處理過(guò)程中最難的就是酷站精選的內(nèi)容，還沒有考慮好的時(shí)候我只是將原來(lái)的內(nèi)容進(jìn)行了簡(jiǎn)單的復(fù)制，然后處理后面的部分?；剡^(guò)頭來(lái)思考怎么處理這部分，兩個(gè)字的標(biāo)題是一個(gè)顏色，中間的內(nèi)容和右面的“更多〉〉”倒是基礎(chǔ)的鏈接顏色，每一部分之間還有細(xì)線分割，如果對(duì)每一部分簡(jiǎn)單的處理成div>或者span>的話就失去了重構(gòu)的意義了。最后我這樣做處理：每一行還是一個(gè)列表，兩個(gè)字的小標(biāo)題應(yīng)用一個(gè)樣式并向左浮動(dòng)，中間部分包含在span>里并向左浮動(dòng)，右面的“更多〉〉”不再指定樣式。這樣的話比每一部分都包含在塊里面要好得多，最好的方法還不是這個(gè)，對(duì)兩個(gè)字的小標(biāo)題應(yīng)用一個(gè)重新定義過(guò)的h2>樣式才是最好的，這樣文檔的結(jié)構(gòu)要更好一些。

這部分里行與行的背景色是相間的，只要指定兩個(gè)顏色樣式，對(duì)相應(yīng)的列表指定就行了。
中部還剩下最后一塊：四個(gè)門戶網(wǎng)站的鏈接。每一個(gè)門戶包含在一個(gè)div>里，然后應(yīng)用左浮動(dòng)。由于外層的div>指定了寬度，四個(gè)方框排成兩行，第一行是綠色邊框，第二行是藍(lán)色邊框，寫邊框樣式的時(shí)候以上面兩個(gè)的顏色為主，另外兩個(gè)在內(nèi)聯(lián)樣式中改寫一下。邊框中的內(nèi)容都改在列表里。列表第一行是標(biāo)題，需要應(yīng)用標(biāo)題樣式再向左浮動(dòng)，哈哈效果比原來(lái)的還好。列表第二行還需要定義clear:right;這樣就使剩下的三行不產(chǎn)生浮動(dòng)。

在修改過(guò)程中遇到了的一些莫名其妙的問(wèn)題，還想特別說(shuō)明一下：

左右兩部分始終對(duì)不齊

這是一開始的左側(cè)部分樣式：

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

在這個(gè)樣式下預(yù)覽的時(shí)候不同的瀏覽器顯示的效果是不一樣的，

 后來(lái)我將樣式修改了問(wèn)題才解決了：

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

看上去這兩個(gè)樣式實(shí)現(xiàn)的功能是一樣的。但是效果不一樣，也許是默認(rèn)樣式的問(wèn)題吧！

IE 的bug

這個(gè)問(wèn)題的的確確是莫名其妙,看一下效果：

仔細(xì)看一下多出來(lái)四個(gè)字，會(huì)讓人很驚訝哦。在其他的瀏覽器里倒是沒有個(gè)問(wèn)題，如果四個(gè)方框的間距設(shè)的小一些也沒有這個(gè)問(wèn)題，最后沒有辦法只好設(shè)置了overflow:hidden 將其隱藏。
到此，中間部分的處理就結(jié)束了。

第三步尾部處理
修改過(guò)前兩部分后，這一部分就容易多了，制定一個(gè)#bot1，每一個(gè)框應(yīng)用一次,再應(yīng)用幾個(gè)無(wú)序列表，構(gòu)成基本外觀。在這一部分遇到的問(wèn)題是：鏈接不能左對(duì)齊，指定了text-align：left;也不能,最后只好對(duì)每一行設(shè)置不同的邊界、填充，達(dá)到對(duì)齊的效果。

這樣整體就基本完成了。剩下的工作就是細(xì)致的調(diào)整邊框?qū)R和各部分的空白了。整個(gè)工程我花了三天的時(shí)間，兩天完成基本任務(wù)，最后一天用來(lái)做細(xì)致的調(diào)整。最后的文檔大小為48.8k比原來(lái)的大小整整小了30k呢

最后的完成源文件可以在我的網(wǎng)站找到，點(diǎn)擊瀏覽。

最新的修改2005-10-13

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