常用导航条-当当图书
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航条</title>
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/fontawesome.min.css">
<style type='text/css'>
*{margin:0px;padding:0px;}
.header{width:100%;height: 40px;background-color: #f5f5f5;}
.content{width:1200px;height:40px;background-color: #f5f5f5;margin:auto;text-align: center;line-height: 40px;font-size:13px;}
.box1{}
ul {list-style-type: none;font-family: 宋体;float:right;color:#646464;}
ul li {width:70px;float:left;}
#ul1{width:650px;height:40px;}
a {color:#646464;text-decoration: none;}
ul a:hover {color:red;}
</style>
</head>
<body>
<div class="header">
<div class="content">
<div class="box1">
<div class="left1" style="float:left;">送至：北京<i class="fa fa-angle-down"></i></div>
<div class="right1">
<ul id="ul1">
<li class="items" style="width:150px;">欢迎光临当当，请<a href="#">登录</a></li>
<li class="items"><a href="#">成为会员</a> | </i></li>
<li class="items"><a href="#">我的云书房</a> | </li>
<li class="items"><a href="#">我的当当</a><i class="fa fa-angle-down"></i> | </li>
<li class="items"><a href="#">小说投稿</a> | </li>
<li class="items"><a href="#">我要出书</a> | </li>
<li class="items"><a href="#">企业采购</a><i class="fa fa-angle-down"></i> | </li>
<li class="items"><a href="#">客户服务</a></li>
</ul>
</div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</body>
</html>