CSS 选项卡

<!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=utf-8" />  
<title></title>  
<style type="text/css">  
body,td,th {font-size: 12px;}  
body {margin: 0px;margin: 0px;}  
.clear{ clear:both;}  
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框,避免出现奇怪的选中区域*/
:focus{outline:0;}
.test{width:100%; margin-top:50px; height:250px; border:1px solid red;}  
.test ul{list-style:none; margin:0px;margin-top:4px;padding:0px; border-bottom:1px solid red; height:30px;}  
.test li{float:left;width:100px;margin-left:5px;line-height:30px; border:1px solid red; border-bottom:0px;}  
.test a{display:block;text-align:center;height:30px;}  
.test a:link{color:#000000;text-decoration:none;}  
.test a:visited{color:#000000;text-decoration:none;}  
.test a:hover{text-decoration:none;}   
.onselect{font-weight:bold;background:url(images/spritebg.png)  no-repeat 0px 12px;}
.noselect{font-weight:normal;background:normal} 
</style>  
<script>
<!--
function setTab(obj,tagName){
 var list=document.getElementsByName(tagName);
 for(i=0;i<list.length;i++){
  list[i].className="noselect";  
 }
 obj.className="onselect"; 
}
</script>
</head>  
<body>  
<div class="test">  
     <ul>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink" class="onselect">首页</a></li>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">产品介绍</a></li>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">服务介绍</a></li>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">技术支持</a></li>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">立刻购买</a></li>  
         <li><a href="#" οnclick="setTab(this,'tablink')" name="tablink">联系我们</a></li>  
     </ul>  
     <div class="clear"></div>
     <div class="clear">1121</div>   
</div>  
</body>  
</html> 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值