类似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" >

         < 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 > 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" >

         < p  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 >