演示效果截图

用到的图片

CSS代码

<style>
ul{margin:0 0 0 50px;}
.tab li{display:inline;}
.tab a{background: url(u2007823223236.gif) no-repeat;}  
.tab a:link,.tab a:visited{float:left;background-position:right -226px;
text-decoration: none; margin-left:-20px; padding-right:30px;} 
.tab a:link span,.tab a:visited span{display:block;
background: url(u2007823223236.gif) no-repeat left top;
padding:5px 15px 2px 15px; color:#000}   
.tab a:hover,.tab a:active{background-position:right -264px;} 
.tab a:hover span,.tab a:active span{background-position:left -38px;}  
.tab .on a:link,.tab .on a:visited{background-position:right -302px;} 
.tab .on a span,.tab .on a:link span,.tab .on a:visited span{
background: url(u2007823223236.gif) no-repeat left -77px;;color:#000;
 font-weight:bold}
.big li{line-height:2.0; }
.info{ border:1px solid #FF9900; clear:both;  padding:10px;}
</style>

HTML代码

<ul class="tab">
<li class="on"><a href="http://www.865171.cn"><span>首 页</span></a></li>
<li ><a href="http://www.865171.cn"><span>发布信息</span></a></li>
<li ><a href="http://www.865171.cn"><span>www.865171.cn</span></a></li>
<li ><a href="http://www.865171.cn"><span>社 区</span></a></li>
<li ><a href="http://www.865171.cn"><span>帮 助</span></a></li>
<div style="clear:both;"></div>
</ul>
<div class="info"></div>
<br />
<ul class="tab big">
<li class="on"><a href="http://www.865171.cn"><span>首 页</span></a></li>
<li ><a href="http://www.865171.cn"><span>发布信息</span></a></li>
<li ><a href="http://www.865171.cn"><span>www.865171.cn</span></a></li>
<li ><a href="http://www.865171.cn"><span>社 区</span></a></li>
<li ><a href="http://www.865171.cn"><span>帮 助</span></a></li>
</ul>
<div class="info"><h3>www.865171.cn</h3></div>