最近我读了一篇文章，这篇文章使我重新考虑了我一直在用的制作“You Are Here”按钮的方法。结果是我现在有两个可行的方法可供选择，在给定的情况下我可以选择使用其中比较容易的那个方法来实现这种按钮。下面让我们来对比一下这两种方法，看看你应该在什么时候使用哪种方法。
背景：我们想要做什么
“You Are Here”按钮是我使用的一个术语，表示一个指向当前页面的按钮或者链接，并且这个按钮或链接表现为不同的样式以帮助访问者确定他们目前在 Web 站点中所处的位置。“You Are Here”一般是导航栏中的一个按钮，但是也有可能是“breadcrumb trail”中的一个链接，或者任何指向当前页面的链接。
“You Are Here”按钮一般具有不同的外观样式，以使其区别于导航栏中的其它按钮。例如，在“You Are Here”按钮上，你可以使用与导航栏中其它按钮的文本及背景颜色相反的颜色，或者使用比其它按钮的阴影更淡的阴影。
为了避免迷惑站点访问者，“You Are Here”按钮应该不能表现为可点击的链接，因为它并不会把访问者带到另外一个页面中。换句话说，“You Are Here”不应该有滚翻效果，并且在把光标放到“You Are Here”按钮上时光标不应该变成小手的形状。
方法一：忽略链接
可能最简单的实现“You Are Here”按钮的方法是赋给包含“You Are Here”按钮文本的 <div> 或 <li> 一个 class 或 ID，然后创建一个样式将适当的格式应用到那个 class 或 ID 上。由 class 或 ID 负责“You Are Here”控制按钮的外观。为了保证“You Are Here”不是可点击的链接，可以移除为那个按钮定义链接的 <a> 标签。
例如，下面是一个我几个月前所写的“You Are Here”按钮示例的标记（markup）。
<divid="menu">
<ul>
<li><ahref="Link1-T1.html">Button 1</a></li>
<li class="youarehere">Button2</li>
<li><ahref="Link3-T1.html">Button 3</a></li>
</ul>
</div>
下面是使前面的代码能够产生期望的效果所用的 CSS 代码。
div#menu{
height: auto;
width: 150px;
color: #FFFFFF;
}
#menu li {
height: 40px;
width: 125px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 250%;
list-style-type: none;
background-color: #003399;
border: 1px solid #000000;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
font-weight: normal;
color: #FFFFFF;
}
#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
#menu li.youarehere {
color: #000099;
background-color: #66CCFF;
}
注意，.youarehere类（class）被应用到标记中的 <li> 标签，而且“You Are Here”按钮（button 2）没有包含定义超链接的 <a> 标签。结果是虽然它具有按钮的外形，但是却不是一个可点击的链接。相反，它只是当前页面中导航按钮栏中的一个摆设。
CSS 代码中的#menuli.youarehere样式定义“You Are Here”按钮的文本及背景颜色。按钮尺寸、边框以及其它格式都来自于 #menuli样式。
对于基于无序列表的导航栏，以及具有标签而又不是 <a> 标签的类似情况，这种方法效果相当好。
打印文档
推荐好友 
返回顶部
增大字体 
减少字体