演示和代码
经常访问我网站的朋友一定注意到我更新了网站的导航条。上次的更新是在去年十月份，具体的介绍请看这篇文章日志模板更新。虽然上次更新的时候觉得旧款的导航条还挺漂亮的，但是时间一长我就开始厌烦了。特别是两个星期前，我在网上看到这款苹果风格的面包屑导航条，就深深地爱上了它。今天终于有空把它搬到了自己的网站上。
总的来讲，这款导航条还是比较容易整合到网站上。主要碰到的问题还是浏览器的兼容性问题。原创的版本在IE6下根本是不能用的，可是在访问我网站的朋友里，大约有三分之一还在使用IE6，因此就算我不情愿，我也要把它修改成和IE6兼容。其实在这次IE6下最大的问题是：原创版本用PNG做背景，所以在IE6下原本透明的PNG背景被加上了一层淡淡的蓝色。关于IE6的PNG不透明问题在网上讨论的很多，我尝试过其中一种使用javascript的解决方法，但是效果很差，因此我干脆使用photshop把PNG转换成GIF，虽然转换后的背景图边缘不如PNG的平滑，但是整体效果还行，基本上看不出有什么区别。另外一个问题：在IE6/IE7浏览器里中文导航字在垂直方向不会居中，我没有找到更好的办法，只好给IE特别写了一行CSS样式代码。此外，我还加入了搜索栏，但是碰到类似问题：搜索栏在IE6下垂直方向不居中，因此又给IE6写了一行CSS。最终的效果图如上，如果你非常挑剔，那么你可能还注意到，那个搜索图标在垂直方向稍微有点偏上，这回是Firefox的问题了，它在IE里显示正常。不管了，总之我已经挺满意。希望这回不要过早的喜新厌旧。:-) 下面要介绍如何制作这款导航条。
1.HTML代码：
<ul id="breadcrumb">
<li><a href="/"><img src="home_blk.gif" alt="Home" class="home" /></a></li>
<li><a href="/blog" class="chinese">博客</a></li>
<li><a href="/blog/categories" class="chinese">日志分类</a></li>
<li><a href="/blog/categories/jquery.html">jQuery</a></li>
<li><a href="http://feed.feedsky.com/61dev" target="_blank" title="订阅本日志"><img src="rss.gif" alt="订阅本日志" class="home" /></a></li>
<li>Search Result</li>
<li style="float:right;">
<form action="http://www.61dh.com/search" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-8060693734982386:qvg7d0-myh2" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input class="srch" src="search.gif" type="image">
</div>
</form>
<script type="text/javascript" src="http://www.google.cn/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
上面的HTML代码没什么特别之处，只是些HTML列表(list)而已。值得注意的是: 当列表内容是图片，使用了CLASS ('home')；当列表内容是中文，使用CLASS ('chinese')。此外，因为搜索栏是靠右的，所以其列表使用了CSS 'float:right'。
2. CSS代码
<style type="text/css">
body{font: 12px Arial, Helvetica, sans-serif;}
h1{font-size:22px;}
#breadcrumb{
background-image:url('bc_bg.gif');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a{
height:30px;
display:inline;
float:left;
background-image:url('bc_separator.gif');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
#breadcrumb a:hover{color:#35acc5;}
.home{border:none;margin: 8px 0px;}
.srch{display:inline; padding:5px 10px 0 0;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.srch{display:inline; padding:7px 10px 0 0;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
.chinese{ margin-top:2px;}
</style>
<![endif]-->
在原版的CSS上，我给#breadcrumb a, 加入了float:left，这解决了导航条在IE6下的显示问题，另外使用GIF替代PNG，还有一些小调整。最后要提醒注意的是：我给IE6和IE专门定制了CSS，用来解决本文开头提到的浏览器兼容问题。
演示和代码
标签： CSS, HTML, 博客
