类似WINDOWS界面的标签式页面代码实例

类似WINDOWS界面的标签式页面 代码实例

<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>标签式按纽</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";

td_1.className
="l-h";td_2.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="180" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">&nbsp;&nbsp;用户密码登录&nbsp;&nbsp;</div></td>

      
<td width="180" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">&nbsp;&nbsp;电子钥匙登录&nbsp;&nbsp;</div></td>

      
<td width="180" height="20" align="center" valign="bottom" ></td>

      
<td width="180" height="20" align="center" valign="bottom"></td>

    
</tr>

    
<tr  style="">

      
<td width="180" height="1" align="center" class="l-hc" id="td_1" >&nbsp;</td>

      
<td width="180" height="1" align="center" class="l-c" id="td_2">&nbsp;</td>

      
<td width="180" height="1" align="center" class="l-c" id="td_">&nbsp;</td>

      
<td width="180" height="1" align="center" class="l-r" id="td_">&nbsp;</td>

    
</tr>

    
<tr>

      
<td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5">

        
<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>1
  
<table width="200" border="0">
    
<tr>
      
<td>&nbsp;</td>
      
<td>&nbsp;</td>
    
</tr>
    
<tr>
      
<td>&nbsp;</td>
      
<td>&nbsp;</td>
    
</tr>
  
</table>
</div>

<div style="display:none" id=w2><h1>2</h1></div>

<div style="display:none" id=w3><h1>3</h1></div>

<div style="display:none" id=w4><h1>4</h1></div>

<div style="display:none" id=w5><h1>5</h1></div>

<div style="display:none" id=w6><h1>6</h1></div>

              
</center>

             
</div>

             



             
</td>

            
</tr>

          
</table>

        
</div>

      
</td>

    
</tr>

  
</center>

    
<tr>

      
<td width="398" height="37" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5">

        
<align="right"><input type="button" value="确定" name="_ok" style="width: 60;height:22" class=up> 

        
<input type="button" value="取消" name="_cancel" style="width: 60;height:22" class=up onclick="window.close();"> 

        
<input type="button" value="应用(A)" name="_apply" style="width: 60;height:22" disabled class=up>

      
</td>

    
</tr>

  
</table>

</div>

</form>

</body>

</html> 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值