CSS处理斜角导航条的一个例子
作者：zishu 来源：zishu.cn 发布时间：2007-08-27 12:38:00
标签：导航,css
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>
以下是用的一张图片，我作的有点大了。 
0
投稿猜你喜欢
- 很久之前就对jQuery.animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的
- 五、XML带来的好处 （1）更有意义的搜索 数据可被XML唯一的标识。没有XML，搜索软件必须了解每个数据库是如何构建的。这实际上是不可能的
以前的Dreamweaver中是没有图片处理功能的，即使你要处理也只能使用CSS中的相关滤镜进行一些效- 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，
- show tables或show tables from database_name;解释：显示当前数据库中所有表的名称show datab
- mssql 的正式名字是 SQL Server MS公司出的。图形操作界面好一些，性能还可以。在在mssql和oracle上不能互换.支持O
- 教育信息化时代，考试成绩也要求上网公布。一次我将考试成绩制作成一个HTML文件，如图1所示，领导审查的意见是“将成绩按名次排列”，可是所有的
- BIT[(M)]位字段类型。M表示每个值的位数，范围为从1到64。如果M被省略， 默认为1。TINYINT[(M)] [UNSIGNED]
- rss的优点 1.您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻。 2.您可以把需要的信息从不需要的信息（兜售信息，垃圾邮件等）中分离
- 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中
- ADO对象： Connection Command Recordset Record Stream ASP支持的对象很多，可以自己编写COM
- 新上的一台服务器出现了一个现象：ASP程序中，调用函数Now()，显示的时间总是形如“2009-07-12 上午 08:12:56”这样的，
- 当我们的文章表中没有对于文章的评论数字段时，我们该这么写sql语句来显示出评论最多的文章呢？下面本站给大家收集了几种方法，仅供参考：1.se
- 当浏览者进入你的网站首页时或提交某些表单时，会弹出网站声明或提交说明等文本信息框，引导浏览者使用你的网站。实现这个功能我们是用Dreamwe
- 网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：<html> &
- ASP与MySQL的连接ASP和MySQL连接目前有两种方法：一种方法是使用MySQLX之类的组件，不过这种连接方法需要支付一定的费用；另外
- JavaScript 循环中，i++ 与 i– 那个比较快？相信有不少朋友看过相关的讨论文章，比如这篇。文章解释了开启优化选项后，i– 的
- px比em更加容易使用,em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px，所以10px=0.
- 1函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数，这些函数都可被称为SQL或PL/SQL语句，函数
- 网站可用性是任何网站的基本要素，而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航，那么网站内容就
