CSS处理斜角导航条的一个例子

作者:zishu 来源:zishu.cn 时间:2007-08-27 12:38:00 

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>

以下是用的一张图片,我作的有点大了。 

标签:导航,css
0
投稿

猜你喜欢

  • JS 中触发 A 标签的点击事件

    2009-01-11 17:30:00
  • 讲解数据库管理系统必须提供的基本服务

    2009-01-04 14:33:00
  • asp常用的SQL命令操作

    2007-09-29 12:21:00
  • 给Notepad++换主题

    2009-05-04 14:43:00
  • J2EE基础应用:J2EE中SQL语句自动构造方法

    2009-09-18 09:06:00
  • asp如何用FileSystemObject组件来做一个站内搜索?

    2010-06-12 12:47:00
  • SQL Server中索引使用及维护

    2008-11-25 11:13:00
  • 解决方案,而不是功能

    2011-01-30 18:11:00
  • Web脚本开发语言比较

    2007-08-22 17:32:00
  • fso对象CreateTextFile方法调用时“无效的过程调用或参数”错误

    2009-05-26 15:39:00
  • mysql基础教程:安装与操作

    2009-07-30 08:18:00
  • 浅谈MySQL存储引擎选择 InnoDB还是MyISAM

    2009-05-10 20:02:00
  • asp 解析一个xml文件的公用函数集合

    2008-02-29 13:40:00
  • DelphiXE连接MySQL5.1

    2010-12-08 16:44:00
  • Oracle 用户权限管理方法

    2009-08-15 10:54:00
  • QQ连连看 for iPhone 设计实录分享

    2010-09-25 12:54:00
  • 怎样在SQL Server 2005中用证书加密数据

    2009-01-04 14:11:00
  • ASP中一个字符串处理类加强版

    2008-11-25 18:07:00
  • first-letter的一个小妙用

    2010-03-20 21:47:00
  • ASP中生成文本文件的两种方式

    2008-04-30 19:33:00
  • asp之家 网络编程 m.aspxhome.com