使用CSS开发时髦的导航栏（四）
翻译: 如何用CSS创建按钮类型的导航栏？
看上去像是可以点击的按钮组成的导航栏是很多网站的一个特色。这种类型的导航栏常常靠模拟成按钮样子的图片来创建，通常还需要一些Javascript脚本来切换到另一张图片，这样可以模拟按钮被按下或者鼠标在上面高亮显示的效果。
只用CSS有可能创造这样类似按钮的导航栏吗？当然！
解决方案
使用CSS创建一个象图10显示的按钮效果是可能的，并且比较简单。这个效果的成功与否取决于你对于CSS里面border属性的使用能力。
图10：按钮效果的导航栏
这是你需要的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_button.css"
/>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
font-size:90%
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
讨论
为了创建这个效果，我们将使用在“如何用CSS创建按钮类型的导航栏？”章节中描述的水平列表导航栏。与之不同的是，为了创建按钮外观，我们将在每个按钮的上边和左边使用不同于下边和右边的颜色边框。通过给上边和左边赋值比下边及右边的边框亮一些的颜色，我们创建了一个略微突起的效果。
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
在鼠标停留在上面的状态下，我们反转边框的颜色，这样就创造了按钮被按下的效果。
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
试着使用更深的边框，改变链接的背景图片，去创造属于你自己的设计。
