横向导航学习
（一）今天学习了一下横向导航设计，利用 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网站的二层复合式导航结构，还有下拉菜单式/弹出式导航，如果有机会，都要亲自一一实现去学习。
加油