菜单项中间用斜线分开的CSS导航条

2024-09-05 12:20:10

字体：大中小

来源：转载

供稿：网友

菜单项中间用斜线分开的CSS导航条，带了一点个性色彩，其实除了中间用了一个斜线图片外，其它地方几乎和一般的CSS菜单一样的原理，所以不要感到神秘。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>带斜线的导航条-WWW.VeVb.COM</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body {	margin: 0;	padding: 0;	font-family: Verdana, Arial, sans-serif;	font-size: small;	}	#header {	padding: 20px;	background: #333;	border-bottom: 1px solid #fff;	}		#header h1 {	padding: 0;	margin: 0;	color: #ccc;	font-size: 180%;		}	#nav {	float: left;	width: 100%;	margin: 0;	padding: 0;	list-style: none;	background: #ccc;	border-bottom: 1px solid #999;	}	#nav li { 	float: left;	margin: 0;	padding: 0;	}		#nav a {	float: left;	display: block;	padding: 6px 30px 6px 5px;	text-decoration: none;	font-weight: bold;	font-size: 90%;	color: #666;	background: #ccc url(/jscss/demoimg/200907/nav_slant.gif) no-repeat top right;	}	#nav #nav-1 a {	padding-left: 20px;	}	#nav a:hover {	color: #000;	}	</style></head><body><div id="header"><h1>源码爱好者</h1></div><ul id="nav">	<li id="nav-1">网站首页</li>	<li id="nav-2">CSS教程</li>	<li id="nav-3">JavaScript点滴</li>	<li id="nav-4">Ajax拾趣</li></ul></body></html>

上一篇：CSS Tab 滑动导航

下一篇：很平和的一个CSs圆角导航