2.5　其他示例

为了把本章的思想进一步拓展，我们想举一些其他的示例。它们采用了不同的设计方法，但也拥有和我们所构造的选项卡同样的灵活性。

2.5.1　MOZILLA.ORG

www.mozilla.org

mozilla.org 最近的一次重构中引入了圆角选项卡导航栏，它可以容纳任何大小的文 字和任何数量的文本内容。( 见图 2 - 1 6 ) 。

图 2-16 　可以轻松地通过滑动门技术来实现圆角，如同这里的 Mozilla.org 所示

Mozilla 网站的开发小组使用了由 Douglas Bowman 发明的“滑动门(sliding Doors)技术”(www.alistapart.com/articles/slidingdoors/)。Bowman想出了一种聪明 的方法，它使用了两张背景图片，当其中的内容增加时，图片也相应地分离。通过 使用两张独立的图片，圆角和其他非矩形的成分都能够沿选项卡和其他容器边界对齐—— 与此同时，仍然保持灵活性和适应性。

2.5.2　斜杠

www.simplebits.com/bits/bulletproof_slants.html

具有灵活性的的斜杠分割式导航栏源于一个客户的项目。它仅仅需要一张背景图 片，由其中的文字大小决定斜杠的长短。见图 2 - 1 7 。

图 2 -1 7 　无论其中的文本是什么，用一个比实际所需更大的背景图片便可使设计效果保持完好

通过设置一个大于原本所需尺寸(在默认字号时)的斜杠图片作为背景图，我们便可确保斜杠会随着字号的增加而延长。见图 2 - 1 8 。

图 2 -1 8 　这是斜杠的特写，显示出的长度由实际文本数量决定

2.5.3　ESPN.COM 的搜索栏

www.espn.com

这组用于转换 ESPN.com 的搜索滤器的选项卡制作方法与本章的例子颇为相似。用带有渐变淡出效果的大图片作为背景，图片会随着文字的增大而显示出更多部分。图2-19 是在两种不同大小的文字下选项卡的显示效果。

图 2-19　ESPN 搜索栏的选项卡会随着文本大小和长度的改变而改变

现在解释这是如何实现的。我们打算拿未选中状态的选项卡作为例子，在它的背

景图片的上方和左侧各有一条 1 像素的高亮小细条。因为高亮的效果仅仅显示在两边 上，所以可以使用 1 张图片作为背景，使其足够大，并可容纳大号字体的文本。

图 2-20 显示的是默认文本大小下的选项卡，只有背景图片的左上区域被显示了出

来。而图 2-21 则是文本放大后的选项卡，背景图片被显示出的区域也相应增大了。通 过巧妙地把图片定位在<a>元素的左上角，无论其中的文字大小如何变化，我们都能实 现高亮和渐变的效果。

图 2 -2 0 　显示了默认文本大小下的选项卡，只有背景图片的左上区域被显示了出来

图 2 - 2 1 　随着文本大小的增大，背景图片被显示出的区域也增大了然而仍然保持了上方和左侧细小的高亮效果

确保一个灵活的宽度是设计这类选项卡的关键，因为搜索结果的数量将会显示在选项卡文字标识的旁边(括号里的数字即是)。由于结果数字的长度是变化的，因此选项卡 需要有自己可延伸的空间，实时地扩大或缩小，保持设计样式不变。