通过行内块、伪类对导航栏进行设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin:0;
padding:0;
}
div {
700px;
height: 40px;
margin: 0 auto;
background-color: #E3E4E5;
text-align: center;
}
a {
color: #8DD748;
display:inline-block;
line-height:40px;
text-decoration:none;
70px;
height:40px;
}
a:hover{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">化学</a>
<a href="#">历史</a>
<a href="#">体育</a>
<a href="#">物理</a>
<a href="#">生物</a>
</div>
</body>
</html>
效果：
