|
三、左欄新評論列表
剛才說了，這里可以用 <dl>、<ul>、<ol> 或者 <div>，用什么是個人習(xí)慣或者根據(jù)需要。我在這里用 <ol>，其他的寫法都可以由此擴(kuò)展。HTML 結(jié)構(gòu)代碼如下：
<ol>
<li>
<h3>這里是評論的標(biāo)題</h3> <!-- Logo 和各部分的大標(biāo)題已經(jīng)使用了 h1 和 h2 -->
<p>評論的作者頭像<img>和其他信息</p>
<p>評論的摘要</p>
</li>
...
</ol>
這里的圖片是用戶的頭像，所以我覺得應(yīng)該和用戶名放在一起。那么這種寫法，用絕對定位簡便一些。再提一下，如果使用浮動，必須給浮動的對象設(shè)置寬度，不然其寬度就會根據(jù)內(nèi)容計(jì)算，這里的 <h3> 就不大方便用反向浮動的方法，因?yàn)樗枰赃m應(yīng)寬度（如果用反向浮動的方法，可以參考上面布局的 CSS 寫法）。
好了，基本問題解釋清楚，我們開始寫這里的樣式（注意要清除 <ol> 的 margin）：
.comment{
list-style: none;
position: relative; /* 給頭像的絕對定位一個參照 */
width: 100%; /* 如果不設(shè)置寬度，在 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> 單獨(dú)提出來，不和用戶名寫在一起，那么可以不用絕對定位。不過在自適應(yīng)的布局里，使用 float 來定位也是相當(dāng)麻煩的一件事情。
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁 基本布局代碼 下一頁 右欄豆瓣推薦
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 3 頁 左欄新評論列表
