-
案例展示
点击会发生颜色的变化,如下图所示:
-
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作导航条</title>
<style>
/*w800,h40,bac*/
nav{width: 800px;height: 40px;background-color:blue;}
/*去边*/
bav ul{margin: 0;padding: 0}
nav ul li{display: inline-block;list-style: none}
nav ul li a{color:aliceblue;text-decoration: none;padding: 10px;font: 1.2em/40px microsoft yahei}
nav ul li a:hover{background-color: #D1F1FF;color: blue}
</style>
</head>
<body>
<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>
</nav>
</body>
</html>