• 仿微软中国的滑动门导航菜单代码


    代码简介:模仿微软中国首页的CSS滑动门(TABS),竖向排列的选项卡,比较漂亮,要用到3个图片,点击运行可以看到效果,图片请自行下载。

    代码内容:

    <!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">
    <head>
    <title>仿微软中国的滑动门导航菜单代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    body{margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px}
    p{padding:0; margin:0; line-height:1.5em}
    #wrap{border:1px solid #A2A7AB; margin:20px auto; padding:8px; text-align:left; 500px; background:url
    
    (http://www.webdm.cn/images/20090922/wrap11.jpg)}
    #menu{float:left; 22%; background:url(http://www.webdm.cn/images/20090922/menu11.jpg) no-repeat right 
    
    center}
    #menu ul{list-style:none; margin:0; padding:0}
    #menu li{height:25px; line-height:25px; text-align:right}
    #menu a{color:#000; text-decoration:none; display:block; padding-right:25px}
    #menu a:hover,#menu .on a{background:url(http://www.webdm.cn/images/20090922/over11.jpg) no-repeat right 
    
    center; color:#039}
    #content{float:right; 70%}
    #content h1{font-size:16px; font-weight:normal; margin:0; padding:0; margin-bottom:8px}
    #content ul{list-style:none; margin:0; padding:0}
    #content li{padding:3px}
    #copy{clear:both}
    </style>
    <script type="text/javascript">
    <!--
    //切换到相关页
    function gopage(n) 
    {
      var tag = document.getElementById("menu").getElementsByTagName("li");
      var taglength = tag.length;
    
      for (i=1;i<=taglength;i++)
      {
        document.getElementById("m"+i).className="";
        document.getElementById("c"+i).style.display='none';
      }
        document.getElementById("m"+n).className="on";
        document.getElementById("c"+n).style.display='';
    }
    //-->
    </script>
    </head>
    <body>
    <div id="wrap">
    <div id="menu">
    <ul>
    <li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">Indexs</a></li>
    <li id="m2"><a href="#" onmouseover="javascript:gopage(2)">Services</a></li>
    <li id="m3"><a href="#" onmouseover="javascript:gopage(3)">Codes</a></li>
    <li id="m4"><a href="#" onmouseover="javascript:gopage(4)">Windows</a></li>
    <li id="m5"><a href="#" onmouseover="javascript:gopage(5)">Offices</a></li>
    </ul>
    </div>
    <div id="content">
    <div id="c1">
    <h1>Indexs</h1>
    <ul>
     <li><a href="/" target="_blank">Ajax无刷新评论(ASP.net+Jquery)</a></li><li><a href="/" target="_blank">VB仿
    
    Vista风格真彩色图标按钮控件</a></li><li><a href="/" target="_blank">PHP 生成HTML静态列表分页实例</a></li><li><a 
    
    href="/" target="_blank">乘风ASP多用户计数器Access版 v3.93</a></li>
    </ul>
    </div>
    <div id="c2" style="display:none">
    <h1>Services</h1>
    <ul>
    <li><a href="/" target="_blank">QvodCMS视频点播专家 ASP v1.8</a></li><li><a href="/" target="_blank">ZenPhoto 
    
    PHP图库系统 v1.2.1</a></li><li><a href="/" target="_blank">MyPic 七夜图片管理系统PHP版 v2.0</a></li><li><a 
    
    href="/" target="_blank">Angel Upload PHP多文件上传与下载程序</a></li>
    </ul>
    </div>
    <div id="c3" style="display:none">
    <h1>Codes</h1>
    <ul>
    <li><a href="/" target="_blank">VB版网页照相机(抓取网页并保存为BMP)</a></li><li><a href="/" target="_blank">
    
    将图片地址加入文本框的PHP文件上传程序</a></li><li><a href="/" target="_blank">Mini File Host PHP上传程序 v1.5 
    
    中文版</a></li><li><a href="/" target="_blank">复活小说站(终点小说系统内核)ASP版</a></li>
    </ul>
    </div>
    <div id="c4" style="display:none">
    <h1>Windows</h1>
    <ul>
    <li><a href="/" target="_blank">VB读写PNG并处理为透明背景物操作示例</a></li><li><a href="/" target="_blank">经
    
    典游戏下载:疯狂对对碰J2ME源码版</a></li><li><a href="/" target="_blank">VB支持中文的平滑字体滚动特效
    
    </a></li><li><a href="/" target="_blank">给VB6编辑器添加鼠标滚轮的功能</a></li>
    </ul>
    </div>
    <div id="c5" style="display:none">
    <h1>Offices</h1>
    <ul>
    <li><a href="/" target="_blank">支持断点续传带进度条的VB下载控件</a></li><li><a href="/" target="_blank">《代码
    
    大全》中文第一、二版(PDF)</a></li><li><a href="/" target="_blank">VB根据数字报语音的程序</a></li><li><a 
    
    href="/" target="_blank">《数据库系统概念》电子版 (PDF)</a></li>
    </ul>
    </div>
    </div>
    <div id="copy">
    <p>© 2009 Design by <a href="/">WebDn.Cn</a></p>
    </div>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/9847ecdb-1787-4545-9479-992bfa3f75b4.html

  • 相关阅读:
    第12组 Beta冲刺(2/5)
    第12组 Beta冲刺(1/5)
    第12组 Alpha事后诸葛亮
    第12组 Alpha冲刺(6/6)
    第12组 Alpha冲刺(5/6)
    第12组 Alpha冲刺(4/6)
    第12组 Alpha冲刺(3/6)
    第12组 Alpha冲刺(2/6)
    Why I start blogging.
    第二十章 更新和删除数据
  • 原文地址:https://www.cnblogs.com/webdm/p/2010119.html
Copyright © 2020-2023  润新知