程序代码

<style>
/*www.zishu.cn*/
.tab{ border:1px solid #ccc; font-size:12px; line-height:1.0;float:left; }
/*这里有二个比较特别的地方，一是我在这里设了文字大小为12，行高为1.0。这时，每行文字的高度是12PX. */
.tab li{ background:#f5f5f5; float:left; width:150px; height:20px; overflow:hidden; margin-right:10px;}
/*整行高为20*/
.tab li span{ position:absolute; padding:4px 20px 0 20px;}
/*这行中的4PX，是由于整行高为20，文字占了12PX。为了让文字居中所以距上边为4PX.有人说为什么不在.tab里设line-height，是因为不同浏览器解释时会有差别*/

/*这些就没有什么好说的了，自已理解吧*/
.tab li em{ margin-left:180px; background:#FF6633;position:absolute; border:10px solid #f5f5f5; border-left:#f5f5f5; height:0px; overflow:hidden;}
.tab li .left{ margin-left:0; border:10px solid #f5f5f5; border-left:#f5f5f5;}

.tab .on{ background:#00CCFF}
.tab .on em{ background:#FF6633;border-left:10px solid #00CCFF;}
.tab .on .left{border-top:10px solid #00CCFF; border-bottom:10px solid #00CCFF; border-right:10px solid #00CCFF;border-left:10px solid #f5f5f5;}

</style>

程序代码

<ul class="tab">
 <li><em class="left"></em><span>1、选择您所在的城市</span><em></em></li>
 <li class="on"><em class="left"></em><span>2、填写信息内容</span><em></em></li>
 <li><em class="left"></em><span>3、分布成功</span><em></em></li>
</ul>