标记和样式结构
在开始叙述两种页面共用的标记结构之后,这些叙述就会开始变得很有道理,为了达成分栏布局,会使用在第十二章里提过的绝对定位法.
内文页
内文页简化过的标记结构看起来像是这样:
<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像素了,以配合只拥有双栏的预设内文页布局.
这个<body>有分类
这就是<body>标签加入游戏的地方:通过为<body>指定class,指定这个是索引页,就能为这个分类编写特殊的规则了.
举例来说,为了要覆盖预设的10像素左外补丁,就需要为索引页的<body>标签加上一下这个分类.:
<body class="index">
在原本为#content 与 #footer设定补丁的规则之后,我们加上以下的CSS:
#content, #footer { margin: 10px 190px 10px 10px; } body.index #content, body.index #footer { margin-left: 190px; }
在把<body>标签设为index分类的页面里,左边扩大190像素(与右边相同)可以用来容纳左栏,如果不指定index分类的话,左外补丁就会是预设值里声明的10像素了.
现在就能在两栏,三栏布局之间切换了,只要为<body>标签指定分类,在需要的时候为标记源代码加上额外的<div>即可,你也能指定更多分类,能处理的页面类型数目并没有限制.
标记区域与名称可以维持相同,根据页面类型进行微调即可.
出处:蓝色理想
责任编辑:bluehearts
上一页 标记语言——为body指定样式 [1] 下一页 标记语言——为body指定样式 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|