摘要：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>layout</title><link rel="stylesheet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#ccc;font-size:13px;}
.header{
width:100%;
/* height:40px; */
background:#f5f5f5;
}
.header_content{
width:1200px;
/* height:40px; */
/* background:green; */
margin:0 auto;
line-height:40px;
}
.header_content a:hover{
color:#FF8901;
}
.header_left{
/* width:300px; */
height:40px;
float:left;
}
.header_left a{
margin-right:5px;
}
.header_right{
width:600px;
height:40px;
/* background:yellow; */
float:right;
}
/*清除浮动 */
.clear{
clear:both;
}
.header_a{
display:inline-block;
height:40px;
width:90px;
/* background-color:yellow; */
text-align:center;
}
.header_a:hover{
background-color:#fff;
}
</style>
</head>
<body>
<!-- 导航条 begin -->
<div class="header">
<div class="header_content">
<div class="header_left">
<a href="" class="header_a">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="" style="color:#FF8901">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝<i class="fa fa-angle-down"></i></a>
<a href=""><span class="fa fa-cart-plus"></span> 购物车</a>
<a href="" class="header_a"><span class="fa fa-star"></span> 收藏夹 <i class="fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<a href="" class="header_a">卖家中心 <i class="fa fa-angle-down"></i></a>
<a href="" class="header_a">联系客服 <i class="fa fa-angle-down"></i></a>
<a href="" class="header_a">网站导航 <i class="fa fa-angle-down"></i></a>
</div>
</div>
<!--清除浮动 -->
<div class="clear"></div>
</div>
<!-- 导航条 end -->
</body>
</html>
批改老师：韦小宝批改时间：2018-11-15 17:58:08
老师总结：下次代码记得加上高亮啊！这次我帮你加了！代码写的很完整！不错！不过缺少总结哦！！课后记得多多联系！！加油吧！
