网站优化之网站导航栏优化
摘要：提供能够适应任意文字大小或者任意数量内容的网站导航栏，优化网站导航栏也是网站优化的一部分。
上次我们讲了网站优化之网站页面组件的优化，今天xiaoxiao要讲的网站优化之网站导航栏的优化，如果你有这方面的研究，希望可以一起研究。
建立精美的基于图片的选项卡式导航栏，同时加上图片翻转效果。
一般常见的方法是：
每一组选项卡都是单独的一张图片包括了各个选项卡的选中和未选中的不同状态。具体显示哪张图片要由当前所浏览的页面决定。翻转效果增加一些Javascript代码，并预先加载另外一组图片翻转效果就可以实现，但是会增加大量的代码。
从网站优化的角度考虑这种方法的缺点：
1. 堆积如山的代码；
2. 不方便用户使用；
3. 可伸缩性不在，不利于网站的后期维护；
4. 缺少灵活性。
现在我们用网站优化的方法设计，对网站导航栏进行优化：
#nav {
width: 100%;
float: left;
margin: 0;
padding: 10px 0px 0px 46px;
list-style: none;
background: #FFCB2D url(img/nav_bg.gif) repeat-x bottom left; // 允许激活的选项卡把其覆盖，使底边与白色页面的其余部分融为一体。
}
#nav li {
float: left; // 把导航栏弄成水平的
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 55%;
}
#nav a {
float: left;
display: block;
margin: 0px 1px 0px 0px;
padding: 4px 8px ;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9 url(img/off_bg.gif) repeat-x top left;
}
#nav a :hover,body #intro #t-intro a {
color: #333;
padding-bottom: 5px; // 4px->5px 这使选中和悬停状态的选项卡覆盖住背景边框。
border-color: #727377;
background: #FFF url(img/on_bg.gif) repeat-x top left;
}
在html里面的引用代码：
<ul id="nav">
<li id="t-intro"><a href="http://www.seomm.cn">SEO博客</a></li>
<li id="t-about"><a href="http://www.seomm.cn">SEOMM博客</a></li>
<li id="t-news"><a href="http://www.seomm.cn">网站优化</a></li>
