简单漂亮的导航条

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

简单漂亮的导航条

标签：导航条　时间：2009-07-19　已阅读：
简单漂亮的导航条，半弧形的菜单背景，鼠标放上变色，而且是不同的颜色，现在流行的一种菜单样式，个人很喜欢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>导航条</TITLE>
<style type="text/css">
body {background-color:#333;}
#navigation {
background: #333  ;
border-bottom: 1px solid #A1A1A1  ;
margin: 0;
padding: 0;
font-size:9pt;
	}
	#navigation ul, #navigation ul li {
	        list-style: none;
	        margin: 0;
	        padding: 0;
	}
	#navigation ul {
	        padding: 5px 0 5px;
	        text-align: center;
	}
	#navigation ul li {
	        display: inline;
	}
	#navigation ul li a {
	        background: url(/jscss/demoimg/200907/atableft.gif) no-repeat left top;
	        color: #FFF;
	        text-decoration: none;
	        padding: 5px 0;
	}
	#navigation ul li span {
	        background: url(/jscss/demoimg/200907/atabright.gif) no-repeat right top;
	        padding: 5px 7px 5px 3px;
	        margin: 4px 0 4px 4px;
	}
	#navigation ul li a:hover span {
	        text-decoration: none;
	        background-position: 100% -75px;
	}
	#navigation ul li a:hover {
	        background-position: 0 -75px;
	}
	#navigation #current a {
	        background-position: 0 -150px;
	}
	#navigation #current a span {
	        background-position: 100% -150px;
	}
	/*\*//*/
	#navigation ul li a {
	        display: inline-block;
	        white-space: nowrap; 
	        width: 1px;
	}
	#navigation ul {
	        padding-bottom: 0;
	        margin-bottom: -1px;
	}
	
	/*\*/
	* html #navigation ul li a {
	        padding: 0;
	}
  </style>
 </HEAD>

简单漂亮的导航条

本类推荐代码

本类阅读排行

最新源码下载