Web 標準實踐——豆瓣的首頁

來源:互聯網
上載者:User
web|標準

前言

  • 下文中的例子以豆瓣使用者登入後的頁面為基礎,各人顯示的內容可能有所差別;
  • 這次並不強求像素級的一致,特別是行距、間距部分可能有細微出入;
  • 理解本文需要你對 HTML 和 CSS 有所瞭解,最好能夠手寫 HTML 和 CSS 代碼;
  • 詳細閱讀本文可能會花上你 15 分鐘以上時間;
  • 本文遵循 Code for the best, fix for the rest 原則。

一、分析結構

布局痛點

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

其他痛點

  • 左欄的新評論列表
    • 我覺得那是一個有序列表(Ordered List),所以在代碼中用 <ol> 標籤;也可以用 <dl> 或者直接寫 <div>
    • 列表左側的圖片,是使用者的頭像而不是書的封面。所以我把 <img> 和使用者名稱那一行寫在一起。
  • 右欄的豆瓣推薦和友鄰的樣式
    • 我們常見的是固定高度的塊依次浮動排列,但是這裡書名的長度不一、圖片大小不一且底部對齊,浮動塊的高度未知,我沒辦法,只能暫時限定高度。誰有辦法請不吝告知。

在分析結構的時候,我們一定要知道,我們需要先寫什麼,然後再寫什麼。這直接影響到後面樣式表的寫法。並且我的建議是,當結構確定下來之後,不要輕易改動。

二、基本布局代碼

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

中間的兩欄我命名為 #main 和 #sidebar。哪部分先顯示呢?我想左側的新評論先顯示可能更好一些,畢竟在大部分情況下它的寬度都大於右側。於是在 HTML 裡面 #main 要寫在 #sidebar 前面,如下:

<div id="hd"></div>
<div id="bd">
<div id="main"></div>
<div id="sidebar"></div>
</div>
<div id="ft"></div>

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

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

#bd{
padding-right: 410px; /* 因為有 padding 所以 clear float 不能簡單地將 #bd 設定為浮動 */
}
#main{
width: 100%;
float: left;
}
#sidebar{
width: 350px;
float: left; /* 如果float right,在 IE 下有問題,這裡 fix 一下 */
margin-left: 60px; /* 欄間距,即 gutter */
margin-right: -410px; /* 這一句很重要 */
}

如果我們在 HTML 裡面先寫固定寬度的 #sidebar,那麼 CSS 相當簡單了,只需將 #sidebar 浮動到右邊,然後 #main 再 margin-right: 410px; 就可以了,很 solid。這樣 #main 的寬度也自適應了。CSS 如下(實際項目中我會採用這種寫法,本例不是):

#sidebar{
float: right; /* 注意在 HTML 裡面 #sidebar 寫在 #main 前面 */
width: 350px;
}
#main{
margin-right: 410px;
}

三、左欄新評論列表

剛才說了,這裡可以用 <dl>、<ul>、<ol> 或者 <div>,用什麼是個人習慣或者根據需要。我在這裡用 <ol>,其他的寫法都可以由此擴充。HTML 結構代碼如下:

<ol>
<li>
<h3>這裡是評論的標題</h3> <!-- Logo 和各部分的大標題已經使用了 h1 和 h2 -->
<p>評論的作者頭像<img>和其他資訊</p>
<p>評論的摘要</p>
</li>
...
</ol>

這裡的圖片是使用者的頭像,所以我覺得應該和使用者名稱放在一起。那麼這種寫法,用絕對位置簡便一些。再提一下,如果使用浮動,必須給浮動的對象設定寬度,不然其寬度就會根據內容計算,這裡的 <h3> 就不大方便用反向浮動的方法,因為它需要自適應寬度(如果用反向浮動的方法,可以參考上面布局的 CSS 寫法)。

好了,基本問題解釋清楚,我們開始寫這裡的樣式(注意要清除 <ol> 的 margin):

.comment{
list-style: none;
position: relative; /* 給頭像的絕對位置一個參照 */
width: 100%; /* 如果不設定寬度,在 IE 下有定位問題;參考 On Having Layout 一文 */
}
.comment h3{
background: #EFE;
margin-left: 75px;
}
.comment p{
margin-left: 75px;
}
.comment .avatar{ /* 頭像 <img> 的 class */
position: absolute;
top: 0;
left: 0;
}

如果我們把頭像 <img> 單獨提出來,不和使用者名稱寫在一起,那麼可以不用絕對位置。不過在自適應的布局裡,使用 float 來定位也是相當麻煩的一件事情。

四、右欄豆瓣推薦

最大的痛點。因為書名長短不一致,導致浮動的塊高度並不能夠統一(如果不設定的話),這樣對於第二排的浮動就會有影響。我沒想出有什麼好的辦法可以解決這個問題,所以只能給一個不完美的寫法(但這很常用):

<ul>
<li>
<div><img src="..." alt="..." /></div>
<p>書或其他 item 的名字</p>
</li>
...
</ul>

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

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

.itemlst{
width: 350px;
margin: 0;
padding: 0;
}
.itemlst li{
width: 100px;
padding: 0 8px; /* 使用 margin 在 IE 下會有 double margin 的 Bug */
float: left;
text-align: center;
list-style: none;
}
.itemlst li img{
padding: 10px;
}
.itemlst li div{
width: 100%;
height: 120px; /* 這樣把映像所處的塊高度統一在 120px */
}
.itemlst li p{
float: left;
height: 6em; /* 最多顯示四行文字,再放大就不行了 */
line-height: 1.5em;
}

(通過 Strict 驗證,不過沒什麼意思 -_-)

五、其他

  • 因為 FF 和 IE 對於 border: 1px dotted #DDD 顯示的效果不一致。所以一般我會用背景代替(本例沒有這麼做)。
  • 文字大小的控制,在 body 中設定基準值 small,然後使用百分比控制其他所有的文字大小。具體可以參考Bulletproof Web Design中文版圖書也已經上市。另,這隻是習慣而已,在國內製作網頁請根據實際情況量力而為。
  • 關於第四部分的寫法,在另外的文章內有說明。
  • 在 CSS 的一開始,設定 *{margin: 0;padding: 0},統一各個瀏覽器的細微的差別。
  • 最後設定各部分的字型和元素間的間距,完成整個頁面的製作。
    查看最終效果

IE 下會有些局部的差異,大家有興趣的話,可以研究一下,這裡僅為 Firefox 服務。

六、我們學到了什麼

  • 利用 float 進行布局,特別是第二部分裡面的第二種寫法很常用;
  • 利用 position: absolute; 和 position: relative; 進行局部定位;
  • 清單項目(<li>)的浮動塊狀顯示;
  • 在製作符合標準的頁面時,需要考慮 resizing window 和 change font size 的問題。


相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。