div+css更换导航背景

最新推荐文章于 2024-07-04 10:00:00 发布

lcxmjk

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量348

点赞数

分类专栏： div+css 文章标签： CSS XHTML HTML

div+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前看到过好多人问关于更换导航背景这个问题，今天在这里现出代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigation</title>
<style>
#nav{
	width:500px;
	font-size:9pt;
}
#nav ul{
	list-style:none;
	margin:0;
	padding:0;
	text-align:left;
}
#nav ul li{
	float:left;
	width:90px;
	height:30px;
	line-height:30px;
	text-align:center;
	margin:0 2px;
}
a{ text-decoration:none;}
#nav a{
	width:90px;
	height:30px;
	background:url(images/nav6.gif) no-repeat;
	float:left;
	text-align:center;
}
#nav a:link{
	color:#000;
}
#nav a:visited{
	color:#000;
}
#nav_1 a:hover{
	background:url(images/nav1.gif) no-repeat;
	color:#FFF;
}
#nav_2 a:hover{
	background:url(images/nav3.gif) no-repeat;
	color:#FFF;
}
#nav_3 a:hover{
	background:url(images/nav4.gif) no-repeat;
	color:#FFF;
}
#nav_4 a:hover{
	background:url(images/nav5.gif) no-repeat;
	color:#FFF;
}
#nav_5 a:hover{
	background:url(images/nav2.gif) no-repeat;
	color:#FFF;
}
</style>
</head>

<body>
<div id="nav">
	<ul>
		<li id="nav_1"><a href="#">我要祝福</a></li>
		<li id="nav_2"><a href="#">我的心愿</a></li>
		<li id="nav_3"><a href="#">我的告白</a></li>
		<li id="nav_4"><a href="#">我要感谢</a></li>
		<li id="nav_5"><a href="#">我要道歉</a></li>
	</ul>
</div>
</body>
</html>