[翻译]标记语言和样式手册 Chapter 1 清单（6）

导航清单

在我的个人网站(www.simplebits.com)里我分享了几种将无序清单转化为水平导航条的方法,用普通的,结构化的XHTML就像我们的食品清单示例那样创造一个类似分页标签(Tab)的效果.

我们把那个食品清单转换成一个网上超市的导航条(这个超市只卖几种东西就是了...).

我们想要这个导航条以水平的方式呈现,并且能够在鼠标划过,选中时有某种强调显示,以便我们模拟分页标签的效果.

首先,我们为清单加上一个id,这样我们就可以为它单独定义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:

#minitabs{
margin:0;
padding:0 0 20px 10px;
border-bottom:1px solid #696;
}
#minitabs li{
margin:0;
padding:0;
display:inline;
list-style:none;
}

在这里我们已经完成了去掉默认圆点符号和行内缩进的工作,我们也把 display设置成inline,往垂直清单转化成水平清单迈出了第一步,同时我们也加上了底部边框以便区分出整个链接组.

把清单转化成水平导航条的第二步,是将我们的链接全部浮动到左边显示,我们同样为所有的超链接加上简单的样式:定义外边距和内补丁的大小:

#minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #696;
  }
#minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
#minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  margin: 0 10px 4px 10px;
  text-decoration: none;
  color: #9c9;
  }

在这里我们将清单中所有的元素都定义float:left,是为了让他们能水平显示排列于一行之内,同时我们也加上了了一些色彩,把链接改成粗体,拿掉了链接底部的下划线.

然后,为鼠标滑过或选中的链接创建一个模拟分页标签的边线:

#minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #696;
  }
#minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
#minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  margin: 0 10px 4px 10px;
  text-decoration: none;
  color: #9c9;
  }
#minitabs a.active, #minitabs a:hover {
  border-bottom: 4px solid #696;
  padding-bottom: 2px;
  color: #363;
  }
#minitabs a:hover {
  color: #696;
  }

为了强调链接,我们在鼠标划过或选中时增加一个4像素高的底边,我们也可以使选中的<a>标签保持强调效果,只要加上class="active":

<li><a href="/spaghetti/" class="active">spaghetti</a></li>

这个 active类别与 a:hover的共用相同的css样式.(图 1 - 7)

图1 - 7

我在自己的网站(www.simlpebits.com)以及2003年7月重构Inc.com(www.inc.com)里面都用到了这个技巧.如果你需要更多的示例代码,可以自由访问这两个网站并查看他们的源代码.

只需要加上一些内补丁和边框,就可以达到各种类似分页标签的效果了,到目前为止,我们甚至连一张图,一句javascript都没有使用,而仅仅只用到了基本的xhtml结构就构成了我们的食品清单,这实在是太棒了!