最近评论
正在载入评论列表...
2.3 无懈可击的方法
由于传统的设计基于图片的导航栏的技术存在这样那样的不足，我们决定以
LanceArmstrong.com 的选项卡设计方案为例，用简洁且基于标准的 CSS 方法来对其进行 重构。目标就是改掉前文中提到的传统方法中的不足。
对于任何一个理想的项目，我们首先需要决定如何才能使它所用到的HTML代码尽 可能的有意义以及可存储。就导航栏而言，应该使用列表，即包含一组链接的列表。
<ul id="nav">
<li id="t-intro"><a href="/">Introduction</a></li>
<li id="t-about"><a href="about.html">About Lance</a></li>
<li id="t-news"><a href="news.html">News & Events</a></li>
<li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul>
一个简单的无序列表正是我们想要的，可以用它来构建一组完美的选项卡。简易 的HTML代码将确保页面组件在不同的浏览器、浏览设备和辅助软件中都有极高的可读 性，这一切都归功于它的小巧与紧凑。与传统的基于嵌套表格的方法所需要的大堆代 码相比，两者之间的差别显而易见。
请注意，每一个列表项都设有惟一的 id 。稍后，当我们为了表示哪一个页面正 在被浏览而赋予选项卡一个选中状态时，这些 i d 就会帮我们大忙了。
2.3.1 无样式
尚未特别设定样式的，默认外观下的无序列表通常是竖状显示，并且在每一项的 左侧都有项目符号。对于不支持 CSS 的浏览设备或者文本浏览器，它们也能毫无问题 地呈现出这个导航列表。
图 2-4 这就是未经装饰的原始无序列表
在这里使用列表还有另外一个优势，许多屏幕阅读软件都会大声地读出列表项的个数。这使浏览者可以很清楚地了解页面上的内容。比如，对于使用著名屏幕阅读软件 JAWS(由 Freedom Scientific 出品)的用户来说，他们就可以在听完此列表项的个数后直 接跳到下一个列表或下一个页面对象上。(想进一步了解JAWS在网页中是如何导航的， 可参见 www.freedomscientific.com/fs_products/Surfs_Up/ Navigating.htm)。
2.3.2 两张小图片
回忆一下前面所提到的通常做法，整组选项卡都在一张图片上—— 事实上，一共 有四张图片，分别表示每一个选项卡被选中的状态。为了简化这种情形，我们打算只 用两张小图片，在每一个选项卡中横向平铺。因为它们会重复铺开，所以不必担心每 一个选项卡的宽度和高度—— 这一点很重要，稍后会加以阐述。
如果回过去再看看原来的选项卡，就会发现渐变淡出效果的颜色从选项卡的顶部开 始，逐渐往下融入到背景色中。使用一个大家所熟悉的图片编辑软件，Adobe Photoshop， 我们做好了两张图片(一个代表选中状态，一个代表未选中状态)，用它们重现颜色渐变 淡出最后成为透明的效果。我们把每张图片的底部都设成了透明。一会儿，将用 CSS 来填充这部分透明区域。见图 2 - 5 。
图 2 - 5 这是那两张图片的放大特写。我们将把它们平铺于每一个选项卡下，形成颜色渐变淡出 的效果。每一张图片下面部分的颜色都是透明的(图中的棋盘格子状区域)，稍后将用 C SS为其填充颜色
可以看到，每张图片只有 1 0 像素宽，顶部也都有 1 像素高的高亮区域，颜色往
下渐变淡出，融入到透明的背景中。
2.3.3 应用样式
配料已经全了！现在只需使用CSS把无序列表和两张用于平铺背景的图片组合在一 起就可以了。
第一步，添加一些 C S S 使导航列表不再是默认的竖排，而变成水平排列：
#nav {
width: 100%;
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D;
}
#nav li { float: left; margin: 0; padding: 0;
font-family: ¡°Lucida Grande", sans-serif;
font-size: 55%;
}
使用 float 属性把导航栏拽成水平。这里还声明了黄色的背景色，选项卡将位于 该背景色之上。这个黄色的背景很重要，它将确保整个系统(黄色的外围容器和选项卡) 是可伸缩的。
我们还把默认的 margin(页边距)和 padding 设为零，并设定了字体，font-size 也设为了默认文字大小的 55%。这里在<body>中设定了页面的基准文字大小值 small。 这样 IE/Win 的用户也可以自如地调整这个选项卡的文字大小，所以“今晚我们可以睡 个好觉了 ”。
图 2-6 展示了目前为止整个导航栏部分的外观。
图 2-6 设计初期的导航栏还显得有些凌乱
嗯，我知道，革命尚未成功。不过只要再加上几条 C SS 声明，我们就可以高唱 胜利的凯歌了。
2.3.4 用浮动来解决
因为浮动的<li>把原来文档的自然顺序打乱了，无法撑开外围那个定义了背景色的<ul>，所以这是我们首先需要处理的问题。换句话说，因为内部对象被浮动了，所 以使得外围的<ul>无法确定自身的高度。
为了修正这个问题，我们需要同样把<ul>也设置为浮动的。这块空间便能被各项<li>填充了。黄色的背景也显露了出来(图 2-7)。
图 2 -7 通过把<u l>与列表项同样设置为浮动的，背景又显示出来了
#nav {
float: left; width: 100%; margin: 0;
padding: 10px 0 0 46px; list-style: none; background: #FFCB2D;
}
#nav li { float: left; margin: 0; padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 55%;
}
因为将 #nav 设置为浮动的，所以必须确保没有其他对象紧跟其后。例如，如 果有一个对象紧跟在它后面，可能是块状或横行形式的内容，那么这部分内容 需要被设置 clear:left 规则以保证它将位 于导航栏的下方。
现在看起来好多了，我们能确保无论导航栏的尺寸如何变化，黄色的背景都将 布满整个内容区域，有效地保护了这部分 的设计效果。这种通过浮动来修正显示问 题的方法也免去了添加额外的外围<div> 去弥补失去的背景色的麻烦，它同样还省 去了设置列表的高度，尽可能地达到最大 的灵活性 。
2.3.5 为选项卡定形
下一步，我们要给链接增加几条定义：p a d d i ng 、b o r d e r 和背景色。
#nav a {
float: left; display: block; margin: 0 1px 0 0; padding: 4px 8px; color: #333;
text-decoration: none; border: 1px solid #9B8748; border-bottom: none; background: #F9E9A9;
}
通过把<a>设置为 display: block；以使整个选项卡都可以被点击。块级对象 总是独占一整行，所以我们必须使用 float 属性使他们再次处于同一行。
我们把每个选项卡用 1 像素的右侧空白隔开，每个链接也都设定了 padding，文字 颜色和文本修饰(下划线) 也都作了修改。每一个链接除了底边以外都设置了边框。给<a>设置 padding 也很重要，它可使整个选项卡都是可点击的，而不是仅仅只有文字链 接才可以点击。
令人惊讶的是，仅仅通过我们刚添加的这么几条 CSS 规则，选项卡的形状便显现 了出来( 图 2 - 8 ) 。
图 2 -8 通过给<a>设置 padd in g，整个的按钮区域都是可点击的，为用户操作提供了方便
2.3.6 对齐背景图片
下一步，将引入我们先前制作的图片，把它们设置为背景，平铺于每个选项卡上。
#nav a {
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none; border: 1px solid #9B8748; border-bottom: none;
background: #F9E9A9 url(img/off_bg.gif) repeat-x top left;
}
我们在背景的设置中使用了 CSS 简写，在一条规则中同时声明了颜色和图片两项， 颜色(#F9E9A9)将透过图片的透明区域显示出来。图片的下面部分已由我们用Photoshop 处理成为透明的，此时设置的背景颜色就显示成了这片区域的颜色。
我们把图片横向平铺(repeat-x 的作用)于选项卡的顶部(图 2-9)。图片垂直方向上 没有达到的区域(包括透明部分)则显示背景色。
图 2 - 9 通过横向平铺背景图片，加上了高亮和渐变效果。因为图片会重复平铺， 所以任何宽度 / 高都不会影响到设计效果
我们剩下要去做的事是增加悬停和选中状态的声明(我们把这两部分合在了一起)。但是首先，要在选项卡底部增加一个实线边框，当选项卡被选中时，底边便消失，使 选项卡与其下的白色页面融为一体。
当希望边框重叠的时候，可以使用一个小的平铺图片，让它的高度等于边框的高 度，这是我认为处理这种情况最简单且最成功的方法！这就是我们引入的第三张图片， 然而，它是那么的小，以至于可以忽略不计( 图 2 - 1 0 ) 。
图 2 - 1 0 把这张 1 个像素高的图片作为选项卡的底边，允许激活的选项卡把其覆盖使其底边与白色页面的其余部分融为一体
这张 1 × 37 像素的 GIF 图片将沿选项卡的底边平铺。因为我们是把它横向平铺，所以它 的宽度没有限制。我自己其实也记不清楚为什么会把这张图片的宽度设置为奇怪的 37 像素。 图 2-11 显示的是目前为止导航栏的各个成 分的层叠顺序，依次是背景色、1 像素的平铺 边框和选项卡内容。它们构成了整个设计方案。
通过增加用于平铺的背景图片的尺寸，能够改善IE/Win的渲染速 度，当使用的平铺图片太小，有时 会导致渲染的滞缓。
图 2 -1 1 一个 3 D 视图，展示了平铺背景图片是如何放置并构成导航栏底边的
2.3.7 增加底边
那么，我们现在来为前面的 #nav 声明增加代码以引入背景小图片：
#nav {
float: left; width: 100%; margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D url(img/nav_bg.gif) repeat-x bottom left;
}
我们把图片横向平铺并对齐于底边。因为图片只有 1 个像素高，所以声明过的黄 色背景色(#FFCB2D)将显示在导航栏区域的其他部分。
图 2 -1 2 将底边用平铺背景图实现后，我们的工作接近终点了
2.3.8 悬停变换
对于悬停和选中状态，我们将复制在 LanceArmstrong.com 上使用的灰色选项卡的颜 色，只需更换我们所设置的默认米色背景图片即可。完成所有这些事情只需要一个简 单的声明：
#nav a:hover, body#intro #t-intro a {
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(img/on_bg.gif) repeat-x top left;
}
注意一点，我们已经加深了文字和边框的颜色，并采用了将渐变为白色(#fff)的 灰色背景。我们还给底部的 padding 增加了 1 像素(从 4 像素增为 5 像素) 。这额外的 1 像素将迫使选中和悬停状态的选项卡覆盖住背景边框(它同样也为 1 像素高)，使其看上 去和下面的页面连成一片(图 2-13)。
图 2-1 3 通过把激活的选项卡的底部 paddin g 从 4px 增加到 5px， 我们就可以把底边覆盖，产生一种选项卡前置的效果
2.3.9 选中状态
选项卡怎么才能知道它何时被选中呢？这就是我们添加子选择符的目的：
#tabs a:hover, body#intro #t-intro a
子选择符的功能是基于父对象来选取某个特定对象。通过指定由空格来分开的各个 对象，我们可以顺着文档树的顺序缩小目标范围。想了解更多关于选择符的内容，请 参见：www.w3.org/TR/REC-CSS2/selector.html。
所以，如果为<body>增加一个 id，名为 intro，如下：
<body id="intro">
然后，这个声明将会被解释为“在<body>的 id 为 intro 的页面中，使用替换 的背景和加深的颜色”。这是在大多数导航栏设计方案中使用 CSS 来实现“Y ou a r e here”效果的一种简便方法。在这个例子中，我们把悬停和选中两种选项卡变化效果 合并在一条 CS S 声明中。
