前言

　　◎ 下文中的例子以豆瓣用戶登錄后的頁(yè)面為基礎(chǔ)，各人顯示的內(nèi)容可能有所差別；
　　◎ 這次并不強(qiáng)求像素級(jí)的一致，非凡是行距、間距部分可能有細(xì)微出入；
　　◎ 理解本文需要你對(duì) HTML 和 CSS 有所了解，最好能夠手寫 HTML 和 CSS 代碼；
　　◎ 具體閱讀本文可能會(huì)花上你 15 分鐘以上時(shí)間；
　　◎ 本文遵循 Code for the best, fix for the rest 原則。

一、分析結(jié)構(gòu)

　　布局難點(diǎn)

　　豆瓣的首頁(yè)是典型的三行兩欄的布局，不過(guò)有非凡之處。除去頭尾，中間的兩欄，左欄是自適應(yīng)，右欄是固定寬度（350px）。這樣的布局，假如不考慮先加載哪部分內(nèi)容（及語(yǔ)義），有相當(dāng)簡(jiǎn)便的寫法。另外假如兩欄都是百分比寬度，那么也好處理。不過(guò)事實(shí)是右欄的寬度是固定的（并且我計(jì)劃讓左欄先加載）。固定寬度（或高度）是一件很危險(xiǎn)的事，除非你也固定了文字大小，不然當(dāng)文字被放大顯示后，很輕易出錯(cuò)（不過(guò)用表格的話就不用考慮這么多）。

其他難點(diǎn)

　　◎ 左欄的新評(píng)論列表
　　　　◎ 我覺(jué)得那是一個(gè)有序列表（Ordered List），所以在代碼中用 <ol> 標(biāo)簽；也可以用 <dl> 或者直接寫 <div>
　　　　◎ 列表左側(cè)的圖片，是用戶的頭像而不是書的封面。所以我把 <img> 和用戶名那一行寫在一起。
　　◎ 右欄的豆瓣推薦和友鄰的樣式
　　　　◎ 我們常見(jiàn)的是固定高度的塊依次浮動(dòng)排列，但是這里書名的長(zhǎng)度不一、圖片大小不一且底部對(duì)齊，浮動(dòng)塊的高度未知，我沒(méi)辦法，只能暫時(shí)限定高度。誰(shuí)有辦法請(qǐng)不吝告知。
　　在分析結(jié)構(gòu)的時(shí)候，我們一定要知道，我們需要先寫什么，然后再寫什么。這直接影響到后面樣式表的寫法。并且我的建議是，當(dāng)結(jié)構(gòu)確定下來(lái)之后，不要輕易改動(dòng)。

二、基本布局代碼

　　參照 Yahoo! UI Lib Grids，我把上中下三行分別命名為 #hd、#bd、#ft，是 #header、#body 和 #footer 的縮寫。關(guān)于 id 和 class 的命名，各自有各自的習(xí)慣。在 CSS 里面，一般習(xí)慣用中劃線法（如 comment-list）、下劃線法（如 comment_list）、駱駝命名法（如 commentList）和帕斯卡命名法（如 CommentList），我個(gè)人比較傾向于使用下劃線法。

　　中間的兩欄我命名為 #main 和 #sidebar。哪部分先顯示呢？我想左側(cè)的新評(píng)論先顯示可能更好一些，究竟在大部分情況下它的寬度都大于右側(cè)。于是在 HTML 里面 #main 要寫在 #sidebar 前面，如下：


　　樣式表怎么寫呢？#hd、#ft可以先不管，#bd 因?yàn)槠鋬?nèi)部有浮動(dòng)，不能自適應(yīng)高度，所以需要清除浮動(dòng)，方法有很多。假如不清除浮動(dòng)，那么 #ft 的內(nèi)容就會(huì)“見(jiàn)縫插針”的顯示在你不想見(jiàn)到它的地方。本文的例子，可以給 #ft 設(shè)定 clear: both;，或者為 #bd 進(jìn)行 easy clearing。

　　因?yàn)?#main 的寬度是自適應(yīng)的，#sidebar 的寬度又固定為 350px，在 HTML 里面又是 #main 在前，所以不能用簡(jiǎn)單的浮動(dòng)（浮動(dòng)的元素必須設(shè)定寬度，否則會(huì)根據(jù)內(nèi)容取寬度），也不能用絕對(duì)定位，因?yàn)槟悴恢�道兩者的高��。根�?jù)屏幕寬度不同，有時(shí)候是 #sidebar 比較高，有時(shí)候是 #main 比較高，使用絕對(duì)定位的話，下面的 #ft 顯示就會(huì)有問(wèn)題。所以我用了一種不常用的辦法（我不太喜歡這種負(fù)值 margin 的寫法），如下：


