摘要：4.1常用导航布局案例：下载字体库（fontawesome），<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>link引入字体库 <i class=" fa
4.1常用导航布局案例：
下载字体库（fontawesome），<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>link引入字体库 <i class=" fa fa-angle-down" ></i>选择字体库图标 (好像只能有class来设置)
转义字符 表示1个空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin: 0px;padding: 0px;}
.main{height: 35px;background-color:#F2F2F2; }
ul li{list-style: none;}
.main_nav{width: 65%;height: 35px;margin: 0px auto;}
.main_nav_left{float: left;}
.main_nav_left ul li{height: 35px;float: left;text-align: center;line-height: 35px;font-size: 13px;}
a{text-decoration: none;}
em{font-style: normal;color:#A5A5A5; }
a{color: #A5A5A5;}
.main_nav a:hover{color: #FF0036;}
.main_nav_a{display: inline-block;height: 35px;padding: 0px 8px;}
.main_nav_a:hover{background-color:white;text-decoration: underline;}
.main_nav_right{float: right;}
.main_nav_right ul li{float: left;height: 35px;text-align: center;line-height: 35px;font-size: 13px;}
</style>
</head>
<body>
<div class="main">
<div class="main_nav">
<div class="main_nav_left">
<ul>
<li><em>喵，欢迎来天猫 </em></li>
<li><a href="#">请登录 </a></li>
<li><a href="#">免费注册</a></li>
</ul>
</div>
<div class="main_nav_right">
<ul>
<li><a href="#"class="main_nav_a">我的淘宝<i class="fa fa-angle-down"></i></a></li>
<li><a href="#"> 购物车 </a></li>
<li><a href="#"class="main_nav_a">收藏夹<i class="fa fa-angle-down"></i></a></li>
<li><a href="#"> 手机版 </a></li>
<li><a href="#">淘宝网<i class="fa fa-angle-down"></i></a></li>
<li><a href="#"class="main_nav_a">商家支持</a></li>
<li><a href="#"class="main_nav_a"><span class="fa fa-bars"></span> 网站导航</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>请老师指出我上面的做法是否合理，或者有更加便捷的方法；请指出！谢谢！
批改老师：灭绝师太批改时间：2018-12-26 17:42:03
老师总结：完成的不错，导航布局代码精简，继续保持奥！
