記錄一個簡潔的html tab 標籤

時間 2019-11-12

標籤記錄一個簡潔 html tab 標籤欄目 HTML 简体版

原文原文鏈接

<html xmlns="http://www.w3.org/1999/xhtml"> css

<head> html

<title>簡潔Tab</title> url

ul{ list-style:none;} xml

/*選項卡1*/ htm

#Tab1{ ip

width:460px; get

margin:0px; it

padding:0px;

margin:0 auto;}

/*選項卡2*/

#Tab2{

width:576px;

margin:0px;

padding:0px;

margin:0 auto;}

/*菜單class*/

.Menubox {

width:100%;

background:url(http://www.jb51.net/upload/small/20079299441652.gif);

height:28px;

line-height:28px;

}

.Menubox ul{

margin:0px;

padding:0px;

}

.Menubox li{

float:left;

display:block;

cursor:pointer;

width:114px;

text-align:center;

color:#949694;

font-weight:bold;

}

.Menubox li.hover{

padding:0px;

background:#fff;

width:116px;

border-left:1px solid #A8C29F;

border-top:1px solid #A8C29F;

border-right:1px solid #A8C29F;

background:url(http://www.jb51.net/upload/small/200792994426548.gif);

color:#739242;

font-weight:bold;

height:27px;

line-height:27px;

}

.Contentbox{

clear:both;

margin-top:0px;

border:1px solid #A8C29F;

border-top:none;

height:181px;

text-align:center;

padding-top:8px;

}

-->

</style>

<!--

/*第一種形式第二種形式更換顯示樣式*/

function setTab(name,cursel,n){

for(i=1;i<=n;i++){

var menu=document.getElementById(name+i);

var con=document.getElementById("con_"+name+"_"+i);

menu.className=i==cursel?"hover":"";

con.style.display=i==cursel?"block":"none";

}

//-->

</script>

</head>

<body>

<ul>

</ul>

</div>

</div>

</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。