|
二、基本布局代碼
參照 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 前面，如下：
<div id="hd"></div>
<div id="bd">
<div id="main"></div>
<div id="sidebar"></div>
</div>
<div id="ft"></div>
樣式表怎么寫呢？#hd、#ft可以先不管，#bd 因?yàn)槠鋬?nèi)部有浮動(dòng)，不能自適應(yīng)高度，所以需要清除浮動(dòng)，方法有很多。如果不清除浮動(dòng)，那么 #ft 的內(nèi)容就會(huì)“見縫插針”的顯示在你不想見到它的地方。本文的例子，可以給 #ft 設(shè)定 clear: both;，或者為 #bd 進(jìn)行 easy clearing。
因?yàn)?#main 的寬度是自適應(yīng)的，#sidebar 的寬度又固定為 350px，在 HTML 里面又是 #main 在前，所以不能用簡(jiǎn)單的浮動(dòng)（浮動(dòng)的元素必須設(shè)定寬度，否則會(huì)根據(jù)內(nèi)容取寬度），也不能用絕對(duì)定位，因?yàn)槟悴恢纼烧叩母叨取８鶕?jù)屏幕寬度不同，有時(shí)候是 #sidebar 比較高，有時(shí)候是 #main 比較高，使用絕對(duì)定位的話，下面的 #ft 顯示就會(huì)有問題。所以我用了一種不常用的辦法（我不太喜歡這種負(fù)值 margin 的寫法），如下：
#bd{
padding-right: 410px; /* 因?yàn)橛?padding 所以 clear float 不能簡(jiǎn)單地將 #bd 設(shè)置為浮動(dòng) */
}
#main{
width: 100%;
float: left;
}
#sidebar{
width: 350px;
float: left; /* 如果float right，在 IE 下有問題，這里 fix 一下 */
margin-left: 60px; /* 欄間距，即 gutter */
margin-right: -410px; /* 這一句很重要 */
}
查看至今為止的效果
如果我們?cè)?HTML 里面先寫固定寬度的 #sidebar，那么 CSS 相當(dāng)簡(jiǎn)單了，只需將 #sidebar 浮動(dòng)到右邊，然后 #main 再 margin-right: 410px; 就可以了，很 solid。這樣 #main 的寬度也自適應(yīng)了。CSS 如下（實(shí)際項(xiàng)目中我會(huì)采用這種寫法，本例不是）：
#sidebar{
float: right; /* 注意在 HTML 里面 #sidebar 寫在 #main 前面 */
width: 350px;
}
#main{
margin-right: 410px;
}
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) 分析結(jié)構(gòu) 下一頁(yè) 左欄新評(píng)論列表
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) 基本布局代碼
