div+css仿163选项卡的简单版 - IT生活资讯网 - 专注IT精品资讯 关注IT生活 提供丰富有价值的IT教程 - TechFeel.Com

摩族智能手机社区 动力互联科技提供带宽支持

中国IDC圈

手机频道：智能手机 电子书 铃声 主题 游戏 　IDC主机托管：域名 空间 邮局 托管

 
您的位置:首页 > 网页设计 > Div+CSS >

div+css仿163选项卡的简单版

整理：互联网　来源：互联网【我要收藏】 进入论坛　发布时间：2007-08-20 08:46:44

非常多的网页中都运用到了tab这个技术，现在我们看看采用div+css来仿163选项卡的简单版的代码...

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"vmcTechFeel
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">vmcTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">vmcTechFeel
<head>vmcTechFeel
<title>标准布局应用：选项卡</title>vmcTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />vmcTechFeel
<meta name="Author" content="PR" />vmcTechFeel
<script type="text/javascript">vmcTechFeel
</script>vmcTechFeel
<style type="text/css">vmcTechFeel
/* 选项卡关键属性 */vmcTechFeel
#tab {vmcTechFeel
width:570px;vmcTechFeel
height:260px;vmcTechFeel
position:relative;vmcTechFeel
}

/*设置容器高宽等*/vmcTechFeel
html > body #tab {vmcTechFeel
width:566px;vmcTechFeel
}

/*兼容IE6:IE6下宽度不够*/vmcTechFeel
#tab div {vmcTechFeel
position:absolute;vmcTechFeel
top:26px;vmcTechFeel
left:0;vmcTechFeel
width:564px;vmcTechFeel
height:234px;vmcTechFeel
border:solid #eee;vmcTechFeel
border-width:0 1px 1px;vmcTechFeel
}

/*设置容器高宽等*/vmcTechFeel
#tab div {vmcTechFeel
display:none;vmcTechFeel
}

/*设置容器默认隐藏:不用ID是因为下面将利用class来控制容器显示,而class优先级低于id选择器*/vmcTechFeel
#tab .block {vmcTechFeel
display:block;vmcTechFeel
}

/*选中的容器*/vmcTechFeel
#tab h3 {vmcTechFeel
float:left;vmcTechFeel
width:114px;vmcTechFeel
height:26px;vmcTechFeel
line-height:26px;vmcTechFeel
margin:0 -1px 0 0;vmcTechFeel
font-size:14px;vmcTechFeel
cursor:pointer;vmcTechFeel
font-weight:400;vmcTechFeel
text-align:center;vmcTechFeel
color:#00007F;vmcTechFeel
background:#eee url(/upload/teaching/tab.gif) no-repeat;vmcTechFeel
}

/*默认标题样式*/vmcTechFeel
#tab .up {vmcTechFeel
background:#fff url(/upload/teaching/tab1.gif) no-repeat;vmcTechFeel
}

/*选中的标题样式*/vmcTechFeel
/*修饰列表内容*/vmcTechFeel
#tab ul {vmcTechFeel
margin:15px 0 0;vmcTechFeel
list-style:none;vmcTechFeel
padding:0;vmcTechFeel
}

#tab li {vmcTechFeel
float:left;vmcTechFeel
width:50%;vmcTechFeel
background:url(http://xxx.com/1.gif) no-repeat 25px 10px;vmcTechFeel
}

#tab li a {vmcTechFeel
display:block;vmcTechFeel
width:84%;vmcTechFeel
height:25px;vmcTechFeel
line-height:25px;vmcTechFeel
margin-left:8%;vmcTechFeel
font-size:12px;vmcTechFeel
text-decoration:none;vmcTechFeel
color:#333;vmcTechFeel
background:url(http://xxx.com/1.gif) repeat-x left bottom;vmcTechFeel
text-indent:10px;vmcTechFeel
}

