zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    golang中os/user包用法
    golang中os包用法
    与table有关的布局
    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version
    canvas里调用getImageData的报security的问题
    CSS样式覆盖规则
    windows7文件夹怎样默认图片大图显示?
    Jboss,Tomcat 远程调试配置
    IE(IE6/IE7/IE8)支持HTML5标签
    JS 继承(类式 与 原型式)
  • 原文地址:https://www.cnblogs.com/webdm/p/1983218.html
Copyright © 2011-2022 走看看