前言

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

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

　　布局難點

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

其他難點

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

二、基本布局代碼

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

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


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

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


查看至今為止的效果

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


三、左欄新評論列表

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


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

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


查看至今為止的效果

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

四、右欄豆瓣推薦

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


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

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


查看至今為止的效果（通過 Strict 驗證，不過沒什么意思 -_-）

五、其他

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

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

　　◎ 利用 float 進行布局，非凡是第二部分里面的第二種寫法很常用；
　　◎ 利用 position: absolute; 和 position: relative; 進行局部定位；
　　◎ 列表項（<li>）的浮動塊狀顯示；
　　◎ 在制作符合標準的頁面時，需要考慮 resizing window 和 change font size 的問題。