zoukankan      html  css  js  c++  java
  • 用CSS实现竖向圆角效果的折叠菜单代码

    代码简介:

    用CSS实现圆角效果,竖向排列,可折叠、可展开,自动响应鼠标运作,内容定制方便,希望你喜欢。

    代码内容:

    <html>
    <head>
    <title>用CSS实现竖向圆角效果的折叠菜单代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    #menu {
       font-size:12px;
       height:380px;
       margin:0; 
       padding:0; 
       180px;
       overflow:hidden; 
       background:#f0f0f0;
       list-style:none;
       border-left:1px solid #DDD; 
       border-right:1px solid #DDD;
    }
    #menu li a {
       display:block; 
       text-decoration:none; 
       color:#00b; 
       margin:0; 
       100%;
       }
    #menu li a span {
       display:none; 
       color:#000;
       height:120px
       }
    #menu li a.one span {
       display:block; 
       margin:0 10px;
    }
    #menu li a:hover {
       background:#f1f1f1;
       }
    #menu li a:hover span {
       display:block; 
       margin:0 10px; 
       cursor:pointer;
    }
    #menu .h2 {
       margin:0 5px; 
       padding:0; 
       color:#808; 
       font-variant:small-caps; 
       border:0;
       }
    #menu .h3 {
       margin:0 5px; 
       padding:0; 
       color:#00b;
       }
    .curved {
       180px; 
       margin:0 auto;
       }
    .curved .b1, .curved .b2, .curved .b3, .curved .b4   {
       font-size:1px; 
       display:block; 
       background:#88c;
       overflow: hidden;
       }
    .curved .b1, .curved .b2, .curved .b3 {
       height:1px;
    }
    .curved .b2, .curved .b3, .curved .b4 {
       background:#f0f0f0; 
       border-left:1px solid #DDD; 
       border-right:1px solid #DDD;
       }
    .curved .b1 {
       margin:0 4px; 
       background:#DDD;
       }
    .curved .b2 {
       margin:0 2px; 
       border-0 2px;
       }
    .curved .b3 {
       margin:0 1px;
       }
    .curved .b4 { 
       height:2px;
       margin:0px;
       }
    -->
    </style> 
    </head>
    <body>
    <div class="curved">
    <b class="b1 c1">
    </b>
    <b class="b2 c2">
    </b>
    <b class="b3 c3">
    </b>
    <b class="b4 c4" ></b>
       <ul id="menu">
         <li>
          <a   href="#nogo">
           <b class="h2">ASP CODE</b><br />
          <span>本类ASP源代码分享交流区,大量精品的ASP源代码供初学者学习研究,希望你喜欢!</span>
          </a>
         </li>
         <li>
          <a href="#nogo">
           <b class="b1"></b>
           <b class="b2"></b>
           <b class="h2">PHP CODE</b><br />
           <span>本类PHP代码分享发布区,欢迎爱好者和我们一起交流进步提高,欢迎来来到WebDm.cn</span>
          </a>
         </li>
         <li>
          <a href="#nogo">
           <b class="b1"></b>
           <b class="b2"></b>
    <b class="h2">JSP CODE</b><br />
    <span>本类JSP代码学习区,不错吧,JSP学习区,热烈欢迎您的加盟。</span> 
         </a>
         </li>
     </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/06aecdb7-8849-4e68-adb0-03cf6e6ca0c2.html

  • 相关阅读:
    电脑性能提升三
    电脑实用小技巧
    自定义windows开机声音
    电脑性能提升一
    rpm和yum软件管理
    Linux网络技术管理及进程管理
    RAID磁盘阵列及CentOS7系统启动流程
    Linux磁盘管理及LVM讲解
    Linux计划任务及压缩归档
    Android Studio 常用快捷键及常用设置
  • 原文地址:https://www.cnblogs.com/webdm/p/2025439.html
Copyright © 2011-2022 走看看