Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局豆瓣首頁(yè)

2024-07-11 08:40:31

字體：大中小

供稿：網(wǎng)友

前言

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

其他難點(diǎn)

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

示例代碼 [www.CuoXIn.com]

上一篇：CSS實(shí)例：Unobtrusive頁(yè)簽切換符合Web標(biāo)準(zhǔn)具有html語義

下一篇：Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局Google首頁(yè)