[翻译]标记语言和样式手册 Chapter 15 为body指定样式（2）

标记和样式结构

在开始叙述两种页面共用的标记结构之后,这些叙述就会开始变得很有道理,为了达成分栏布局,会使用在第十二章里提过的绝对定位法.

内文页

内文页简化过的标记结构看起来像是这样:

<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>

以CSS规则为#content与#footer加上足以使用绝对定位法放进#right的右外补丁,在这个例子中,190像素刚好可以满足.

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

索引页

对索引页来说,标记结构完全相同,因此不必复制一份共享的CSS规则,但是在#content左侧加了额外的<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>

对这份三栏结构来说,不仅要为#content与#footer设定右外补丁以容纳右栏,还要设定左外补丁,容纳新加进来的左栏.

但是先前已经把左外补丁设为10像素了,以配合只拥有双栏的预设内文页布局.

哇,我们卡住了,该怎么继续呢?请继续往下阅读.