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>

原创粉丝点击