1、
<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
<p align="center">
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>
<TD class=sec2 οnclick=secBoard(0) width="10%">1</TD>
<TD class=sec1 οnclick=secBoard(1) width="10%">2</TD>
<TD class=sec1 οnclick=secBoard(2) width="10%">3</TD>
<TD class=sec1 οnclick=secBoard(3)
width="10%">4</TD>
</TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0
cellPadding=0 width=549 border=0><!--关于TBODY标记-->
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD><center><img src="tutu16.gif"><BR>
<table><tr><td style="width:80;height:20;background-color:blue" οnmοuseοver="this.style.backgroundColor='red'" οnmοuseοut="this.style.backgroundColor='blue'"></td></tr></table>
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD><center><img src="tutu24.gif"><BR>
<form name="form1" method="post" action="">
<select name="select" style="background:#FF0000;color:white">
<option >凤,风之羽也。</option>
<option>ddddddddddddd</option>
<option>ddddddddddddddddd</option>
<option>eeeeeeeeeeeeeeee</option>
<option>eeeeeeeeeeeeeeee</option>
</select>
</form>
</TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD><center><img src="tutu30.gif"><BR>
<style type="text/css">
<!--
.formstyle { font-family: "宋体"; font-size: 10pt; color: #FF0000; background-color: #FFFFCC}
-->
</style>
<center>
<form name="form1" method="post" action="">
<select name="select" class="formstyle">
<option value="a1.html">menu1</option>
<option value="a4.html" selected>menu2</option>
<option value="a8.html">menu3</option>
</select>
</form>
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD><center><img src="tutu34.gif"><br>
<table border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<a href="a12.html"><td bgcolor="#FFFFFF" onMouseOver="this.style.color='#ffffff'; this.style.background='#003399'" onMouseOut="this.style.color='#003399'; this.style.background='#ffffff'" style="cursor: hand">恰在似与不似之间</td></a>
</tr>
</table>
</TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p>
2、
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body,table,tr,td{
font-size:12px;
color:#000000;
}
.sec1 {
background-color: #99CC99;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style> <script language="javascript">
<!--
function secBoard(n,x,y)
{
for(i=0;i<secTable.cells.length;i++){
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";}
for(i=0;i<mainTable.tBodies.length;i++){
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";}
weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<table width="588" border="0" cellspacing="1" cellpadding="4" align="center">
<tr>
<td width="82%">当前位置:展馆分布 > <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td>
<td width="18%"></td>
</tr>
<tr>
<td colspan="2" height="1" bgcolor="#000000"></td>
</tr>
<tr>
<td colspan="2" height="4"></td>
</tr>
<tr>
<td colspan="2">
<table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align="center">
一
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
二
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
三
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
四
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
五
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
六
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
3、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<base href="http://www.cn-lan.com/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
var txtstr_1=" QQ:28983016 Email:<a href=mailto:451200@126.com>451200@126.com</a>";
var txtstr_2=" 需要软件的朋友可以与我联系。";
var txtstr_3=" 论坛现在暂时关闭,请朋友们在QQ上联系."
var txtstr_4=" 孤独的时候便走向自然;<br>寂寞的时候便走向音乐;<br>失败的时候便走向憧憬;<br>委屈的时候便走向创造和友情。<br>"
function changediv(n){
for(i=1;i<=5;i++){
eval("document.getElementById('s'+i+'').className='under'+n+''");
//此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色
}
for(i=1;i<=4;i++){
eval("document.getElementById('c"+i+"').className='a"+n+"'");
//此次循环初始化所有的选项卡按钮的背景图片为cb0.gif,银灰色
}
eval("document.getElementById('c"+n+"').className='t"+n+"'");
//然后设置鼠标移动到的相应位置的背景图片为相应的图片,修改对应的样式表。
eval("document.getElementById('bodyt').className='body"+n+"'");
//修改选项卡下半部的样式,使其的色彩与上半部的图片相适应。
bodytxt=eval('txtstr_'+n);
if(bodytxt==""){
alert("数据正在下载,请稍候!");}
else
{
document.getElementById("txt1").innerHTML=bodytxt;
//设置选项卡主体部分相应的文字。
}
}
</script>
<style type="text/css">
<!--
.t1 {
background-image: url(cb1.gif);
border-bottom-width: medium;
border-bottom-style: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #88c027;
}
.t2 {
background-image: url(cb2.gif);
padding-top: 3px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #eac751;
}
.t3 {
background-image: url(cb3.gif);
padding-top: 3px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ee6f69;
}
.t4 {
background-image: url(cb4.gif);
padding-top: 3px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #7eaffb;
}
.t0 {
background-image: url(cb0.gif);
padding-top: 3px;
border-bottom-width: 0px;
border-bottom-style: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
-->
</style>
<style type="text/css">
<!--
td {
font-size: 12px;
line-height: 16px;
}
.d1 {
padding-top: 3px;
border-bottom-width: medium;
border-bottom-style: none;
}
.d2{
padding-top: 3px;
border-bottom-width: medium;
border-bottom-style: none;
}
.d3{
padding-top: 3px;
border-bottom-width: medium;
border-bottom-style: none;
}
.d4{
padding-top: 3px;
border-bottom-width: medium;
border-bottom-style: none;
}
.under1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #88c027;
}
.under2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eac751;
}
.under3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ee6f69;
}
.under4 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #7eaffb;
}
.body1 {
background-color: #d6efb5;
border-top: 0px none;
border-right: 1px solid #88c027;
border-bottom: 1px solid #88c027;
border-left: 1px solid #88c027;
}
.body2 {
background-color:#fff7be;
border-top: 0px none #eac751;
border-right: 1px solid #eac751;
border-bottom: 1px solid #eac751;
border-left: 1px solid #eac751;
}
.body3 {
background-color: #ffe5e3;
border-top: 0px none;
border-right: 1px solid #ee6f69;
border-bottom: 1px solid #ee6f69;
border-left: 1px solid #ee6f69;
}
.body4 {
background-color: #d4eaff;
border-top: 0px none;
border-right: 1px solid #7eaffb;
border-bottom: 1px solid #7eaffb;
border-left: 1px solid #7eaffb;
}
.firstunderline {
border-bottom-width: medium;
border-bottom-style: none;
}
.bodytop {
border-top-width: medium;
border-top-style: none;
}
-->
</style>
<style type="text/css">
<!--
.a1 {
background-image: url(cb0.gif);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #88c027;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
.a2 {
background-image: url(cb0.gif);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eac751;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
.a3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ee6f69;
background-image: url(cb0.gif);
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
.a4 {
background-image: url(cb0.gif);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #7eaffb;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
.temp {
background-image: url(cb0.gif);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #88c027;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AEABA9;
}
-->
</style>
</head>
<body>
<table width="294" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td id="s1" width="8" height="19" class="under1"><br> </td>
<td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td>
<td id="s2" width="8" class="under1"><br> </td>
<td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">红色黑客</td>
<td id="s3" width="8" class="under1"><br> </td>
<td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">蓝色月光</td>
<td id="s4" width="8" class="under1"><br> </td>
<td id="c4" width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飘客</td>
<td id="s5" width="49" class="under1"><br>
</td>
</tr>
</table>
<table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody>
<tr>
<td valign="top"><br><div id="txt1">
<script language="javascript">
document.write(txtstr_1);
</script>
</div> </td>
</tr>
</tbody>
</table>
<p> </p>
4、
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body,table,tr,td{
font-size:12px;
color:#000000;
}
.sec1 {
background-color: #99CC99;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<table width="588" border="0" cellspacing="1" cellpadding="4" align="center">
<tr>
<td width="82%">当前位置:展馆分布 > <span id="weizi">A展馆1楼展厅</td>
<td width="18%"></td>
</tr>
<tr>
<td colspan="2" height="1" bgcolor="#000000"></td>
</tr>
<tr>
<td colspan="2" height="4"></td>
</tr>
<tr>
<td colspan="2">
<table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableA>
<tr height=20 align=center>
<td class=sec1 id="A7" onClick="secBoard()">A展馆1楼展厅</td>
<td class=sec1 id="A8" onClick="secBoard()">B展馆1楼展厅</td>
<td class=sec1 id="A9" onClick="secBoard()">B展馆2楼展厅</td>
<td class=sec1 id="A10" onClick="secBoard()">C展馆1楼展厅</td>
<td class=sec1 id="A11" onClick="secBoard()">C展馆2楼展厅</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableB>
<tr height=20 align=center>
<td class=sec2 id="B1" onClick="secBoard()">A展馆1楼展厅</td>
<td class=sec1 id="B2" onClick="secBoard()">A展馆2楼展厅</td>
<td class=sec1 id="B3" onClick="secBoard()">B展馆1楼展厅</td>
<td class=sec1 id="B4" onClick="secBoard()">B展馆2楼展厅</td>
<td class=sec1 id="B5" onClick="secBoard()">C展馆1楼展厅</td>
<td class=sec1 id="B6" onClick="secBoard()">C展馆2楼展厅</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align="center">
一
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
二
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
三
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center">
四
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
五
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
六
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
七
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
八
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
九
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
十
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center">
十一
</td>
</tr>
</tbody>
</table>
<!--放在这里安全点 #:-) -->
<script language="javascript">
<!--
var lastObj="B1",strClassBlur="sec1",strClassActive="sec2";
var tbody=document.getElementById("mainTable").getElementsByTagName("TBODY");
var secTableA=document.getElementById("secTableA");
var secTableB=document.getElementById("secTableB");
function secBoard()
{ var n=event.srcElement.id;
if(lastObj == n)return;
if(n.charAt(0) != lastObj.charAt(0)) secTableA.swapNode(secTableB);
eval(n).className=strClassActive;
titleChange(eval(n).innerText);
eval(lastObj).className=strClassBlur;
tbody[getNum(lastObj)].style.display="none";
tbody[getNum(n)].style.display="block";
lastObj=n;
}
function getNum(str)
{
return parseInt(str.substr(1))-1;
}
function titleChange(text)
{
weizi.innerText=text;
}
//-->
</script>
</td>
</tr>
</table>
5、
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style type="text/css">
<!--
body{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000;}
td, div, input, textarea{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;cursor: default;}
.title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋体;font-size:12px;}
.up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff}
.down{background-color: #cccccc;border:2px inset #ffffff}
.up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff}
.down1{background-color:#cccccc;border:1px inset #ffffff}
.l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff;
border-right: 2px outset #ffffff; color:#000000;
border-top: 2px outset #ffffff; padding-top: 2;height:18}
.lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff;
border-right: 2px outset #ffffff; color:#000000;
border-top: 2px outset #ffffff; padding-top: 2;height:20}
.l-h { background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; }
.l-c { background-color: #cccccc; border-top: 2px outset #ffffff }
.l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;}
.l-hc { background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;}
.l-cc { background-color: #cccccc;color:#000000; }
.l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;}
td{color:#000000;}
-->
</style>
<title>显示属性-www.51windows.Net</title>
</head>
<body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no>
<SCRIPT LANGUAGE="JavaScript">
<!--
function restore()
{
td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l";
td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c";
w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none";
}
function c1()
{
td1.className="lc";
td_1.className="l-hc";
w1.style.display="block";
}
function c2()
{
td2.className="lc";
td_2.className="l-cc";
w2.style.display="block";
}
function c3()
{
td3.className="lc";
td_3.className="l-cc";
w3.style.display="block";
}
function c4()
{
td4.className="lc";
td_4.className="l-cc";
w4.style.display="block";
}
function c5()
{
td5.className="lc";
td_5.className="l-cc";
w5.style.display="block";
}
function c6()
{
td6.className="lc";
td_6.className="l-cc";
w6.style.display="block";
}
//-->
</SCRIPT>
<form name="free" method="post" target="_target">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="400" height="61">
<tr>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c1();><div id="td1" class="lc">背景</div></td>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c2();><div id="td2" class="l">屏保</div></td>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c3();><div id="td3" class="l">外观</div></td>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c4();><div id="td4" class="l">Web</div></td>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c5();><div id="td5" class="l">效果</div></td>
<td width="50" height="20" align="center" valign="bottom" οnclick=restore();c6();><div id="td6" class="l">设置</div></td>
<td width="50" height="20" align="center" valign="bottom" ></td>
<td width="50" height="20" align="center" valign="bottom"></td>
</tr>
<tr style="">
<td width="50" height="1" align="center" class="l-hc" id="td_1" > </td>
<td width="50" height="1" align="center" class="l-c" id="td_2"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_3"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_4"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_5"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_6"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_"> </td>
<td width="50" height="1" align="center" class="l-r" id="td_"> </td>
</tr>
<tr>
<td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5">
<p align="center">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="325">
<tr>
<td width="100%" height="280">
<div align="center">
<center>
<div style="display:" id=w1><h1>AAAAAAAAAAAA</h1></div>
<div style="display:none" id=w2><h1>BBBBBBBBBBBBB</h1></div>
<div style="display:none" id=w3><h1>CCCCCCCCCCCCC</h1></div>
<div style="display:none" id=w4><h1>DDDDDDDDDDDD</h1></div>
<div style="display:none" id=w5><h1>EEEEEEEEEEEEEE</h1></div>
<div style="display:none" id=w6><h1>FFFFFFFFFFFFFFFFF</h1></div>
</center>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</center>
</table>
</div>
</form>
</body>
</html>
6、
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3A81C8;
border-right-color: #3A81C8;
border-bottom-color: #3A81C8;
border-left-color: #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff950b;
border-right-color: #ff950b;
border-bottom-color: #ff950b;
border-left-color: #ff950b;
background-color: #FFECD2;
}
.content3 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE74B8;
border-right-color: #FE74B8;
border-bottom-color: #FE74B8;
border-left-color: #FE74B8;
background-color: #FFECF5;
}
.content4 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00988B;
border-right-color: #00988B;
border-bottom-color: #00988B;
border-left-color: #00988B;
background-color: #E8FFFD;
}
.content5 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #A8BC1F;
border-right-color: #A8BC1F;
border-bottom-color: #A8BC1F;
border-left-color: #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" οnclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
<li id="tag2"><a href="#" οnclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
<li id="tag3"><a href="#" οnclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
<li id="tag4"><a href="#" οnclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
<li id="tag5"><a href="#" οnclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度</div>
<div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
<div id="content3" class="hidecontent">3、这回需要使用到js了,呵呵</div>
<div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够,减少服务器负担</div>
<div id="content5" class="hidecontent">5、这是使用到的两个图片:
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
7、
<html>
<head>
<style type="text/css">
<!--
.tablestyle1 {
font: normal 12px "宋体", Arial;
color: #777777;
text-decoration: none;
text-align: center;
vertical-align: middle;
border-top: 1px solid #E4E4E4;
border-right: 1px solid #4E4E4E;
border-bottom: 1px solid #4E4E4E;
border-left: 1px solid #E4E4E4;
background: #FDFDFD;
}
.Tdstyle1 {
background: #FDFDFD;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
cursor: hand;
text-decoration: none;
}
.Titledivstyle {
text-align: justify;
text-justify:Distribute-all-lines;
}
.inf1 {
color: #EDB905;
}
.inf2 {
color: #107460;
}
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function iniINF(Init)//在网页初始化时,将各项详细信息隐藏的过程。
{
if(Init)
{
inf1.style.display='none';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
}
}
function showinf(theObj)//查找并显示对应详细信息的过程。
{
switch(theObj)
{
case 'inf1'://当鼠标点击目标为“银行汇款”时的处理过程。
with(findObj(theObj))
if(style.display=='none')//检查当前鼠标点击的选项的详细信息是否已处于显示状态。若已显示,则关闭;若未显示,则弹出。
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu1.style.color='#FF0000';
Menu1.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu1.style.color='';
Menu1.style.background='';
}
break;
case 'inf2'://当鼠标点击目标为“邮局汇款”时的处理过程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf1.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu2.style.color='#FF0000';
Menu2.style.background='#E1F8C2';
Menu1.style.color='';
Menu1.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu2.style.color='';
Menu2.style.background='';
}
break;
case 'inf3'://当鼠标点击目标为“网上支付”时的处理过程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf1.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu3.style.color='#FF0000';
Menu3.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu3.style.color='';
Menu3.style.background='';
}
break;
case 'inf4'://当鼠标点击目标为“电话充值”时的处理过程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf1.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu4.style.color='#FF0000';
Menu4.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu4.style.color='';
Menu4.style.background='';
}
break;
case 'inf5'://当鼠标点击目标为“手机充值”时的处理过程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf1.style.display="none";
inf6.style.display="none";
Menu5.style.color='#FF0000';
Menu5.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu5.style.color='';
Menu5.style.background='';
}
break;
case 'inf6'://当鼠标点击目标为“U币卡充值”时的处理过程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf1.style.display="none";
Menu6.style.color='#FF0000';
Menu6.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu1.style.color='';
Menu1.style.background='';
}
else
{
style.display='none';
Menu6.style.color='';
Menu6.style.background='';
}
break;
}
}
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)//查找对象函数。
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>
<body onLoad="iniINF(true);">
<center><div align="center">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
<tr>
<td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td>
<td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td>
<td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td>
<td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td>
<td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td>
<td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf1"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf1">
<tr>
<td height="20"><div align="justify">汇款信息:</div></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">开
户 银 行</td>
<td width="360"><div align="left">:深圳市商业银行XXX支行</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">帐
户 名</td>
<td><div align="left">:深圳市XXXXXXXXX有限公司</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">帐
号</td>
<td><div align="left">:2326 5665 5669 2233 xxxx
xxxx</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><div align="justify">建议大家在银行汇款时……</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf2">
<tr>
<td height="20"><div align="justify">汇款信息:</div></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle1">通
讯 地 址</td>
<td width="360"><div align="left">:深圳市……</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">收
款 人</td>
<td><div align="left">:深圳市XXXXXXXXX有限公司</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="Titledivstyle">邮 编 </td>
<td><div align="left">:xxxxxx</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="20"><div align="justify">建议大家在邮局汇款时……</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf3"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
<tr>
<td height="200" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div></center>
</body></html>
8、
<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px;
padding:0 20px;
color:#333;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
color:#F30;
text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
color:#F30;
text-decoration:none;
}
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
display:none;
}
</style>
<div id="Whatever">
<ul class="TabBarLevel1" id="TabPage1">
<li id="Tab1"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
<li id="Tab2" class="Selected"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
<li id="Tab3"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li>
<li id="Tab4"><a href="#" οnclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>
</ul>
<div id="cnt">
<div id="dTab1" class="HackBox">我为每一次的快乐而哭泣,我为每一次的悲伤而微笑。
</div>
<div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】
</div>
<div id="dTab3" class="HackBox">学习是件头疼的事,为了能活下去我不得不学习
</div>
<div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
</div>
</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){
var x = oItem.children(i);
x.className = "";
var y = x.getElementsByTagName('a');
y[0].style.color="#333333";
}
document.getElementById(tabid).className = "Selected";
var dvs=document.getElementById("cnt").getElementsByTagName("div");
for (var i=0;i<dvs.length;i++){
if (dvs[i].id==('d'+tabid))
dvs[i].style.display='block';
else
dvs[i].style.display='none';
}
}
</script>
9、
<html>
<head>
<title>test</title>
<style>
td,a,body{font-size:9pt;}
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000}
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="javascript">
var AroundInfoArray=new Array();
AroundInfoArray[0]="咖啡厅的内容";
AroundInfoArray[1]="学校的内容";
AroundInfoArray[2]="酒店的内容";
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
}else{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
}
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble">
<tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">咖啡厅</td></tr>
<tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">学校</td></tr>
<tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">酒店</td></tr>
<tr><td style="border-right:solid 1px #eeeeee"> </td></tr>
</table>
</td><td width="360">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content">
<tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr>
</table>
</td></tr>
</table>
<script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script>
</body></html>