◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807 进入网络咨询平台 ◆
</ul>
你或许记得我们以CSS为这个清单加上样式,把项目转成水平排列,同时在鼠标移过的时候显示标签.图15-3是浏览器显示的效果.
图15-3 水平导航条,显示标题效果
你或许还记得为了达成 "你在这里" 的效果(将某个链接的标签固定在"选定"状态),而将想要固定的链接加上了class:
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
我们也加了一条CSS规则,为class="active"的链接应用background-image:
#minitabs a.active {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
然而有另一种方法可以完成这个效果,能不动到导航条的标记源代码,但是又能突出使用者目前所在的页面,那就是为"body"标签指定id.
判别组件
首先必须先为导航条的每个<li>标签加上id属性,这只需进行一次,接着这个无序清单可以不经变动直接用在每一页上,甚至能显示"你在这里"的效果.
<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">
上一页 [1] [2] [3] [4] [5] 下一页
 【责编:Luzi】 |
中国IT实验室收集整理 
2008-5-5 
佚名 
相关文章