• 当前项带绿色下划线的CSS导航菜单


    代码简介:

    当前项带下划线的标准CSS菜单,当鼠标停留在菜单某项的时候,菜单下方会出现下载线,清淅的导示出菜单的当前位置,而且色彩与背景的搭配很合理,整个CSS菜单视觉效果挺棒!

    代码内容:

    <html>
    <head>
    <title>当前项带绿色下划线的CSS导航菜单_网页代码站(www.webdm.cn)</title>
    <style>
    body{background-color:#292929;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-align:center}
    #navcontainer{778px}
    #navlist
    		{
    			margin: 0;
    			padding: 0 0 20px 20px;
    			border-bottom: 1px solid #444;
    		}
    		
    		#navlist ul, #navlist li
    		{
    			margin: 0;
    			padding: 0;
    			display: inline;
    			list-style-type: none;
    		}
    		
    		#navlist a:link, #navlist a:visited
    		{
    			float: left;
    			line-height: 14px;
    			margin: 0 10px 4px 10px;
    			/* www.webdm.cn */
    			text-decoration: none;
    			color: #999;
    		}
    		
    		#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
    		{
    			border-bottom: 1px solid #76B41C;
    			padding-bottom: 5px;
    			background: transparent;
    			color: #fff;
    		}
    		
    		#navlist a:hover { color: #fff; }
    </style>
    </head>
    <body>
    <p> </p>
    <p> </p>
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="http://www.webdm.cn" target="_blank" id="current">网页特效</a></li>
    <li><a href="http://www.webdm.cn">网站说明</a></li>
    <li><a href="http://www.webdm.cn">网页代码站</a></li>
    <li><a href="http://www.webdm.cn">网页代码</a></li>
    <li><a href="http://www.webdm.cn">编程资源</a></li>
    <li><a href="/">精品脚本</a></li>
    <li><a href="/">ASP源代码</a></li>
    <li><a href="/">PHP源代码</a></li>
    <li><a href="#">EXT实例</a></li>
    </ul>
    </div>
    
    </body>
    </html>
    
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/0570af31-2142-4ceb-af2b-a4b7c08d9a88.html

  • 相关阅读:
    C#设置窗体最大化且不遮挡任务栏的方法
    C# Base64解码 二进制输出
    导出Excel并下载,但无法定制样式的方法!
    C# List 转Datatable
    查询sql语句耗时的方法!
    301跳转
    文章关键字加链接
    文本框样式默认文本
    JForum二次开发(一)
    MongoDB 学习笔记(三)—— 修改器的使用
  • 原文地址:https://www.cnblogs.com/webdm/p/1954279.html
Copyright © 2020-2023  润新知