摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/f
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.top-bar{width: 100%;background: #000;text-align: center;}
.bar-left {float: left;}
.bar-left i{color: #FFFFFF;}
.bar-left ul li{float: left;list-style: none;font-size: 10px;width: 70px;line-height: 40px;color:#C3C5C6;}
.bar-left li:hover{background: #363C41;color: #FFFFFF;border-bottom:2px solid #87CEEB;}
.bar-right{float: right;}
.bar-right ul li{float: left;line-height: 40px;width: 30px;}
.bar-right i{color: #FFFFFF;}
.message:hover{background: #363C41 ;}
.bar-left li:hover i{transform: rotateX(180deg);}
</style>
<body>
<div class="top-bar">
<div class="bar-left">
<ul>
<li>首页</li>
<li>视频教程</li>
<li>社区问答</li>
<li>编程字典 <i class="fa fa-sort-desc"></i></li>
<li>手册下载</li>
<li>工具下载</li>
<li>类库下载</li>
<li>菜鸟学堂</li>
</ul>
</div>
<div class="bar-right">
<ul>
<li class="message"><i class="fa fa-envelope-open-o"></i></li>
<li><i class="fa fa-user-circle-o"></i></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
