• Css实现的鼠标滑动选项卡菜单代码


    代码简介:

    流行鼠标滑动菜单,实际上这是一个大家常说的滑动门特效,鼠标经过后相应版块随之变化。

    代码内容:

    <html>
    <head>
    <title>Css实现的鼠标滑动选项卡菜单代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    }
    #header {
    background-color: #ffffff;
    height: 286px;
     687px;
    margin: 0px;
    padding: 0px;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    }
    #menu {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }
    #menu li {
    list-style:none;
    display: block;
     137px;
    height: 23px;
    text-align: center;
    float: left;
    margin: 0px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 23px; height: 23px
    }
    .sec1 { background-image: url(http://www.webdm.cn/images/20090919/btn_bg.gif);float: left;list-style-type: none; height: 23px;border-right:1px 
    
    solid #B0BEC7;border-bottom:1px solid #B0BEC7;}
    .sec2 { background: url(http://www.webdm.cn/images/20090919/btn_select.gif);position: relative; height: 23px;border-right:1px solid 
    
    #B0BEC7;border-bottom:1px solid #FFFFFF;color: #FF0000}
    .block { display: block;list-style:none;}
    .unblock { display: none;list-style:none;}
    .pic img {
      padding:  3px;
      border:  1px  solid  #ccc;
    }
    -->
    </style>
    </head>
    <body>
    <script language=javascript>
    function secBoard(n)
    {
    for(i=0;i<menu.childNodes.length;i++)
    menu.childNodes[i].className="sec1";
    menu.childNodes[n].className="sec2";
    for(i=0;i<main.childNodes.length;i++)
    main.childNodes[i].style.display="none";
    main.childNodes[n].style.display="block";
    }
    </script>
    <div id="header">
      <ul id="menu">
        <li onMouseOver="secBoard(0)" class="sec2">WebDm.Cn</li>
        <li onMouseOver="secBoard(1)" class="sec1">ASP</li>
        <li onMouseOver="secBoard(2)" class="sec1">PHP</li>
        <li onMouseOver="secBoard(3)" class="sec1">EXTJS</li>
        <li onMouseOver="secBoard(4)" class="sec1">JSP</li>
      </ul>
      <ul id="main">
        <li class="block">
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</li>
        <li class="unblock">ASP的内容</li>
        <li class="unblock">PHP的内容</li>
        <li class="unblock">EXTJS的内容</li>
        <li class="unblock">JSP的内容</li>
      </ul>
    </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/0988db7c-6736-4857-9065-6e48d17964e4.html

  • 相关阅读:
    聚集索引
    第一天 尝试Thread
    sql 分区函数
    sql 查询表定义
    千万数量级分页存储过程
    成语解释
    sql 分组查询满足条件所以数据
    sql存储过程
    联表更新的反思
    从表保存了主表的id,以分号分隔,怎么样用一条sql搞定主表满足条件的查询? 不希望单独写存储过程,或者后台拆成int后传进来,就一条sql 搞定,一条
  • 原文地址:https://www.cnblogs.com/webdm/p/1983218.html
Copyright © 2020-2023  润新知