• 漂亮的CSS蓝色滑动门式的导航菜单


    代码简介:

    CSS版相当漂亮的滑动门式导航菜单,蓝色系,立体效果,设计的非常精美,希望大家能够喜欢哦。主菜单分为二级,如果想多级,可以看看代码是如何调用的,分级后菜单结构更加明淅,用户体验更好。

    代码内容:

    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>漂亮的CSS蓝色滑动门式的导航菜单_网页代码站(www.webdm.cn)</title>
    <style>
    #top { display: block; text-align: left; height:105px;  position: relative; z-index: 0;}
    .m { margin:0 auto;  970px; }
    body{ font-size:12px;}
    a{
    	color:#333;
    	text-decoration: none;
    }
    a:link {  text-decoration: none; }
    a.blue:link, a.blue:visited { color: #014cc9; text-decoration: none; }
    a.blue:hover, a.blue:active { color: #014cc9; text-decoration: underline; }
    a.org:link, a.org:visited { color: #ff4e00; text-decoration: none; }
    a:hover, a:active, a.org:hover, a.org:active { color: #ff4e00; text-decoration: underline; }
    /* NAVPART */
    #navpart {
    	background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) repeat-x center top;
    	height: 105px;
    	970px;
    	z-index: 0;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	clear: both;
    	position: relative;
    }
    #navpart .sideleft { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) no-repeat left bottom; float: left; height: 105px; 
    
     6px;}
    #navpart .sideright { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) no-repeat right bottom; float: right; height:105px; 
    
     6px}
    /* NAVMENUBAR */
    #navmenubar { height: 32px; float: left; display: inline; margin: 0 -6px;  100%; position: relative; z-index: 3; top:0}
    #hot { background: url(http://www.webdm.cn/images/20100420/sign_hot.gif) no-repeat left top; height: 21px;  19px; position: absolute; 
    
    top: -5px; right: 2px; z-index: 666}
    #navmenubar .sideleft { background: url(http://www.webdm.cn/images/20100420/navmenubg.gif) no-repeat left bottom; float: left; height: 32px; 
    
     6px; display: inline; margin: 0 0 0 8px}
    #navmenubar .sideright { background: url(http://www.webdm.cn/images/20100420/navmenubg.gif) no-repeat right bottom; float: left; height: 32px; 
    
     6px; display: inline; margin: 0 4px 0 -2px}
    /* NAVMENU */
    #navmenubar .navmenu { background: url(http://www.webdm.cn/images/20100420/navmenubg.gif) repeat-x center top; height: 32px; padding: 0; 
    
    margin: 0; float: left; display: inline}
    #navmenubar .navmenu li { float: left; white-space: nowrap; margin: 0px; padding: 0px; display: inline}
    #navmenubar .navmenu li a { background: url(http://www.webdm.cn/images/20100420/navmenutabbg.gif) no-repeat 0 0;  80px; padding: 7px 2px 
    
    5px 0; float: left; line-height: 20px; height: 20px; text-align: center}
    #navmenubar .navmenu li a:hover { background-position: 0 -32px; color: #602800; text-decoration: none; padding: 8px 2px 4px 0}
    #navmenubar .navmenu .current a , #navmenubar .navmenu .current a:hover { background: url(http://www.webdm.cn/images/20100420/navmenutabbg.gif) 
    
    no-repeat 0 -64px; font-weight: 600; color: #FFF; font-size: 14px; padding:7px 2px 5px 0}
    #top #navpart .content {
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	 950px;
    	height:auto;
    }
    .clear { clear: both; display: block; font: 0px/0 sans-serif; height: 0px; overflow: hidden; }
    </style>
    
    	</head>
    <body>
    <div id="top" class="m">
      <div id="navpart">
        <div class="sideleft"></div>
        <div class="sideright"></div>
        <!--NavMenu-->
        <div id="navmenubar">
    
          <div class="sideleft"></div>
          <ul class="navmenu">
    	 
            <li class="current"><a href="/" target="_top" title="首页">首页</a></li>
    		 
    			<li><a href="/"><span>ASP</span></a></li>
                <li><a href="/"><span>PHP</span></a></li>
                
          </ul>
          <div class="sideright"></div>
          <div class="sideleft"></div>
          <ul class="navmenu">
    	  <li><a href="/"><span>源码</span></a></li>
            <li><a href="/"><span>软件</span></a></li>
              <li><a href="/"><span>资讯</span></a></li>
                <li><a href="/"><span>论坛</span></a></li>
                  
    	  </ul>
          <div class="sideright"></div>
        </div>
    
        <div> <div class="content">
     <br /><br />
          <a href="/" target="_blank">网页代码站</a></div> </div>
      </div>
    </div>
    <div class="clear"></div>
    <!--END Header-->
    
    <!--页面布局-->
    
    <br>
    <br>
    <br>
    <br>
    <br>
    <div align="center">------------------------------------------------------------------------------------------<br />
    用DW CS3编辑.... 当前选项卡用<li class="current">调用</div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/2881347d-0263-49aa-b1d4-ca9a78d8734b.html

  • 相关阅读:
    ACM学习历程—Hihocoder 1288 Font Size(暴力 || 二分)
    ACM学习历程—HDU2476 String painter(动态规划)
    ACM学习历程—BestCoder Round #75
    ACM学习历程—Hihocoder [Offer收割]编程练习赛1
    codeforces 154A 贪心
    分治 最大连续和
    二分 连续上升子序列变形 UVA1471
    POJ3614 贪心+优先队列
    Havel-Hakimi定理 POJ1659
    拓扑排序
  • 原文地址:https://www.cnblogs.com/webdm/p/2055266.html
Copyright © 2020-2023  润新知