
<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>
在前面这一小段源代码里,我们为每个li加了个简短的id,字字符串尾加上_tab以避免重复.稍后就能看出道理何在.
现在完成了清单的标记语法,现在我们能把它忘了,这可能很方便,视你使用的模板,内容管理系统而定.
这个效果唯一需要变动的地方只有<body>标签的id,这样就能凸显使用者所在的页面.举例来说,如果想告诉浏览器目前正位于Apples页,就可以像这样为<body>加上id:
<body id="apples">
或者是,加上id代表目前正处在Beans页面:
<body id="beans">
以此类推.
CSS的魔力
要根据<body>的id来"点亮"标签,只需要一组CSS声明,告诉浏览器每种可能发生的组合:
body#apples #apples_tab a,
body#spag #spag_tab a,
body#beans #beans_tab a,
body#milk #milk_tab a {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
基本上这就代表了:当<body>标签的id是apples的时候,就为#apples_tab清单项目加上链接背景,同时把连接色彩换成黑色,然后为,每个标签选项重复类似的声明。
现在需要"点亮"导航条内正确的动作只剩下变更<body>标签的id了。这段CSS会处理好剩下的事情,同时能在未来网站新增页面时进行修改,以便处理更多种组合。
举例来说,如果想根据使用者目前位于这一页,"点亮"Beans标签的话,只需要像这样为<body>标签指定id即可
<body id="beans_tab">
然后正确的标签就会凸显出来,就像图15-4一样(这边我们用了第一章解释的"mini-tab"样式).

我们也能为<body>指定其他在标记源代码,CSS里都声明过的id,"点亮"我们希望凸显的其他分页标签。
除此之外,你也能以相同的概念触发页面里其他与内容相关的事件,像是子导航目录,或者根据页面的id轮换颜色。由于<body>标签位于顶层,因此它的id可以用来控制页面里任何在它底下的标签。
归纳
迁移到用CSS作为基础的布局方法后,你一定会对更大的灵活性感到惊讶。在这一章里,我们看了善用这种灵活性的方法之一:也就是使用<body>标签的class或是id来控制页面的分栏结构,或是标识使用者目前所在的页面。
使用标准,模块化开发网站有何好处?这些不过只是简单的例子而已,通过<body>标签的一个属性,就能改变整个页面(甚至是网站)的布局,设计与样式。