简单漂亮的导航条

2024-09-05 12:20:13

字体：大中小

来源：转载

供稿：网友

简单漂亮的导航条，半弧形的菜单背景，鼠标放上变色，而且是不同的颜色，现在流行的一种菜单样式，个人很喜欢。

<!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> <BODY>  <DIV id=navigation> 	<UL> 	<LI id=current><SPAN>源码首页</SPAN> 	<LI><SPAN>博客</SPAN> 	<LI><SPAN>源码博客</SPAN> 	<LI><SPAN>网页特效</SPAN> 	<LI><SPAN>分类导航</SPAN> 	<LI><SPAN>网站留言</SPAN> </LI>	</UL>  </DIV>  </BODY></HTML>

上一篇：不使用图片仿Windows右键菜单

下一篇：新浪博客左侧的Blog管理菜单