摘要：制作导航有多种方法，利用字体库实现小图标，但是我没有弄出来，网老师看一下。<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><link href="style/index.css" rel=&q
制作导航有多种方法，利用字体库实现小图标，但是我没有弄出来，网老师看一下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="style/index.css" rel="stylesheet" type="text/css">
<link href="style/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<div class="header_content">
<div class="header_feft">
<a href="" class="header_a">中国大陆 <i class=" fa fa-angle-down"></i></a>
<a href="" style="color: rgba(220,48,51,1.00)">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝<span class=" fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-cart-plus"></span>购物车<i class=" fa fa-angle-down"></i></a>
<a href="" class="header_a"><span class="fa fa-star"></span>收藏夹<i class=" fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<a href="" class="header_a">卖家中心<i class=" fa fa-angle-down"></i></a>
<a href="" class="header_a">联系客服<i class=" fa fa-angle-down"></i></a>
<a href="" class="header_a">网站导航<i class=" fa fa-angle-down"></i></a>
</div>
</div>
<div class="cl"></div>
</div>
</body>
</html>
css样式
*{margin: 0px; padding: 0px;}
a{text-decoration: none;color: rgba(22,19,19,1.00);font-size: 13px;}
.cl{clear: both;}
.header{width: 100%;background-color: #f5f5f5;}
.header_content{width: 1200px;margin: 0px auto;line-height: 40px;}
.header_feft{height: 40px;float: left;}
.header_feft a{margin-left: 5px;}
.header_content a:hover{color: rgba(226,28,31,1.00);}
.header_right{height: 40px;float: right;}
.header_right a{margin-left: 5px;}
.header_a{display: inline-block;height: 40px;width: 90px;text-align: center;}
.header_a:hover{background-color: rgba(244,231,231,1.00);}
