摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"&nb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"><!--引入外部CSS图标框架-->
<title>淘宝导航实战</title>
<style media="screen">
body{margin: 0;padding: 0;font-family:微软雅黑;} /* 清除多余的外边框样式 字体统一微软雅黑*/
.clear{clear: both;} /* 清除浮动带来的影响 */
.header{background:#f5f5f5;font-size:14px;}/*设置最外一层的背景和父级下所以文字大小统一12px*/
.header a{text-decoration: none;color:#6C6C6C;margin-right: 10px;}/*清掉A标签的演示，并设置自己想要的颜色*/
.header_nav{width: 1190px;margin: 0 auto;height: 35px;line-height: 35px;}/*nav导航条设宽1190px，居中显示给高+行高让文字上下居中显示*/
.header_left{float:left;}/*向左浮动，脱离文档流*/
.header_right{float:right;}/*向右浮动，脱离文档流*/
.itext{margin: 0px 0px 0px 10px;}/* 上0px，左0px，下0px，右10px */
.margin-left{margin: 0px 5px 0px 0px;}/* 上0px，左10px，下0px，右0px */
.margin-lr{margin: 0px 10px;}/*左右10px ，上下0px*/
a:hover{color: #ff5000;}/*鼠标划入A标签变色*/
</style>
</head>
<body>
<div> <!-- 头部 -->
<div> <!-- 头部下的 nav 开始-->
<div> <!-- 头部下的左侧部分 开始 -->
<a href="#" style="color:#000;">中国大陆<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i></a>
<a href="#" style="color: #ff5000;">亲，请登陆</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div> <!-- 头部下的左侧部分 结束 -->
<div> <!--头部下的右边部分 开始-->
<a href="#">我的淘宝<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i></a>
<a href="#"><i style="color: #ff5000;" class="fa fa-shopping-cart margin-left" aria-hidden="true"></i>购物车</i></a>
<a href="#"><i class="fa fa-star margin-lr" aria-hidden="true"></i>收藏夹</a>
<a href="#">商品分类<span>l</span></a>
<a href="#">卖家中心<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i></a>
<a href="#">联系客服<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i></a>
<a href="#"><i style="color: #ff5000;" class="fa fa-bars margin-lr" aria-hidden="true"></i>网站导航<i class="fa fa-angle-down margin-lr" aria-hidden="true"></i></a>
</div> <!--头部下的右边部分 结束-->
<div></div>
</div> <!-- 头部下的 nav 结束-->
</div>
</body>
</html>
