|
前言
- 下文中的例子以豆瓣用戶登錄后的頁面為基礎(chǔ)，各人顯示的內(nèi)容可能有所差別；
- 這次并不強求像素級的一致，特別是行距、間距部分可能有細微出入；
- 理解本文需要你對 HTML 和 CSS 有所了解，最好能夠手寫 HTML 和 CSS 代碼；
- 詳細閱讀本文可能會花上你 15 分鐘以上時間；
- 本文遵循 Code for the best, fix for the rest 原則。
一、分析結(jié)構(gòu)
布局難點
豆瓣的首頁是典型的三行兩欄的布局，不過有特殊之處。除去頭尾，中間的兩欄，左欄是自適應(yīng)，右欄是固定寬度（350px）。這樣的布局，如果不考慮先加載哪部分內(nèi)容（及語義），有相當(dāng)簡便的寫法。另外如果兩欄都是百分比寬度，那么也好處理。不過事實是右欄的寬度是固定的（并且我計劃讓左欄先加載）。固定寬度（或高度）是一件很危險的事，除非你也固定了文字大小，不然當(dāng)文字被放大顯示后，很容易出錯（不過用表格的話就不用考慮這么多）。
其他難點
- 左欄的新評論列表
- 我覺得那是一個有序列表（Ordered List），所以在代碼中用 <ol> 標(biāo)簽；也可以用 <dl> 或者直接寫 <div>
- 列表左側(cè)的圖片，是用戶的頭像而不是書的封面。所以我把 <img> 和用戶名那一行寫在一起。
- 右欄的豆瓣推薦和友鄰的樣式
- 我們常見的是固定高度的塊依次浮動排列，但是這里書名的長度不一、圖片大小不一且底部對齊，浮動塊的高度未知，我沒辦法，只能暫時限定高度。誰有辦法請不吝告知。
在分析結(jié)構(gòu)的時候，我們一定要知道，我們需要先寫什么，然后再寫什么。這直接影響到后面樣式表的寫法。并且我的建議是，當(dāng)結(jié)構(gòu)確定下來之后，不要輕易改動。
出處：藍色理想
責(zé)任編輯：blue
上一頁 下一頁 基本布局代碼
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 分析結(jié)構(gòu)
第 2 頁 
