程序博客网 > 网吧拦截关机软件

仿windows选项卡-1

来源：互联网 发布：网吧拦截关机软件 编辑：程序博客网 时间：2024/05/17 23:49

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 onclick=secBoard(0) width="10%">1</TD>
               
    <TD class=sec1 onclick=secBoard(1) width="10%">2</TD>
               
    <TD class=sec1 onclick=secBoard(2) width="10%">3</TD>
               
    <TD class=sec1 onclick=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" onmouseover="this.style.backgroundColor='red'" onmouseout="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" onclick=restore();c1();><div id="td1" class="lc">背景</div></td>
      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td>
      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外观</div></td>
      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td>
      <td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td>
      <td width="50" height="20" align="center" valign="bottom" onclick=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="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#" onclick="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="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
        <li  id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
        <li  id="Tab3"><a href="#" onclick="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="#" onclick="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>

网吧拦截关机软件 网吧拦截关机软件
原创粉丝点击
热门IT博客
皇室战争重甲亡灵数据皇室战争重甲亡灵数据
苏联解体武汉会战 知乎苏联解体武汉会战 知乎
mono是什么软件
淘宝资源怎么找
pageoffice java使用
广告牌制作软件
jqueryconfirm.js下载
广州时代大数据公司
导入题库答题软件
java小游戏毕业设计
软件平台招商ppt
出老年保健数据
搜狗用户画像挖掘 源码
ubuntu设置ip不起作用
电锯惊魂全集解析 知乎
android 6.0 网络权限
逆袭网络剧dvd百度云
郑州淘宝诈骗公司名单
mac brave试色
灵格斯翻译软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 一起再看流星雨预告片 一起去看流星雨歌曲 一起去看流星雨下载 一起又看流星雨于馨 流星雨图片真实照片 一起来再流星雨全集 一起又看流星雨25集 一起去看流星雨歌词 一起在看流星雨 第3部 一起又看流星雨26集 一起又看流星雨30集 什么时候有流星雨看 一起又看流星雨32集 一起又看流星雨第一部 一起又看流星雨结局 一起又看流星雨22集 一起又看流星雨20集 一起再看流星雨下载 一起又看流星雨37集 一起看流星雨的图片 一起又看流星雨27集 一起又看流星雨23集 一起又看流星雨31集 流星雨又来临现场版 一起又看流星雨28集 一起又看流星雨鑫鑫 一起再看流星雨简介 一起又看流星雨33集 一起再看流星雨歌曲 一起又看流星雨35集 一起又看流星雨内容 一起又看流星雨采访 流星图 10月将有多场流星雨 10月将有多场流星雨0 10月将有多场流星雨光临地球 一起陪我去看流星雨 我们一起去看流星雨 8月13日英仙座流星雨 陪我一起去看流星雨 今晚是不是有流星雨

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里