迷你分页标签的外观


如果你想要和平常的,方方正正的css边框不太一样的效果的话,只需要作出一点点小修改,我们就可以使用图片来创建有趣的导航条了.

我们使用和之前完全一样的无序清单,以及十分类似的css:

#minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #9FB1BC;
  }
#minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
#minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  padding: 0 12px 6px 12px;
  text-decoration: none;
  color: #708491;
  }
#minitabs a.active, #minitabs a:hover {
  color: #000;
  background: url(tab_pyra.gif) no-repeat bottom center;
  }

这段css大概看起来和上一个示例中的几乎一样,最主要的区别在我们用 background-image 定义了在鼠标划过或选中的时候显示在链接底部中间的图片来代替了原本的4个像素高的底部边框.(图 1 - 8)

图 1 - 8: 使用背景图的迷你分页标签导航

这里的技巧在于选择一个足够窄的图片,必须能够塞进最短的导航条项目下,这样一来我们只需要一张图片来强调导航链接而不必为各种不同宽度准备不同的图片,当然,在你自己的项目中,你可以选择各种图片使用(图 1 - 9):

图 1 - 9: 使用其他图片的例子

这些迷你分页标签的源码和示例都可以在www.simplebits.com/tips/ 找到,更多的为清单添加样式的方法可以参考 Mark Newhouse在A List Apart杂志上发表的"Taming Lists"的文章(www.alistpart.com/stories/taminglists/)

接着阅读：Chapter 2 标题