CSS处理斜角导航条的一个例子，这个是写着测试用的。暂没有实际的应用。
斜角处理比较麻烦，主要有两个地方。
1、图片处理。
2、负数的理解。
这两个地方一般新手比较不好理解。
我在写个例子的时候，特地把文字的大小等写在外边，当然没有加细去考虑，有些东西写在.tab 的外边是为了能让.tab 作一个TAB的原形，这样，以后可扩展。
我在下边多写了一行，算了扩展的一个例子吧，当然扩展不会这样简单。
以下是所有的CSS 。主要看.tab 部分。 这里边对IE6、7、FIREFOX没有作特殊处理，为了兼容性我多写了二行。
程序代码
<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>
运行一下，看一看效果吧！
点击下面的运行，可预览代码效果
代码如下：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
