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