摘要：淘宝导航栏<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="font-awesome/css/font-awesome.
淘宝导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style type="text/css">
*{margin:0px;padding:0px;}
nav{width:100%;background:#f5f5f5;}
.header{width:1200px;height:40px;margin:0 auto; line-height: 40px;}
.header li{list-style: none;float:left;font-size:10px;padding-left:10px;}
.header a{text-decoration:none;color:#3C3C3C;}
.l{width:300px;height:40px;float:left;}
.r{width:600px;height:40px;float:right;}
.r li{padding-left:18px;}
.sp{clear:both;}
</style>
</head>
<body>
<nav>
<div>
<ul>
<li><a href="" >中国大陆</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><a href="" style="color:#f22e00">亲，请登录</a></li>
<li><a href="">免费注册</a></li>
<li><a href="">手机逛淘宝</a></li>
</ul>
<ul>
<li><a href="">我的淘宝</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><i class="fa fa-cart-plus" style="color:red;padding-left:5px"></i><a href="">购物车</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><i class="fa fa-star"></i><a href="">收藏夹</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><a href="">商品分类</a></li>
<li><a href="" style="padding-left:10px;border-left: 1px solid #ccc;">卖家中心</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><a href="">联系客服</a><i style="padding-left:10px" class="fa fa-angle-down"></i></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</nav>
</nav>
</nav>
</body>
</html>
批改老师：韦小宝批改时间：2019-03-11 17:05:52
老师总结：一个网站的导航对于网站来说是非常重要的部分 在写导航的时候一定要注意到美观
