簡單漂亮的導航條

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   class="iwvjtn8m0"   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管理菜單