日本欧美一区二区三区高清_ Web 標準實(shí)踐——豆瓣的首頁(yè)-豆瓣|UI|UE|草根網(wǎng)IT資訊精讀(20ju.com)

題

外話(huà)：不好意思在第一篇的三周之后才交作業(yè)。本想繼續寫(xiě) Google 的搜索結果頁(yè)的，看到豆瓣上有朋友留言說(shuō)想學(xué)習豆瓣首頁(yè)的寫(xiě)法，我看了一下，有寫(xiě)頭。起初以為比較簡(jiǎn)單的，最后花了不少時(shí)間。但還是有疏漏或者不合理的地方，請直接指出，謝謝。

前言

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

一、分析結構

布局難點(diǎn)

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

其他難點(diǎn)

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

二、基本布局代碼

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

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

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

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

#bd{
padding-right: 410px; /* 因為有 padding 所以 clear float 不能簡(jiǎn)單地將 #bd 設置為浮動(dòng) */
}
#main{
width: 100%;
float: left;
}
#sidebar{
width: 350px;
float: left; /* 如果float right，在 IE 下有問(wèn)題，這里 fix 一下 */
margin-left: 60px; /* 欄間距，即 gutter */
margin-right: -410px; /* 這一句很重要 */
}
查看至今為止的效果

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

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

三、左欄新評論列表

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

<ol>
<li>
<h3>這里是評論的標題</h3> 
<p>評論的作者頭像<img>和其他信息</p>
<p>評論的摘要</p>
</li>
...
</ol>
這里的圖片是用戶(hù)的頭像，所以我覺(jué)得應該和用戶(hù)名放在一起。那么這種寫(xiě)法，用絕對定位簡(jiǎn)便一些。再提一下，如果使用浮動(dòng)，必須給浮動(dòng)的對象設置寬度，不然其寬度就會(huì )根據內容計算，這里的 <h3> 就不大方便用反向浮動(dòng)的方法，因為它需要自適應寬度（如果用反向浮動(dòng)的方法，可以參考上面布局的 CSS 寫(xiě)法）。

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

.comment{
list-style: none;
position: relative; /* 給頭像的絕對定位一個(gè)參照 */
width: 100%; /* 如果不設置寬度，在 IE 下有定位問(wèn)題；參考 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> 單獨提出來(lái)，不和用戶(hù)名寫(xiě)在一起，那么可以不用絕對定位。不過(guò)在自適應的布局里，使用 float 來(lái)定位也是相當麻煩的一件事情。

四、右欄豆瓣推薦

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

<ul>
<li>
<div><img src="..." alt="..." /></div>
<p>書(shū)或其他 item 的名字</p>
</li>
...
</ul>
在圖片周?chē)黾右粋€(gè) <div> 方便控制（看下面的 CSS）。豆瓣上的圖片是大小不一的（真是災難），本例簡(jiǎn)化為圖片大小相同，這樣不會(huì )耽誤太多時(shí)間。

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

.itemlst{
width: 350px;
margin: 0;
padding: 0;
}
.itemlst li{
width: 100px;
padding: 0 8px; /* 使用 margin 在 IE 下會(huì )有 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;
}
查看至今為止的效果（通過(guò) Strict 驗證，不過(guò)沒(méi)什么意思 -_-）

五、其他

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

IE 下會(huì )有些局部的差異，大家有興趣的話(huà)，可以研究一下，這里僅為 Firefox 服務(wù)。

六、我們學(xué)到了什么
利用 float 進(jìn)行布局，特別是第二部分里面的第二種寫(xiě)法很常用；
利用 position: absolute; 和 position: relative; 進(jìn)行局部定位；
列表項（<li>）的浮動(dòng)塊狀顯示；
在制作符合標準的頁(yè)面時(shí)，需要考慮 resizing window 和 change font size 的問(wèn)題。

來(lái)源博客：1906 強烈推薦參閱原文。

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久