Monthai：导航布局实践总结
开始之前考虑几个问题：
明确布局效果，后期需要反复确认细节；
实现方法：使用何种元素，元素之间的包裹关系；规划class方案，以便设置样式；
可能出现的问题：float属性继承关系理解不透彻，加上clear作为防控。
实践中注意到的问题：
元素使用：使用div划分布局结构，使用a链接设置跳转内容。
布局基本思路是分为left、right两部分，由content包裹，再上一级是header；content不是顶级，因为还有一条灰色色带header；
header的宽度是100%；高度通过line-height: 25px统领content、left、right高度，不再设置height属性；采用该方法时，可同时设置height，但需要大于line-height才能体现，需要注意的是，下级div只会继承line-height，而不会继承height设置。
content位于header下方，width设为有效宽度；left设置左浮动，right设置右浮动以及右对齐；
.ct_left{width:400px; float: left;}
.ct_right{width:700px; float: right; text-align: right;}必须设置clear: both来清除浮动样式，否则造成header色带消失【原理不明】。
//样式
*.clear{clear: both;}
//标签
<div class="clear"></div>引用Font Awesome：
首先在head部分用link引用fa的css文件，引用图表时使用<i>或者<span>标签，class名称遵循官方说明，标签之间内容为空。
图标颜色继承文本颜色，个别图标颜色不统一，可通过行内样式设置；图标与文字之间的空隙可使用【 】设置（可多个并用）。
<i class="fas fa-shopping-cart" style="color: #FF0036;"></i>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tmall Navigation</title>
<link rel="stylesheet" type="text/css" href="css/fa/css/all.min.css"/>
<style type="text/css">
*{margin: 0px; padding: 0px;}
*.clear{clear: both;}
.header{width: 100%; line-height: 25px; background: #F2F2F2;}
.hd_content{width: 1200px; margin: 0px auto;}
.ct_left{width:400px; float: left; }
.ct_right{width:700px; float: right; text-align: right;}
a{text-decoration:none; margin: 0px 10px; font-family: 宋体; font-size: 13px; color: #999999;}
a:hover{color: #FF0036; text-decoration: underline;}
#text01:hover{text-decoration: none;}
</style>
</head>
<body>
<div class="header">
<div class="hd_content">
<div class="ct_left">
<a href=""><i class="fas fa-home" style="color: #FF0036;"></i> 天猫首页</a>
<a id="text01" href="" >喵，欢迎来天猫</a>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div class="ct_right">
<a href="">我的淘宝 <i class="fas fa-caret-down" aria-hidden="true"></i>
<!-- <ul>
<li>已买到的宝贝</li>
<li>已卖出的宝贝</li>
</ul> -->
</a>
<a href=""><i class="fas fa-shopping-cart" style="color: #FF0036;"></i> 购物车</a>
<a href="">收藏夹 <i class="fas fa-caret-down"></i>
<!-- <ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul> -->
</a>
<a href="">淘宝网</a>
<a href="">商家支持 <i class="fas fa-caret-down"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>