标题，只要重新定义

即可。名站导航下面的五列内容 每一列里的链接都改为一个列表，指定其长宽，向左浮动，最后有一点尺寸的差异，所以对最后一列的宽度重新定义使之能填满外围图层。这样和原来的外观就一致了。名站导航下面还有一行链接单独定义了一个样式。
接下来的“酷站精选”标题直接应用了

，整个网页处理过程中最难的就是酷站精选的内容，还没有考虑好的时候我只是将原来的内容进行了简单的复制，然后处理后面的部分。回过头来思考怎么处理这部分，两个字的标题是一个颜色，中间的内容和右面的“更多〉〉”倒是基础的链接颜色，每一部分之间还有细线分割，如果对每一部分简单的处理成

或者的话就失去了重构的意义了。最后我这样做处理：每一行还是一个列表，两个字的小标题应用一个样式并向左浮动，中间部分包含在里并向左浮动，右面的“更多〉〉”不再指定样式。这样的话比每一部分都包含在块里面要好得多，最好的方法还不是这个，对两个字的小标题应用一个重新定义过的

样式才是最好的，这样文档的结构要更好一些。

這部分裡行與行的背景色是相間的，只要指定兩個顏色樣式，對應的清單指定就行了。
中部還剩下最後一塊：四個入口網站的連結。每一個門戶包含在一個

裡，然後套用左浮動。由於外層的

指定了寬度，四個方框排成兩行，第一行是綠色邊框，第二行是藍色邊框，寫邊框樣式的時候以上面兩個的顏色為主，另外兩個在內聯樣式中改寫一下。邊框中的內容都改在清單裡。清單第一行是標題，需要套用標題樣式再向左浮動，哈哈效果比原來的還好。清單第二行還需要定義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下方顯示不正常的部分

。