关于html和css，就想找一下实例去练习。
简单的导航栏：
<!DOCTYPE html>
<html>
<head>
<title>The navigation bar</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">Back</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>
.nav ul {
width: 980px;
border: 1px solid #000;
margin: 0px auto 0px auto;
}
.nav ul li {
float: left;
list-style-type: none;
}
.nav ul li a {
width: 80px;
height: 28px;
line-height: 28px;
background: blue;
margin: 5px 10px;
font-size: 12px;
display: block;
text-align: center;
text-decoration: none;
}
.nav ul li a:hover {
width: 78px;
height: 26px;
line-height: 28px;
border: 1px solid yellow;
color: blue;
background: #FFF;
}
当鼠标移动的时候会变色