（一）今天学习了一下横向导航设计，利用 CSS 布局实现导航与 table 布局有很大区别 ^^
（二）传统的表格式导航制作如下代码，利用 table
简单实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>table方式实现tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table width=”800” height=”24” border=”0 ” cellpadding=”0” cellspacing=”0” bgcolor=”#FFFFFF”>
<tr align=”center”>
<td bgcolor=“#ececec”><a href=“#”>首 页</a></td>
<td bgcolor=“#ececec”><a href=“#”>新 闻</a></td>
<td bgcolor=“#ececec”><a href=“#”>参 考</a></td>
<td bgcolor=“#ececec”><a href=“#”>Blog </a></td>
<td bgcolor=“#ececec”><a href=“#”>论 坛</a></td>
<td bgcolor=“#ececec”><a href=“#”>其 它</a></td>
</tr>
</table>
</body>
</html>
?
?
?
?效果图如下：
?
注意：把边框和边距都设为 0 ，隐藏表格线；设定每个单元格中的文本居中对齐。这样就实现了一个简单的横向导航。（ table 方法的要点是：先设计导航数据表，再将导航内容装入每个单元格中。）
（三）利用 CSS 来设计它。 CSS 就是为了实现表现与内容的分离。
在 html 文件中编写如下代码（上下省略）：
?
<div id=”nav”> <ul > <li><a href=”#” id="current">首 页</a></li> <li><a href=”#”>新 闻</a></li> <li><a href=”#”>参 考</a></li> <li><a href=”#”>Blog</a></li> <li><a href=”#”>论 坛</a></li> <li><a href=”#”>其 它</a></li> </ul> </nav>
?
在 CSS 文件中代码如下（为了方便测验， CSS 代码放到 html 的 head 中即可，详情如下）：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>CSS方式实现tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
#nav li {
float:left;
display:inline;
}
#nav li a{
color:#000000;
text-decoration:none;
paddding-top:4px;
display:block;//使a 变为块状对象，下面就可以对它设定高宽等
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;//鼠标移到频道上出现响应
color:#ffffff;
}
#nav li a #current{
background-color:#2788da;
color:#ffffff;
}
#nav{
height:26px;
border-bottom:2px solid #2788da;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href=”#” id="current">首 页</a></li>
<li><a href=”#”>新 闻</a></li>
<li><a href=”#”>参 考</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>论 坛</a></li>
<li><a href=”#”>其 它</a></li>
</ul>
</div>
</body>
</html>
?
?效果图如下，当鼠标放到导航上时，背景色会变色发生响应。
?
( 四 ) 相比较 table 和 css 的实现， CSS 优势十分明显，代码简洁灵魂，可重用，利于维护。
?
( 五 ) 调整 CSS 代码结合 PS 做背景图片，最终设计的横向导航如下：
（六）导航还有很多设计类型，常见的纵向导航，还有像 javaeye 网站的二层复合式导航结构，还有下拉菜单式 / 弹出式导航，如果有机会，都要亲自一一实现去学习。
1 楼
qwjcool
2008-11-15
加油