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
投稿

猜你喜欢

  • python-httpx的使用及说明

    2022-11-22 15:35:18
  • JS数组方法concat()用法实例分析

    2024-04-29 14:08:20
  • Mysql中explain的使用详解

    2009-12-08 16:18:00
  • MySQL执行状态的查看与分析

    2024-01-23 18:48:56
  • Pytorch中Tensor与各种图像格式的相互转化详解

    2023-05-23 01:46:54
  • php实现断点续传大文件示例代码

    2024-04-28 09:45:17
  • 基于python实现蓝牙通信代码实例

    2021-08-20 07:54:06
  • 基于python3监控服务器状态进行邮件报警

    2022-05-05 05:25:39
  • PHP PDOStatement::errorInfo讲解

    2023-06-04 14:11:53
  • 对python 多个分隔符split 的实例详解

    2022-12-26 11:24:27
  • Python实现将Excel转换成xml的方法示例

    2023-01-19 23:02:53
  • php截取utf-8中文字符串乱码的解决方法

    2024-04-29 13:56:52
  • 关于MySql 10038错误的完美解决方法(三种)

    2024-01-27 06:16:18
  • Python松散正则表达式用法分析

    2021-03-12 02:51:36
  • python 8种必备的gui库

    2021-10-28 21:10:01
  • django实现同一个ip十分钟内只能注册一次的实例

    2021-03-07 03:13:37
  • ajax Google PageRank3(PR值)查询源代码

    2007-11-04 13:31:00
  • ImageMagick FAQ 问题摘要

    2008-10-21 13:14:00
  • Win10下安装CUDA11.0+CUDNN8.0+tensorflow-gpu2.4.1+pytorch1.7.0+paddlepaddle-gpu2.0.0

    2022-05-08 19:29:32
  • javascript 三 级下拉选择菜单Levels对象

    2023-09-05 03:28:48
  • asp之家 网络编程 m.aspxhome.com