使用CSS开发时髦的导航栏（五）
译者: 如何CSS替换基于图片的导航栏
创建一张图片做为导航“按钮”依然是开发站点导航栏的通常做法。这张图片上通常还包括每个导航指向项目的文字说明。用图片做导航按钮会带来很多问题：
l 每次增加一个新的导航项目的时候，我们必须先制作一张新图片。如果这个时候你发现你不小心丢失了制作导航按钮的原始Photoshop文件，你必须重头开始制作整个导航栏图片。
l 假如要求你的页面导航栏内容是基于数据库内容动态生成的。那么就算你能飞快的制作新图片，你也需要有人去写很多代码把图片放到每个页面。那些关闭浏览器图像显示的用户，或者那些使用文本阅读器设备的用户将无法读到你在图片上的文字。
l 为了显示效果会有多组图片，这个会延长页面的载入时间。
解决方案
（注意：最好用list –
我在下面的例子中使用了表格，这样做只是希望在你想最小代价修改一个老站点时候对你有帮助。如果你是从头开始创建导航栏的话，你应该把你的导航栏项目设置为无序的列表-就象我们在前面的“如何把一个结构化的列表样式化为导航栏菜单？”中讨论的那样。）
老式的导航栏通常采用布局表格和图片构成。你可以采用CSS格式化的文字来替换这种基于图片的导航栏。
下面的CSS和HTML通过格式化表格的单元和里面的链接创建了一个简单的导航菜单。
HTML文件清单
<!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>Replace images</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="replaceimages.css" />
</head>
<body>
<table id="navigation">
<tr>
<td>
<a href="#">Recipes</a>
</td>
</tr>
<tr>
<td>
<a href="#">Contact Us</a>
</td>
</tr>
<tr>
<td>
<a href="#">Articles</a>
</td>
</tr>
<tr>
<td>
<a href="#">Buy Online</a>
</td>
</tr>
</table>
</body>
</html>
CSS文件清单
#navigation {
width: 180px;
padding: 0;
margin: 0;
border-collapse: collapse;
}
#navigation td {
border-bottom: 2px solid #460016;
background-color: #FFDFEA;
color: #460016;
}
#navigation a:link, #navigation a:visited {
display: block;
margin: 0.4em 0 0.4em 1em;
color: #460016;
background-color: transparent;
font-size: 90%;
text-decoration: none;
font-weight: bold;
}
* html #navigation a {
width: 100%;
}
这个技术对于维护已经存在的站点有两个好处：其一可以让你以后增加新的导航菜单项目的时候不再需要添加图片，其二可以减少页面载入时间。
讨论
CSS可以通过简单的样式化纯文本来创建迷人的导航系统。下图演示的是通过在表格单元中插入图片来构造菜单-这个基本上是创建站点菜单的最普通做法。
下面是关于这个表格的HTML文件
<table width="180" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"><img src="images/nav1.gif" width="180"
height="28" alt="Recipes" border="0" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="images/nav2.gif" width="180"
height="28" alt="Contact Us" border="0" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="images/nav3.gif" width="180"
height="28" alt="Articles" border="0" /></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="images/nav4.gif" width="180"
height="28" alt="Buy Online" border="0" /></a>
</td>
</tr>
</table>
下面我们去除图片，用文本来代替每个导航项目，我们立刻让我们的代码变少、页面可读性增强。然而，纯文本没有漂亮的外观，我们可以看下图：
我们可以用CSS在不用图片的情况下去重构菜单外观。首先，让我们给导航表格一个ID-这主要为了让我们可以在HTML中定位这个表格，然后在表格中创建CSS选择器。接着我们为这个ID对应的表格创建一些样式规则，它可以使得我们从<table>标签中删掉很多属性定义：
<table id="navigation">
控制表格外观的CSS如下：
#navigation {
width: 180px;
padding: 0;
margin: 0;
border-collapse: collapse;
}
设置border-collapse属性为collapse使得表格单元连在一起，只在单元之间留下一个单边。缺省情况下，每个表格单元都有自己的边框，同时在单元格之间有多余的空间。
现在我们需要样式化表格的td元素，我们希望给单元格设置背景色，并且给每个单元格增加底边：
#navigation td {
border-bottom: 2px solid #460016;
background-color: #FFDFEA;
color: #460016;
}
现在看上去已经很像样子了，见下图：
现在我们必须对表格单元中的链接创建CSS。我们需要设置一些padding去增加文本相对于单元边界的距离，我们还必须定义字体的颜色、尺寸、字符集，同时我们还想移除链接下面的下划线：
#navigation a:link, #navigation a:visited {
display:block;
padding: 0.4em 0 0.4em 1em;
color: #460016;
background-color: transparent;
font-size: 90%;
text-decoration: none;
font-weight: bold;
}
下图就是我们的最终效果：
豆猫 童生
用ul来构建菜单，代码更加简单，效果是一样的
09/25/2007
子非鱼 榜眼 | Blog
楼上的说得没错，这个系列的第一篇就是使用ul的方法，这个小节是为了说明怎么样在不修改table实现方式的情况下，有限制的使用css来减少图片使用
09/25/2007