<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>

#content, #footer {
margin: 10px 190px 10px 10px;
}

索引頁
對(duì)索引頁來說,標(biāo)記結(jié)構(gòu)完全相同,因此不必復(fù)制一份共享的CSS規(guī)則,但是在#content左側(cè)加了額外的<div>作為第三欄(#left).

<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="left">
...left column info...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>

對(duì)這份三欄結(jié)構(gòu)來說,不僅要為#content與#footer設(shè)定右外補(bǔ)丁以容納右欄,還要設(shè)定左外補(bǔ)丁,容納新加進(jìn)來的左欄.
但是先前已經(jīng)把左外補(bǔ)丁設(shè)為10像素了,以配合只擁有雙欄的預(yù)設(shè)內(nèi)文頁布局.
哇,我們卡住了,該怎么繼續(xù)呢?請(qǐng)繼續(xù)往下閱讀.

上一頁12 3 下一頁 閱讀全文