加强版导航栏

效果如下图:
加强版导航栏_第1张图片
这样的导航栏,你的鼠标已经过这个链接,就会变成深绿色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>加强版导航栏案例</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.banner {
				width: 900px;
				height: 243px;
				background-color: pink;
				margin: auto;
				
			}
			.nav {
				width: 900px;
				height: 32px;
				/*background-color: pink;*/
				background: url(img/111.png) repeat-x; 
				margin: auto;
			}
			.nav li {
				float: left;
				
			}
			.nav ul li a {
				display: block;
				width: 80px;
				height: 32px;
				line-height: 32px;
				/*background-color: pink;*/
				/*background: url(img/green1.png) no-repeat;*/
				font-size: 14px;
				text-decoration: none;
				color: #40510a;
				text-align: center;
				
			}
			.nav ul li a:hover {
				background-image: url(img/green1.png);
			}
		</style>
	</head>
	<body>
		<!--banner是广告条-->
		<div class="banner">
			<img src="img/senlin.png" />
		</div>
		<!--nav是导航栏-->
		<div class="nav">
			<ul>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">网站首页</a></li>
			</ul>
		</div>
	</body>
</html>

你可能感兴趣的:(前端,css,html)