锦上添花,为博客加上漂亮的顶部工具导航条

　　为博客添加一个顶部工具导航条，感觉还不错。不仅可以显得更加友善、方便，还可以增加美观。只要简单的CSS+DIV就可以实现，代码也简洁，添加方便。只要把CSS复制到后台->设置->通过CSS定制页面风格中，把HTML代码复制到后台->设置->页首Html代码中。保存即可!我的顶部导航代码，只需要简单修改即可使用。

本文地址： http://www.cnblogs.com/atree/archive/2010/04/23/top-toolbar.html

　　CSS代码如下：　　

body 
{
	background-image: url(nothing.txt); /*无需有这个文件*/
	background-attachment: fixed; 
	margin:0px;
	padding:0px;
}

#topNavWrapper {
	width: 100%;
	text-align: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#topNav {
	width: 100%;
	float: left;
	display: block;
	height: 29px;
	line-height:29px;
	background-image: url(http://images.cnblogs.com/cnblogs_com/ATree/240749/r_bg_toolbar.png);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	z-index: 100;
	overflow: visible;
	padding: 0 0 0 0;
	position: fixed;
	_position: absolute;/*for IE6*/
	color: #000000;
	top:0px; /*保持在顶部*/
}
#topNav a:link,
#topNav a:visited,
#topNav a:hover,
#topNav a:active {
	height: 28px;
	line-height: 28px;
	text-decoration: underline;
}

#topNavWrapper ul
{
	margin:0px;
	padding:0px 20px;
	list-style:none;
	float:left;
}

#topNav li
{
	float:left;
	margin-left:0px;
	padding:0;
	line-height:28px;
	list-style:none;
	vertical-align:middle;
}

#topNav img
{
	border:0px;
	width:50px;
	height:16px;
	margin-top:7px;
	_margin-top:4px;
}
#topNav #ad
{
	margin-top:2px;
	_margin-top:5px;
}

HTML代码如下：

    <div id="topWrapper">
        <ul id="topNav">
            <li style="color:Red;">【<a href="http://www.cnblogs.com/ATree/" title="C#,ASP.NET技术学习交流分享的博客"><strong>一棵树</strong></a>】欢迎你！ | </li>
             <li>速度太慢，访问<a href="http://feeds.feedburner.com/cnatree" title="一棵树精简版"><strong>精简版</strong></a></li> | 
             <li><a href="http://feeds.feedburner.com/cnatree" title="一棵树RSS订阅"><img src="http://blog.csdn.net/images/feedsky.gif" alt="一棵树RSS订阅" /></a></li>
             <li>  <strong>热门标签：</strong> <a href="http://www.cnblogs.com/ATree/tag/C%23/" title="C#">C#</a> 
                <a href="http://www.cnblogs.com/ATree/tag/破解/" title="破解">破解</a> 
                <a href="http://www.cnblogs.com/ATree/tag/SEO优化/" title="SEO优化">SEO优化</a>

　　　　 　</li>
             <li id="ad">
<script type="text/javascript"><!--
google_ad_client = "pub-2694187557661900";
/* 468x15, 创建于 09-5-10 */
google_ad_slot = "5680001618";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
            </li>
        </ul>
    </div>

　　纯CSS避免了JS在滚动网页时的晃动，感觉比较好。就是IE下面不能浮在顶部，Firefox下显示正常。一直都没有找到好的解决办法。希望能有高手提供好的解决方法。

演示：见本博客顶部。

转载于:https://www.cnblogs.com/atree/archive/2010/04/23/top-toolbar.html