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

最新推荐文章于 2023-10-24 11:09:52 发布
转载 最新推荐文章于 2023-10-24 11:09:52 发布 · 1.1k 阅读 · 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>   
 
折叠效果实现
xytgr的博客
09-21 802
在进入正文前，想说明些事，之前写博客的目的主要是给自己做个笔记，方便以后的回顾。所以，有些博客没有写出处。我最近的关于动画交互的博客，大都是从这个博客（杨骑滔博客地址）上学习到的。他还是个学生，但是却立志要做出最棒的用户交互，博主真心佩服。 我的博客中是自己对实践过程的体会和一些总结，但由于博主才疏学浅，如果读者不是很明白可以到他的博客上学习。以后每篇文章都会贴出链接。这篇的链接 这就是要
实现可折叠效果
colorsunlight的专栏
03-10 839
<script type="text/javascript"> $(document).ready(function(){ $(".help h3").click(function(){ $(this).next("p").slideToggle("fast"); }) }) </script> </head> <body> <div class="help"
bs实现折叠效果
yszbrzdd的博客
09-15 294
代码段： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content=&quo
实现折叠效果的JavaScript代码
weixin_30646505的博客
08-30 313
JavaScript可以实现丰富的网页显示效果，为了在Redmine中实现代码折叠，我在网上找了很久，最后终于发现一段JavaScript代码，可以作出折叠效果，实现起来也很简单，代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
最全Pycharm教程（19）——Pycharm编辑器功能之代码折叠
木苒的博客
07-16 2510
转载于 https://blog.youkuaiyun.com/u013088062/article/details/502609851、主题　　在一些情况下，如果某些代码显得不太重要，我们可以通过Pycharm的代码折叠功能将其折叠为一行。在接下来的部分我们将介绍代码折叠功能基本用法。　　2、代码可折叠轮廓线以及折叠开关　　首先，我们观察一下代码左侧的折叠线。这条细线显示在代码左侧，标记了代码块区域。当代码...
Qt Quick实现一个炫酷的折叠动画效果
03-19
为了实现折叠效果，我们需要使用`SequentialAnimation`或`ParallelAnimation`来管理一系列的动画步骤。首先，我们可以使用`RotationAnimation`来改变一面的角度，模拟折叠过程。设置动画的`from`和`to`属性来确定...
html5写一个BUI折叠菜单插件的实现方法
12-30
写一个BUI折叠菜单插件效果预览 控件分析控件结构 一个点击显示隐藏的效果, 并且点击的时候, 会先把展开进行隐藏, 再展开自己的. 从界面上我们来看看结构的设计. <!-- 一般控件最外层就是控件的容器名 --> ...
Vue 实现展开折叠效果的示例代码
10-18
最后，文档还提到了另一种方法来使用Vue实现展开折叠效果。使用了Vue的生命周期钩子来控制过渡效果，例如在before-enter和enter钩子中设置高度和内边距。在before-enter钩子中，定义了高度过渡属性，然后通过Vue的...
CSS+JS实现一个DIV层的展开折叠效果
09-01
本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要创建一个 HTML 结构来容纳我们的内容...
jQuery实现表格展开与折叠的方法
10-24
为了提供更好的用户体验，实现点击一个新的父级行时，自动关闭之前打开的其他父级行，是通过在`this`关键字上下文查找，并使用`hide()`方法来实现的。这样可以保证用户界面的整洁性，避免多个父级行同时处于展开状态...
html折叠下拉效果
06-15
一种折叠下拉效果的实现，css+html+js
HTML jquery实现左侧菜单折叠
01-17
HTML jquery实现左侧菜单折叠，简单易学，适合新手。。。
html5 好看的折叠效果,html5菜单折纸效果
weixin_34792546的博客
06-02 916
类似猎豹浏览器安装时的用户须知效果。点击后效果复制代码代码如下:fold paper effect by gt-柯乐义#wrapper {-webkit-perspective: 55cm;-webkit-perspective-origin: 50% 50%;text-align: center;}.paper {position: relative;height: 40px;width: 5e...
javascript+css代码实现折叠效果
zhangj1012003_2007的专栏
03-17 1123
演示效果截图用到的图片CSS代码* {padding:0; margin:0; font:normal 12px "宋体";text-decoration:none; color:#000;}a {color:#369;}a:hover {color:#f00; text-decoration:underline;}#to
html5 好看的折叠效果,9款HTML5实现的超酷特效
weixin_35662670的博客
06-02 795
canvas画的时钟一款时钟效果，效果非常棒！HTML5画板实现的画图板效果如果你需要整合一个现成的HTML5画板的话， 这个drawingboard.js绝对是个不错的选择，支持颜色选择，undo，清除，画笔等等功能，相信你会喜欢的。CanvasLoader Creator - 免费的在线工具，生成加载动画CanvasLoader是一款免费的在线工具，可以帮助你生成加载动画的脚本，它生成的是自旋...
HTML、CSS和jQuery：实现图片折叠展开的效果
最新发布
风清扬的专栏
10-24 2069
通过这种特效，我们可以让图片在用户的操作下折叠或展开，从而展示更多的内容或细节。上面的示例代码展示了一种简单的实现思路和具体的代码示例。在CSS中，我们为容器设置了默认的宽度、高度和背景颜色，并通过绝对定位将叠加在图片上方的覆盖层定位到底部。然后，通过设置.collapsed类的高度来实现折叠效果。要实现图片折叠展开特效，我们需要通过HTML构建页面结构，通过CSS设置样式，并利用jQuery实现交互效果。下面是一个简单的代码示例，演示了如何使用HTML、CSS和jQuery实现图片折叠展开特效。
vue Element 左侧菜单栏 折叠/展开效果
盖世小可爱的博客
02-28 2322
vue Element 左侧菜单栏 折叠/展开效果
HTML a中怎样实现折叠的效果,jQuery实现全局调用折叠动画效果
weixin_39898248的博客
05-31 238
很早我就写好了这些代码，也优化了好几次，主要是为了提升项目的开发速度。jquery有三种折叠效果，主要是toggle，fadetoggle，以及slidetoggle，它们共同实现了相似但是不同的界面效果，十分好用。但是如果网站上需要有大量的折叠实现，每个地方都写不同的js代码来实现，会变成非常累赘，所以一个全局的调用方法很有必要，一方面精简代码，另一方面提升开发速度。主要代码如下(需要引入jQu...
实现简洁JS折叠菜单效果的方法
为了实现折叠效果，CSS中的`display`属性尤为重要，通常可以使用`display: none;`和`display: block;`来控制菜单项的显示和隐藏。 ```css #menu { width: 100%; background-color: #333; } #menu ul { list-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值