zoukankan      html  css  js  c++  java
  • 写一个简单的CSS表

      1 <html>
      2 <head>
      3   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      4   <title>Lite List</title>
      5   <style type="text/css">
      6     table   { border: 1px solid #aaa; width: 100%; background-color:#ccc; color:black; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size:120%; margin-bottom: 10px; }
      7     td      { color: #333; vertical-align: middle; }
      8     pre     { font-family: Verdana, sans-serif; font-size: 80%; border-width: 1; border-left: 1; border-right: 0; border-top: 0; border-bottom: 0; padding-left: 7px; border-color: #666; border-style: solid; margin-left: 20px; margin-top: 0px; margin-bottom: 10px; }
      9     .button { display: none; font-family: Arial, sans-serif; background-color: white; border-width: 1; border-style: solid; border-color: #999; font-size: 14px; width: 18px; height: 16px; cursor: pointer; text-decoration: none; margin: 2px; font-weight: 700; color: #900; }
     10     .close  { padding-left: 1px; padding-right: 2px; }
     11     .open   {}
     12     .ver     { color: #900; }
     13   </style>
     14   <script><!--
     15   function Expand( x )
     16   {
     17       x = x.replace( /Expand/, "" );
     18       document.getElementById( "Block" + x ).style.display = "inline";
     19       document.getElementById( "Expand" + x ).style.display = "none";
     20       document.getElementById( "Collapse" + x ).style.display = "inline";
     21   }
     22   function Collapse( x )
     23   {
     24       x = x.replace( /Collapse/, "" );
     25       document.getElementById( "Block" + x ).style.display = "none";
     26       document.getElementById( "Expand" + x ).style.display = "inline";
     27       document.getElementById( "Collapse" + x ).style.display = "none";
     28   }
     29   function NumberIncremental( tagType, tagId, prefixId )
     30   {
     31     var el = document.getElementsByTagName( tagType );       
     32     var which = 0;
     33     for( index=0; index<el.length; index++ )
     34     {
     35       if( el[index].id == tagId )
     36       {
     37         el[index].id = prefixId + which++;
     38         el[index].display = "inline";
     39       }
     40     }
     41   }
     42   function Init()
     43   {
     44     NumberIncremental( "div", "Blocker", "Block" );
     45     NumberIncremental( "a", "Collapser", "Collapse" );
     46     NumberIncremental( "a", "Expander", "Expand" );
     47     Expand( "Expand0" );
     48     for( index=1;; index++ )
     49     {
     50       if( document.getElementById( "Block"+index ) )
     51         Collapse( "Collapse"+index );
     52       else
     53         break;
     54     }    
     55   }
     56   //-->
     57   </script>
     58 </head>
     59 
     60 <body onload="Init();">
     61 <table>
     62 <tr>
     63 <td align="center" nowrap width="35">
     64 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
     65 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
     66 </td>
     67 <td width="98%">Class.1 (<span class="ver">1.0.1</span> - <span class="ver">1.0.6</span>)</td>
     68 </tr>
     69 </table>
     70 <div id="Blocker">
     71 <pre>
     72 Text 1 &quot;1&quot;.
     73 Text 1 &quot;2&quot;.
     74 Text 1 &quot;3&quot;.
     75 End.
     76 </pre>
     77 </div>
     78 
     79 <table>
     80 <tr>
     81 <td align="center" nowrap width="35">
     82 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
     83 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
     84 </td>
     85 <td width="98%">Class.2 (<span class="ver">2.0.1</span> - <span class="ver">2.0.5</span>)</td>
     86 </tr>
     87 </table>
     88 <div id="Blocker">
     89 <pre>
     90 Text 2 &quot;1&quot;.
     91 Text 2 &quot;2&quot;.
     92 Text 2 &quot;3&quot;.
     93 End.
     94 </pre>
     95 </div>
     96 
     97 <table>
     98 <tr>
     99 <td align="center" nowrap width="35">
    100 <a id="Collapser" onclick="Collapse(this.id);" class="close button">&nbsp;-&nbsp;</a>
    101 <a id="Expander" onclick="Expand(this.id);" class="open button">&nbsp;+&nbsp;</a>
    102 </td>
    103 <td width="98%">Class.3 (<span class="ver">3.0.1</span> - <span class="ver">3.0.5</span>)</td>
    104 </tr>
    105 </table>
    106 <div id="Blocker">
    107 <pre>
    108 Text 3 &quot;1&quot;.
    109 Text 3 &quot;2&quot;.
    110 Text 3 &quot;3&quot;.
    111 End.
    112 </pre>
    113 </div>
    114 </body>
    115 </html>
    打开
  • 相关阅读:
    2019-2020-1学期20192401《网络空间安全专业导论》第一周学习总结
    14201771010119穷吉
    13201771010119穷吉
    12穷吉201771010119
    11201771010119穷吉
    实验10穷吉201771010119
    实验九201771010119穷吉
    201771010119穷吉第八周
    七次201771010119穷吉
    实验六20177101010119穷吉
  • 原文地址:https://www.cnblogs.com/sakaras/p/6295338.html
Copyright © 2011-2022 走看看