CSS处理斜角导航条的一个例子 [源码].txt
来源:互联网 发布:软件项目售后服务流程 编辑:程序博客网 时间:2024/04/26 10:30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>www.zishu.cn</title>
<style>
/*全局处理一下*/
ul{margin:0 0 0 50px;font-size:12px;}
/*tab 基础CSS原形 可扩展*/
.tab li{display:inline;}
.tab a{background: url(http://www.zishu.cn/attachments/month_0708/u2007823223236.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(http://www.zishu.cn/attachments/month_0708/u2007823223236.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(http://www.zishu.cn/attachments/month_0708/u2007823223236.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>
</head>
<body>
<ul class="tab">
<li class="on"><a href="http://www.kijiji.cn" target="_blank"><span>首 页</span></a></li>
<li ><a href="http://www.kijiji.cn/fabu" target="_blank"><span>发布信息</span></a></li>
<li ><a href="http://www.kijiji.cn/wo" target="_blank"><span>我的客齐集</span></a></li>
<li ><a href="http://yy.kijiji.cn" target="_blank"><span>社 区</span></a></li>
<li ><a href="http://www.kijiji.cn/help" target="_blank"><span>帮 助</span></a></li>
<div style="clear:both;"></div>
</ul>
<div class="info">转载请注明出处!谢谢!:)子鼠:<a href="http://www.zishu.cn/blogview.asp?logID=647">CSS处理斜角导航条的一个例子 [源码]</a></div>
<br /><br />
<ul class="tab big">
<li class="on"><a href="http://www.kijiji.cn" target="_blank"><span>首 页</span></a></li>
<li ><a href="http://www.kijiji.cn/fabu" target="_blank"><span>发布信息</span></a></li>
<li ><a href="http://www.kijiji.cn/wo" target="_blank"><span>我的客齐集</span></a></li>
<li ><a href="http://yy.kijiji.cn" target="_blank"><span>社 区</span></a></li>
<li ><a href="http://www.kijiji.cn/help" target="_blank"><span>帮 助</span></a></li>
</ul>
<div class="info">这个是大一点的!</div>
</body>
</html>
- CSS处理斜角导航条的一个例子 [源码].txt
- 一个导航条的例子
- 一个导航条的效果DIV+CSS
- css之斜角的制作
- 创建一个纯CSS的水平导航条
- 创建一个纯CSS的水平导航条
- 入门- 创建一个纯CSS的水平导航条
- 创建一个纯CSS的水平导航条
- 创建一个纯CSS的水平导航条
- 一个DIV+CSS代码布局的简单导航条
- 纯css写的一个简单导航条
- 一个DIV+CSS导航条效果
- 一个导航条的进化
- 一个简单实用而且动太的导航条的例子
- div+css 导航条的制作?
- css 最简单的导航条
- 纯CSS实现斜角
- 纯CSS实现斜角
- 改变进度条颜色及去掉进度条边框
- IIS使用十大原则,(IIS过期时间,IIS缓存设置)
- java过滤关键字
- VS2005 stack overflow的问题
- 浅谈C++的智能指针
- CSS处理斜角导航条的一个例子 [源码].txt
- (转)PHP面试题及答案
- C++深拷贝与浅拷贝
- C++的全局对象,静态对象构造函数是怎样被调用的
- DoublyLinkedList
- 想保留的网址信息
- 清除服务器IIS缓存的常用方法
- [汇编]内联汇编-扩展ASM
- shell中array使用方法