一个不错的实现折叠效果的方法

转载 于 2006-11-02 15:44:00 发布 · 1.2k 阅读 · 0
文章标签：

#border #table #stylesheet #filter #class #音乐

本文展示了一个音乐网站后台管理菜单的设计方案，包括音乐库、评论、新闻等多个模块的管理选项，采用HTML与CSS实现良好的视觉效果及交互体验。

 

<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <title>菜单</title>   
  <link   href="css.css"   rel="stylesheet"   type="text/css">   
    
  <style>   
  input   
  {   
  border:1px   solid   #618fff;   
  width:100;   
  overflow:visible;   
  }   
  button   
  {   
  border:1px   solid     #618fff;   
    
  width:60;   
  overflow:visible;   
  margin-left:2;   
  cursor:hand;   
  font-size:12;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#eaeaff',   endColorStr='#618fff',   gradientType='0');   
  }   
  body   
  {   
  font-size:12;     
    
  }   
  td   
  {   
  font-size:12;   
  text-indent:3;   
  }   
  th   
  {   
  letter-spacing:10;   
  font-size:12;   
  height:20;   
  color:navy;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#eaeaff',   endColorStr='#618fff',   gradientType='0');   
  }   
    
  table   
  {   
    margin-left:10;   
    border:4px   #618fff   double   ;   
    border-collapse:collapse;     
    width:98%;   
  }   
  textarea     
  {   
  margin-left:10;   
  overflow:visible;   
  width:98%;   
  height:300;   
  border:1px   #618fff   solid;   
  }   
  ul   {   
  margin-top:   0px;   
  margin-right:   0px;   
  margin-bottom:   0px;   
  margin-left:   20px;   
  text-align:   left;   
  }   
  </style>   
  </head>   
    
  <body   onselectstart="document.selection.clear();">   
  <table   width="150"     border="1">   
      <tr>   
          <th>音乐库</th>   
      </tr>   
      <tr>   
          <td>   
    
  <ul>   
  <li><a   href="music/area.asp">大类管理</a></li>   
  <li><a   href="music/artist.asp">歌手管理</a></li>   
  <li><a   href="music/collection.asp">专辑管理</a></li>   
  <li><a   href="music/song.asp">歌曲管理</a></li>   
  <li><a   href="lib_batch.htm">批量上传</a></li>   
  </ul>   
    
    
  </td>   
      </tr>   
  </table>   
    
  <table   width="150"     border="1">   
      <tr>   
          <th>评论</th>   
      </tr>   
      <tr>   
          <td> <ul>   
  <li><a   href="comment/comment.asp">类别管理   </a></li>   
  <li><a   href="comment/com_content.ASP">评论管理</a>   </li>   
                    </ul>   
    
    
      
  </td>   
      </tr>   
  </table>   
    
  <table   width="150"     border="1">   
      <tr>   
          <th>新闻</th>   
      </tr>   
      <tr>   
          <td>   
    
  <ul>   
  <li><a   href="News/news_class_manage.htm">类别管理   </a></li>   
  <li><a   href="News/news_append.htm">发布新闻   </a></li>   
  <li><a   href="News/news_manage.htm">新闻管理</a></li>   
      
  </ul>   
    
    
  </td>   
      </tr>   
  </table>   
    
  <table   width="150"     border="1">   
      <tr>   
          <th>排行</th>   
      </tr>   
      <tr>   
          <td>   
  <ul>   
  <li><a   href="sort/Sort_manage.asp?kind=最受欢迎">最受欢迎排行管理</a></li>   
  <li><a   href="sort/Sort_manage.asp?kind=销售排行">销售排行管理</a></li>   
  </ul>   
    
  </td>   
      </tr>   
  </table>   
    
    
    
    
  <table   width="150"     border="1">   
      <tr>   
          <th>游戏原声</th>   
      </tr>   
      <tr>   
          <td>   
  <ul>   
  <li><a   href="yuansheng/yuansheng_class_manage.asp">类别管理   </a></li>   
  <li><a   href="./common/common_manage.asp?TB=MediaGame&Fields=MediaTitle,Photo,FileName&HK=ID&Title=媒体名称,照片,文件名">文件管理   </a></li>   
  </ul>   
    
  </td>   
      </tr>   
  </table>   
    
  <table   width="150"     border="1">   
      <tr>   
          <th>音乐DIY</th>   
      </tr>   
      <tr>   
          <td> <ul>   
  <li><a   href="diy/diy_class_manage.asp">类别管理   </a></li>   
  <li><a   href="./common/common_manage.asp?TB=MediaDIY&Fields=MediaTitle,Artist,FileName&HK=ID&Title=媒体名称,歌手,文件名">文件管理   </a></li>   
  </ul>   
    
    
  </td>   
      </tr>   
  </table>   
    
  <table   width="150"     border="1">   
      <tr>   
          <th>在线演唱会</th>   
      </tr>   
      <tr>   
          <td>   
  <ul>   
  <li><a   href="./common/common_manage.asp?TB=SingOnline&Fields=Title,Artist,FileName&HK=ID&Title=媒体名称,歌手,文件名">音乐会管理</a></li>   
    
  </ul>   
    
    
  </td>   
      </tr>   
  </table>   
    
    
    
  <table   width="150"     border="1">   
      <tr>   
          <th>版权</th>   
      </tr>   
      <tr>   
          <td>   
  <ul>   
  <li><a   href="./common/common_manage.asp?TB=copyright&Fields=copyright&HK=ID&Title=版权类型">版权类别管理</a>   </li>   
    </ul>   
    
  </td>   
      </tr>   
  </table>   
  <SCRIPT   LANGUAGE="JavaScript">   
  var   TB   =   document.getElementsByTagName("Table")   
  var   TR   
  for(i=0;i<TB.length;i++)   
  {   
  TR   =   TB[i].rows[0];   
  TR.style.cursor="hand";   
  TR.attachEvent("onclick",show)   
  if(i!=0)   
  {   
  TB[i].rows[1].style.display   =   "none";   
  }   
    
  }   
  function   show()   
  {   
  var   TD   =   event.srcElement;   
  var   TB   =   TD.parentElement;   
  while(TB.tagName   !=   "TABLE")   
  {   
  TB   =   TB.parentElement   
  }   
  var   TR   =   TB.rows[1]   
  if(TR.style.display   ==   "none")   
  {   
  TR.style.display   =   ""   
  }   
  else   
  {   
  TR.style.display   =   "none"   
  }   
      
  }   
  </SCRIPT>   
  </body>   
  </html>   
 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值