开发工程师开始写代码前，需要和相关人员先确认清楚需求。
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*解决不同浏览器兼容性问题*/
body,div,ul,li,a{
margin: 0px;
padding: 0px;
}
#navi-bar {
width: 960px;
height: 35px;
background-color: #f7f7f7;
margin: 0 auto;
margin-top: 30px;
border-radius: 3px;
}
#navi-bar ul {
width: 960px;
height: 35px;
}
#navi-bar ul li {
list-style: none;
float: left;
background-color: #f7f7f7;
height: 35px;
width: 100px;
text-align: center;/*水平居中*/
line-height: 35px;/*垂直居中*/
border-radius: 3px;
/*border: 1px solid #000;*/
/*padding: 0 10px;*/
}
#navi-bar ul li a{
font-size: 14px;
color:#8790a1;
text-decoration:none;
display: block;
background-color: 35px;
padding: 0 10px;
height: 35px;
}
#navi-bar ul li a:hover{
background-color:#85ce02;
color: #fff;
font-size:16px;
border-radius: 3px;
}
</style>
<body>
<div id="navi-bar">
<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>