<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #ededf0;
}
div a{
width: 80px;
height: 40px;
/* 先加颜色,能清楚看到文字的具体位置 */
/* background-color: #ededf0; */
/* 切换为行内块 */
display: inline-block;
/* 设置行高 */
line-height: 40px;
/* 去除下划线 */
text-decoration: none;
font-size: 12px;
color: #4c4c4c;
text-align: center;
}
div a:hover{
background-color: #ededf0;
color: #ff8400;
}
/* 从外到内,先宽高背景色,调节内容的位置,控制文字的细节 */
</style>
</head>
<body>
<div>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
效果图