摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display：inline-bl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display：inline-block</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
* {margin: 0px;padding: 0px;}
body {width: 100%;height: 100%;font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
.top_nav {height: 40px;background: #333333;line-height: 40px;}
.top_nav div{font-size: 12px;color: #b0b0b0;}
.top_nav div span {margin-left: 0.5em;color: #424242;}
.top_nav_left {float: left;width: 650px;height: 40px;margin-left: 30px;}
.top_nav_right {float: right;width: 260px;height: 40px;text-align: right;margin-right: 12px;}
.top_nav_shop{ margin-right:12px; color: #424242;font-sze: 13px;}
.top_nav_shop{display: inline-block;background: #424242;height:39px; width: 120px;text-align: center;color: #424242;border: 0px ;}
.top_nav div a:hover {color: #fff;}
.top_nav_app_download a img{height: 75px;width: 75px;padding-top: 20px;}
.top_nav_shop:hover{color: #ff6700; background: #fff;}
</style>
</head>
<body>
<div class="top_nav">
<div class="top_nav_left">
<a>小米商城</a><span>|</span>
<a>MIUI</a><span>|</span>
<a>IoT</a><span>|</span>
<a>云服务</a><span>|</span>
<a>金融</a><span>|</span>
<a>有品</a><span>|</span>
<a>小爱开放平台</a><span>|</span>
<a>政企服务</a><span>|</span>
<a >下载app</a><span>|</span>
<a>Select Region</a>
</div>
<div class="top_nav_right">
<a>登陆</a><span>|</span>
<a>注册</a><span>|</span>
<a>消息通知</a>
<div class="top_nav_shop">
<i class="fa fa-cart-plus" aria-hidden="true"></i>
购物车(0)
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>写案例的时候我试着用浮动和行级块元素去实现导航，发现都可以，但是还是会有一些区别比如说对齐方式。
其他的话就是要及时清除浮动不然影响下面布局。
批改老师：灭绝师太批改时间：2018-11-21 14:20:07
老师总结：导航比较简单，完成的不错，可以尝试不同的导航布局！
