位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 15 为body指定样式（4）

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

作者：zhaozy　来源：3user.com　发布时间：2008-02-21 12:36:00　

标签：样式,标记,css,手册

导航清单

在这个例子中,将借用第一章"技巧延伸"里面提到的迷你分页标签,这边的导航条用了一个单纯的无序清单,里面包含了几个链接,像是这样:

<ul id="minitabs">
  <li><a href="/apples/">Apples</a></li>
  <li><a href="/spaghetti/">Spaghetti</a></li>
  <li><a href="/greenbeans/">Green Beans</a></li>
  <li><a href="/milk/">Milk</a></li>
</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">

以此类推.

第一页上一页 1 2 3

5 下一页

投稿

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

猜你喜欢