演示效果截图

用到的图片

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>