模仿唯品会制作导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>唯品会</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
*{margin:0px;padding:0px;}
a{text-decoration:none;color:#666;font-size:15px;display:inline-block;}
div span{color:#999;}
.clear{clear:both;}
.header{width:1400px;height:35px;background-color:#F5F5F5;}
.centent{width:1000px;margin:0px auto;text-align:center;line-height:35px;}
.centent-left{width:100px;height:35px;float:left;}
.centent-right{width:800px;height:35px;float:right;}
.centent-right a{display:inline-block;padding:0px 8px;}
.a1:hover{color:#F06;}
#a2:hover{background:#FFF;}
</style>
</head>
<body>
<div class="header">
<div class="centent">
<div class="centent-left">
<a href style="color:#333333">甘肃省 <i class="fa fa-caret-down"></i></a>
</div>
<div class="centent-right">
<a href class="a1" id="a2">请登录</a><span>/</span>
<a href class="a1">注册</a><span>/</span>
<a href><i class="fa fa-gift" style="color:#F06"></i> 签到有礼</a><span>/</span>
<a href class="a1">我的订单</a><span>/</span>
<a href class="a1" id="a2">我的特卖 <i class="fa fa-caret-down"></i></a><span>/</span>
<a href class="a1" id="a2">会员俱乐部 <i class="fa fa-caret-down"></i></a><span>/</span>
<a href class="a1" id="a2">客户服务 <i class="fa fa-caret-down"></i></a><span>/</span>
<a href class="a1" id="a2"><i class="fa fa-mobile fa-lg"></i> 手机版</a><span>/</span>
<a href class="a1" id="a2">更多 <i class="fa fa-caret-down"></i></a>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
