导航布局（作业）
html：
<!DOCTYPE html>
<html>
<head>
<title>淘宝导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="content">
<div class="contentLeft">
<a href="" class="content_a">中国大陆 <i class=" fa fa-angle-down"></i></a>
<a href="" style="color:#ff5000">亲，请登陆</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="contentRight">
<a href="" class="content_a">我的淘宝 <i class=" fa fa-angle-down"></i></a>
<a href="" > <span class="fa fa-cart-plus"></span> 购物车 <i class=" fa fa-angle-down"></i></a>
<a href="" class="content_a"> <span class="fa fa-star"></span> 收藏夹 <i class=" fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<a href="" class="content_a">卖家中心 <i class=" fa fa-angle-down"></i></a>
<a href="" class="content_a">联系客服 <i class=" fa fa-angle-down"></i></a>
<a href="" class="content_a">网站导航 <i class=" fa fa-angle-down"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS：
*{margin: 0px; padding: 0px;}
a{text-decoration: none; color: #000; font-size: 13px; }
.header{ width: 100%; height: 40px; background-color: #f5f5f5; }
.content{ width: 1200px; margin: 0px auto;line-height: 40px; }
.contentLeft{ height: 40px; float: left; }
.contentLeft a{
margin-right: 5px;
}
.contentLeft a:hover{
color: #ff5000;
}
.contentRight{ height: 40px; background-color: pink; float: right; }
.contentRight a{
margin-right: 5px;
}
.clear{ clear:both; }
.content_a{
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
}
.content_a:hover{
background-color: #fff;
}
总结：发现布局真的是一件精细活儿，需要很细心，很耐心，很用心。不知道自己能做到什么地步。