菜單項(xiàng)中間用斜線分開(kāi)的CSS導(dǎo)航條

2024-09-05 12:20:10

字體：大中小

供稿：網(wǎng)友

菜單項(xiàng)中間用斜線分開(kāi)的CSS導(dǎo)航條，帶了一點(diǎn)個(gè)性色彩，其實(shí)除了中間用了一個(gè)斜線圖片外，其它地方幾乎和一般的CSS菜單一樣的原理，所以不要感到神秘。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>帶斜線的導(dǎo)航條-m.survivalescaperooms.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   class="iwvjtn8m0"   id="header"><h1>源碼愛(ài)好者</h1></div><ul id="nav">	<li id="nav-1">網(wǎng)站首頁(yè)</li>	<li id="nav-2">CSS教程</li>	<li id="nav-3">JavaScript點(diǎn)滴</li>	<li id="nav-4">Ajax拾趣</li></ul></body></html>

上一篇：CSS Tab 滑動(dòng)導(dǎo)航

下一篇：很平和的一個(gè)CSs圓角導(dǎo)航