内容显示页
 
类别:web 2.0 | 浏览(133) | 2007-2-1 10:00:00

tab实现
div+css实现tab
一个大div里边有多个div +1个div ,现在想让最后一个div的宽度是剩下的宽度,如何去做.
<style>
#tab_left {width:100%}
#tab_left div{ width:100px; height:50px; float:left; }
#tab_left .tab_1_0{color:red; background-color:#666666; border:1px solid #FF0000;}
#tab_left .tab_1_1{color:red; background-color:#FF0000}
#tab_left .tab_1_2{color:red; background-color:#0000DD}
#tab_left .tab_1_3{color:red; background-color:#EDFCBa}
#tab_left .tab_1_4{color:red; background-color:#000000}
#tab_left .tab_open{ background-color:#0000FF; border-bottom:none;}
#tab_left .tab_center { border-bottom:1px solid #FF0000; width:20px}
#tab_left .tab_right { border-bottom:1px solid #FF0000;width:auto; padding-left:100%; }
#content{ border:1px solid #FF0000; border-top:none; width:100%; height:200px;}
</style>
<SCRIPT language=JavaScript type=text/javascript>
<!--//-->&lt;![CDATA[//><!-- 
var isIE = navigator.userAgent.toLowerCase().indexOf("msie")!=-1;
var $E = function(elemId){
if(document.getElementById){
return document.getElementById(elemId);
}else if(document.layers){
document.layers[elemId];
}else{
return eval('document.all.' + elemId);
}
}

function Menu(mid,idx){
for(var i=0;i<10;i++){
if(!$E("tab_"+mid+"_"+i)) break;
$E("tab_"+mid+"_"+i).className = "tab_"+mid+"_"+i;
$E("c_"+mid+"_"+i).style.display = "none";
}
$E("tab_"+mid+"_"+idx).className = "tab_open";
$E("c_"+mid+"_"+idx).style.display = "block";
}
//--><!]]&gt;
</SCRIPT>
<DIV id=tab_left>
<DIV class=tab_center></DIV>
<DIV class=tab_1_0 id=tab_1_0 onmouseover=Menu(1,0);><A href="#">AAAAAAAAAAaa</A></DIV>
<DIV class=tab_center></DIV>
<DIV class=tab_1_1 id=tab_1_1 onmouseover=Menu(1,1);><A href="#">BBBBBB</A></DIV>
<DIV class=tab_center></DIV>
<DIV class=tab_1_2 id=tab_1_2 onmouseover=Menu(1,2);><A href="#">CCCCCCCCCCc</A></DIV>
<DIV class=tab_right></DIV>
</DIV>
<div id=content style=" clear:both; display:inline; float:left; width:100%">
<DIV id=c_1_0 style="">000000000000000000</DIV>
<DIV id=c_1_1 style="DISPLAY: none">1111111111111111111</DIV>
<DIV id=c_1_2 style="DISPLAY: none">2222222222222222222222222</DIV>
</div>


引用本页地址:http://www.yongfa365.com/item/11fa6b0101d6cc81.html
 
 
相关链接
 
网友评论:
姓名: 记住我
网址:
邮箱:
内容:
验证码:  验证码图片看不清? 换张图试试
 
   
 
 
文章分类
 
   

power by :柳永法(yongfa365)'Blog | model by :hibaidu | css by:众网友 | 京ICP备07011491号   我要统计  

本空间赞助商:北京中科兴联信息技术有限公司

QQ:64049027    E-mail:64049027<at>qq.com