#tab li a:hover {vmcTechFeel
text-decoration:underline;vmcTechFeel
color:red;vmcTechFeel
}vmcTechFeel
</style>vmcTechFeel
</head>vmcTechFeel
<body>vmcTechFeel
<div id="tab">vmcTechFeel
  <h3 class="up" onclick="go_to(1);">选择一</h3>vmcTechFeel
  <div class="block">vmcTechFeel
    <ul>vmcTechFeel
      <li><a href="#">11111111111111 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
      <li><a href="#">张钰和于连的同源悲剧 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
    </ul>vmcTechFeel
  </div>vmcTechFeel
  <h3 onclick="go_to(2);">选择二</h3>vmcTechFeel
  <div>vmcTechFeel
    <ul>vmcTechFeel
      <li><a href="#">22222222222222222 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
      <li><a href="#">张钰和于连的同源悲剧 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
    </ul>vmcTechFeel
  </div>vmcTechFeel
  <h3 onclick="go_to(3);">选择三</h3>vmcTechFeel
  <div>vmcTechFeel
    <ul>vmcTechFeel
      <li><a href="#">333333333333333 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
      <li><a href="#">张钰和于连的同源悲剧 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
    </ul>vmcTechFeel
  </div>vmcTechFeel
  <h3 onclick="go_to(4);">选择四</h3>vmcTechFeel
  <div>vmcTechFeel
    <ul>vmcTechFeel
      <li><a href="#">444444444444444 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
      <li><a href="#">张钰和于连的同源悲剧 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
    </ul>vmcTechFeel
  </div>vmcTechFeel
  <h3 onclick="go_to(5);">选择五</h3>vmcTechFeel
  <div>vmcTechFeel
    <ul>vmcTechFeel
      <li><a href="#">5555555555555555 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
      <li><a href="#">张钰和于连的同源悲剧 </a></li>vmcTechFeel
      <li><a href="#">从人大代表侯建军终审 </a></li>vmcTechFeel
      <li><a href="#">车辆交付问题 </a></li>vmcTechFeel
      <li><a href="#">贻误申请执行期限损失 </a></li>vmcTechFeel
      <li><a href="#">民警特权扣车,油变成 </a></li>vmcTechFeel
      <li><a href="#">地下室及公摊面积不收 </a></li>vmcTechFeel
      <li><a href="#">当前医疗广告存在的问 </a></li>vmcTechFeel
      <li><a href="#">新医改要注意的几个问 </a></li>vmcTechFeel
    </ul>vmcTechFeel
  </div>vmcTechFeel
  <script type="text/javascript">vmcTechFeel
 <!--vmcTechFeel
 var h=document.getElementById("tab").getElementsByTagName("h3");vmcTechFeel
 var d=document.getElementById("tab").getElementsByTagName("div");vmcTechFeel
 function go_to(ao){vmcTechFeel
  for(var i=0;i<h.length;i++){vmcTechFeel
   if(ao-1==i){vmcTechFeel
   h[i].className+=" up";vmcTechFeel
   d[i].className+=" block";vmcTechFeel
   }vmcTechFeel
   else {vmcTechFeel
   h[i].className=" ";vmcTechFeel
   d[i].className=" ";vmcTechFeel
   }vmcTechFeel
  }vmcTechFeel
 }vmcTechFeel
 //-->vmcTechFeel
 </script>vmcTechFeel
</div>vmcTechFeel
</body>vmcTechFeel
</html> vmcTechFeel

1 2 下一页
关键字: div+css,仿163,选项卡

【评论】【大 中 小】【打印】【关闭】

※ 相关信息
 ·DIV+CSS排版中新闻列表的制作方法  (2007-08-20 08:36:48)
 ·div+css布局中header部分的优化  (2007-08-19 15:56:49)
 ·DIV+CSS布局中的居中问题  (2007-08-19 15:46:52)
 ·DIV+CSS结合js控制页面滚动的效果  (2007-08-19 15:36:29)
 ·div+css布局时应注意的几个浏览器兼容性问题  (2007-08-18 11:34:51)
 ·Div+CSS布局入门教程 页面制作-用好border和clear  (2007-08-13 06:16:06)
 ·Div+CSS布局入门教程 页面顶部制作之二  (2007-08-13 06:13:13)
 ·Div+CSS布局入门教程 页面顶部制作之一  (2007-08-13 05:57:04)
 ·Div+CSS布局入门教程  (2007-08-13 05:47:52)
发表评论
用户名: 密码:
验证码: 匿名发表
TechFeel.Com 旗下网站：  摩族智能手机网 | 中国教程在线 | 动力互联科技
Copyright © 2005 - 2007 All Rights Reserved
冀ICP备 05024357