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>
以下是用的一张图片,我作的有点大了。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- lambda函数用法lambda非常重要的一个定义。lambda在【运行时】才绑定,【不是】在定义的时候绑定。下面这个列子:本意想:让X分别
- 使用 designer 进行开发首先要知道,使用 Qt designer 和 代码进行 Qt 开发实现页面跳转是不一样的,这里我们使用的是
- 例如,如果列a被定义为unique,并且值为1,则下列语句有同样的效果,也就是说一旦出入的记录中存在a=1的情况,直接更新c = c + 1
- python脚本性能分析首先使用cd进入需要测试的脚本文件对应的目录,然后再使用如下代码完成对脚本的性能测试。# enter the dir
- 前言在laravel项目开发中,经常使用到公共函数,那如何在laravel配置全局公共函数呢??下面话不多说了,来一起看看详细的介绍吧方法如
- 基本功能:能够实现学生成绩相关信息的输入、输出、查找、删除、修改等功能;(使用数据库对数据进行存取)输入并存储学生的信息:通过输入学生的学号
- Asyncore模块提供了以异步的方式写入套接字服务客户端和服务器的基础结构。只有两种方式使一个程序在单处理器上实现“同时做不止一件事”。多
- 本文实例讲述了Python面向对象之类的定义与继承用法。分享给大家供大家参考,具体如下:定义一个类类中的方法同,类外方法,默认传self值类
- 前言在实际生产环境中,如果对mysql数据库的读和写都在一台数据库服务器中操作,无论是在安全性、高可用性,还是高并发等各个方面都是不能满足实
- 找了国内30个比较著名的网站的注册表单做样本,对标签和输入区对齐方式做了统计,得到了一个结论:标签水平右对齐更适合中文网站,或者说右对齐更适
- 本文实例总结了Python实现判断一个字符串是否包含子串的方法。分享给大家供大家参考,具体如下:1.使用成员操作符 in>>&g
- 目录前言Tips - django版本区别路由匹配无名分组&有名分组无名分组有名分组小提示反向解析路由不涉及分组的反向解析有名分组&
- 背景在一次进行SQl查询时,我试着对where条件中vachar类型的字段去掉单引号查询,这个时候发现这条本应该很快的语句竟然很慢。这个va
- 这篇文章主要介绍了python lambda表达式(匿名函数)写法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 优化场景利用视图函数(views)查询数据之后可以通过上下文context、字典、列表等方式将数据传递给HTML模板,由template引擎
- 1. 准备工作有朋友可能没用过folium,它其实就是python的一个专业绘制地图的第三方库,所以在使用之前需要先安装它。pip 
- 首先介绍下比较简单但必不可少且实用的知识,可以当手册查询,适合像我一样的新手看。PHP常用库函数介绍一、PHP字符串操作常用函数1.确定字符
- 目录循环语句单分支如何使用双分支结构多分支的使用While 循环拳击游戏循环:总结循环语句多分支选择流程 If-else语句单分支如何使用#
- 购物车是电子商务网站中不可缺少的组成部分,但目前大多数购物车只能作为一个顾客选中商品的展示,客户端无法将购物车里的内容提取出来满足自己事务处
- 目录Counter类创建计数值的访问与缺失的键计数器的更新键的删除elements()most_common([n])fromkeys浅拷贝