zoukankan      html  css  js  c++  java
  • 蓝色清爽可用做排行的侧边列表滑动门代码

    代码简介:

    一个很节省布局的侧边滑动门,一般用作阅读排行或下载排行,清新风格,没有用到任何的修饰图片,直接拷贝到你的网页里就可以用啦。这还支持多内容切换,也就是可以复制多个门单元以适应需要。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title>蓝色清爽可用做排行的侧边列表滑动门代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    body{font-size:12px;}
    a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
    a:hover{color:#ff0000;text-decoration:underline;}
    #Tab{margin:0 auto;220px;border:1px solid #BCE2F3;}
    .Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;}
    .Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
    .Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;65px;text-align:center;color:#fff;font-
    
    weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;}
    .Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
    .Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}
    .Contentbox ul{list-style:none;margin:7px;padding:0;}
    .Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
    </style>
    <script>
    <!--
    function setTab(name,cursel,n){
    for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
    }
    }
    //-->
    </script>
    </head>
    <body>
    <br><br>
    <div id="Tab">
      <div class="Menubox">
        <ul>
          <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">最新更新</li>
          <li id="menu2" onmouseover="setTab('menu',2,2)" >下载排行</li>
        </ul>
      </div>
      <div class="Contentbox"> 
        <div id="con_menu_1" class="hover">
          <ul>
            <li><a href="/" target="_blank">VB获取数据表名称的一个实例</a></li><li><a href="/" target="_blank">ASP+jQuery无刷新读写数据库操作
    
    </a></li><li><a href="/" target="_blank">VC仿QQ游戏大厅的树型展开菜单控件</a></li><li><a href="http://www.webdm.cn" target="_blank">jQuery浮动层
    
    图片展示特效</a></li><li><a href="/" target="_blank">xhEditor网页编辑器</a></li><li><a href="/" target="_blank">轩溪ASP生成HTML下载系统 
    
    v3.81</a></li><li><a href="/" target="_blank">VB6商品出租管理系统完整源代码</a></li>
          </ul>
        </div>
        <div id="con_menu_2" style="display:none">
          <ul>
            <li><a href="http://www.webdm.cn" target="_blank">VB仿Unix红帽操作系统界面源码</a></li><li><a href="/" target="_blank">Java企业人事管理系
    
    统源码</a></li><li><a href="/" target="_blank">jQuery 动态添加层、拖动层实例</a></li><li><a href="/" target="_blank">Java根据数字报语音的程序
    
    </a></li><li><a href="/" target="_blank">listview控件自定义扩展VB版</a></li><li><a href="/" target="_blank">《深入MIDP2.0工具类别》指导书
    
    </a></li><li><a href="/" target="_blank">《MIDP 图形编程简介》 PDF</a></li>
          </ul>
        </div>
      </div>
    </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/bb9a5d1a-4255-47c4-b1c3-9e82697050d1.html

  • 相关阅读:
    移动端文本编辑器
    jquery移动端日期插件
    Spring 4集成 Quartz2(转)
    json 特殊字符 javascript 特殊字符处理(转载)
    解决使用JavaScriptConvert转换对象为Json时,中文和&符号被转码的问题
    RFID的winform程序心得2
    异步编程模型
    DataGridView获取或者设置当前单元格的内容
    DataGridView修改数据并传到数据库
    把存储过程结果集SELECT INTO到临时表
  • 原文地址:https://www.cnblogs.com/webdm/p/1976855.html
Copyright © 2011-2022 走看看