斜角处理比较麻烦，主要有两个地方。
1、图片处理。
2、负数的理解。
这两个地方一般新手比较不好理解。
以下是所有的CSS 。主要看.tab 部分。
<style>
/*全局处理一下*/
ul{margin:0 0 0 50px;font-size:12px;}
/*tab 基础CSS原形 可扩展*/
.tab li{display:inline;}
.tab a{background: url(test.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(test.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(test.gif) no-repeat left -77px;;color:#000; font-weight:bold}
/*有了原形后，可以控制他的其它样子，例如，显示大一点的，只要多加这一行就行了*/
.big li{line-height:2.0; font-size:14px;}
/*这名没有什么用*/
.info{ border:1px solid #FF9900; clear:both; font-size:12px; padding:10px;}
</style>
/*全局处理一下*/
ul{margin:0 0 0 50px;font-size:12px;}
/*tab 基础CSS原形 可扩展*/
.tab li{display:inline;}
.tab a{background: url(test.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(test.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(test.gif) no-repeat left -77px;;color:#000; font-weight:bold}
/*有了原形后，可以控制他的其它样子，例如，显示大一点的，只要多加这一行就行了*/
.big li{line-height:2.0; font-size:14px;}
/*这名没有什么用*/
.info{ border:1px solid #FF9900; clear:both; font-size:12px; padding:10px;}
</style>
提示：你可以先修改部分代码再运行。
2009/07/04
Firefox下全乱了…………
2008/10/17
这个很漂亮啊