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">
    <head>
    <title>仿淘宝网的漂亮导航菜单代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    #nav{
    background-image:url(http://www.webdm.cn/images/20090919/navM.gif);
    }
    #nav div{
    background-image:url(http://www.webdm.cn/images/20090919/nav_S.gif);
    float:left;
    4px; 
    height:34px; 
    font-size:0px; 
    margin:0px 4px; 
    background-repeat:no-repeat; 
    background-position:top; 
    background-repeat:no-repeat;
    }
    a.nav{
    display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;
    }
    a.nav span{
    display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;
    }
    a.nav:hover{
    display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url
    
    (http://www.webdm.cn/images/20090919/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;
    }
    a.nav:hover span{
    display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url
    
    (http://www.webdm.cn/images/20090919/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;
    }
    #curTab{
    display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url
    
    (http://www.webdm.cn/images/20090919/nav_On_L.gif); background-position:left center; background-repeat:no-repeat;
    }
    #curTab span{
    display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url
    
    (http://www.webdm.cn/images/20090919/nav_On_R.gif);background-position:right center; background-repeat:no-repeat;
    }
    </style>
    <script language="javascript">
    function $(objId){
    	return document.getElementById(objId);
    }
    function changeId(idName,obj){
    	$(idName).id="";
    	obj.id=idName;
    	obj.blur();
    }
    </script>
    </head>
    <body>
    
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="3"><img src="http://www.webdm.cn/images/20090919/navL.gif" width="3" height="34"></td>
        <td id="nav">
          <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <a href="#" id="curTab" class="nav" onclick="changeId('curTab',this)"><span>网页代码站</span></a>
                <div></div>
                <a href="#" class="nav" onclick="changeId('curTab',this)"><span>最新更新</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>下载排行</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>源码分类</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>网页特效</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>ASP源码</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>PHP源码</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>.NET源码</span></a>
                <div></div>
                <a href="/" class="nav" onclick="changeId('curTab',this)"><span>JAVA源码</span></a>
              </td>
            </tr>
          </table>
        </td>
        <td width="3"><img src="http://www.webdm.cn/images/20090919/navR.gif" width="3" height="34"></td>
      </tr>
    </table>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/a2ea0eae-6693-40f0-90c3-fea3b77e2694.html

  • 相关阅读:
    宝塔面板连接数据库失败
    fastadmin上线部署中遇到访问路径问题
    宝塔部署时,出现“open_basedir restriction in effect”错误
    layui hint:upload is not a valid module
    thinkphp--控制器怎么分配变量到公共模板
    jquey click事件无效
    1.31 SVN代码版本控制
    8.1 性能优化简介
    5.31 Nginx最全面知识
    4.115 Spring的事务管理
  • 原文地址:https://www.cnblogs.com/webdm/p/1982513.html
Copyright © 2011-2022 走看看