查看至今為止的效果

　　假如我們?cè)?HTML 里面先寫固定寬度的 #sidebar，那么 CSS 相當(dāng)簡(jiǎn)單了，只需將 #sidebar 浮動(dòng)到右邊，然后 #main 再 margin-right: 410px; 就可以了，很 solid。這樣 #main 的寬度也自適應(yīng)了。CSS 如下（實(shí)際項(xiàng)目中我會(huì)采用這種寫法，本例不是）：


三、左欄新評(píng)論列表

　　剛才說(shuō)了，這里可以用 <dl>、<ul>、<ol> 或者 <div>，用什么是個(gè)人習(xí)慣或者根據(jù)需要。我在這里用 <ol>，其他的寫法都可以由此擴(kuò)展。HTML 結(jié)構(gòu)代碼如下：


　　這里的圖片是用戶的頭像，所以我覺(jué)得應(yīng)該和用戶名放在一起。那么這種寫法，用絕對(duì)定位簡(jiǎn)便一些。再提一下，假如使用浮動(dòng)，必須給浮動(dòng)的對(duì)象設(shè)置寬度，不然其寬度就會(huì)根據(jù)內(nèi)容計(jì)算，這里的 <h3> 就不大方便用反向浮動(dòng)的方法，因?yàn)樗�需要自適應(yīng)寬度（假如用反向浮動(dòng)的方法，可以參考上面布局的 CSS 寫法）。

　　好了，基本問(wèn)題解釋清楚，我們開(kāi)始寫這里的樣式（注重要清除 <ol> 的 margin）：


查看至今為止的效果

　　假如我們把頭像 <img> 單獨(dú)提出來(lái)，不和用戶名寫在一起，那么可以不用絕對(duì)定位。不過(guò)在自適應(yīng)的布局里，使用 float 來(lái)定位也是相當(dāng)麻煩的一件事情。

四、右欄豆瓣推薦

　　最大的難點(diǎn)。因?yàn)闀�名長(zhǎng)短不一致，導(dǎo)致浮動(dòng)的塊高度并不能夠統(tǒng)一（假如不設(shè)置的話），這樣對(duì)于第二排的浮動(dòng)就會(huì)有影響。我沒(méi)想出有什么好的辦法可以解決這個(gè)問(wèn)題，所以只能給一個(gè)不完美的寫法（但這很常用）：


　　在圖片四周增加一個(gè) <div> 方便控制（看下面的 CSS）。豆瓣上的圖片是大小不一的（真是災(zāi)難），本例簡(jiǎn)化為圖片大小相同，這樣不會(huì)耽誤太多時(shí)間。

　　我把圖片四周的 <div> 高度和 <p> 的高度分開(kāi)，這樣在放大文字的時(shí)候，可以保持相對(duì)良好的可讀性（但還是有不足的地方）。樣式表如下：


查看至今為止的效果（通過(guò) Strict 驗(yàn)證，不過(guò)沒(méi)什么意思 -_-）

五、其他

　　◎ 因?yàn)?FF 和 IE 對(duì)于 border: 1px dotted #DDD 顯示的效果不一致。所以一般我會(huì)用背景代替（本例沒(méi)有這么做）。
　　◎ 文字大小的控制，在 body 中設(shè)置基準(zhǔn)值 small，然后使用百分比控制其他所有的文字大小。具體可以參考Bulletproof Web Design，中文版圖書也已經(jīng)上市。另，這只是習(xí)慣而已，在國(guó)內(nèi)制作網(wǎng)頁(yè)請(qǐng)根據(jù)實(shí)際情況量力而為。
　　◎ 關(guān)于第四部分的寫法，在另外的文章內(nèi)有說(shuō)明。
　　◎ 在 CSS 的一開(kāi)始，設(shè)定 *{margin: 0;padding: 0}，統(tǒng)一各個(gè)瀏覽器的細(xì)微的差別。
　　◎ 最后設(shè)置各部分的字體和元素間的間距，完成整個(gè)頁(yè)面的制作。
　　查看最終效果
　　IE 下會(huì)有些局部的差異，大家有愛(ài)好的話，可以研究一下，這里僅為 Firefox 服務(wù)。

六、我們學(xué)到了什么

　　◎ 利用 float 進(jìn)行布局，非凡是第二部分里面的第二種寫法很常用；
　　◎ 利用 position: absolute; 和 position: relative; 進(jìn)行局部定位；
　　◎ 列表項(xiàng)（<li>）的浮動(dòng)塊狀顯示；
　　◎ 在制作符合標(biāo)準(zhǔn)的頁(yè)面時(shí)，需要考慮 resizing window 和 change font size 的問(wèn)題。