abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘宝小导航</title><link rel="stylesheet" type="text/css" href="font-awesome
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝小导航</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin:0px; padding:0px;}
.clear{clear:both;}
a{color:#6C6C6C; text-decoration:none;}
li{list-style:none; font-size:12px;}
span{margin:0 6px;}
.t_color{color:#F22E00;}
.l{float:left;}
.r{float:right;}
.header{width:100%; background:#F5F5F5;} /*导航条整条DIV*/
.header_content{width:1190px; height:37px; margin:0 auto;} /*导航条居中DIV*/
.header_l{}
.header_r{}
.header_li{line-height:37px; padding:0 5px;} /*头部的列表项*/
.header_ul_ul{display:none;} /*下拉菜单无序列表*/
.header_li:hover .header_a{color:#F22E00;} /*移上列表项，改变带A链接的文字颜色*/
.header_li1:hover .header_ul_ul{display:block;} /*移上包含下拉列表的列表项，显示下拉无序列表*/
.header_li1:hover{background:#fff;} /*移上包含下拉列表的列表项，改变背景颜色*/
.header_ul_ul li:hover{background:#F5F5F5;} /*移上下拉列表项，显示对应列表项背景色*/
.header_ul_ul{margin:5px -5px; border:1px solid #F5F5F5; border-top:none;}
/*1.为什么不设置下拉列表会自动有上级列表项的边距呢？ 2.如何让下拉列表边框连接上上方边框且保持一定的白色外边距*/
.header_ul_ul li{padding-left:5px; line-height:25px;}
</style>
</head>
<body>
<div>
<div>
<ul>
<li class='header_li l header_li1'>中国大陆<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">全球</a></li>
<li><a href="">中国大陆</a></li>
<li><a href="">香港</a></li>
</ul>
</li>
<li class='header_li l'><a href="#" class='header_a t_color'>亲,请登录</a></li>
<li class='header_li l'><a href="#">免费注册</a></li>
<li class='header_li l'><span></span><a href="#">手机逛淘宝</a></li>
</ul>
<ul>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-bars t_color"></span>网站导航</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">亚马逊</a></li>
<li><a href="">京东商城</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">联系客服</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">消费者客服</a></li>
<li><a href="">卖家客服</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">千牛卖家中心</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">免费开店</a></li>
<li><a href="">已卖出的宝贝</a></li>
</ul>
</li>
<li class='header_li r'>
<a href="#">商品分类</a>
<span></span><span>|</span>
</li>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-star"></span>收藏夹</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">收藏的宝贝</a></li>
<li><a href="">收藏的店铺</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-cart-plus t_color"></span>购物车</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">查看我的购物车</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">我的淘宝</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">已购买的宝贝</a></li>
<li><a href="">我的足迹</a></li>
</ul>
</li>
</ul>
<div></div>
</div>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-03 13:22:02
Teacher's summary：完成的不错。下次把代码缩进，看着整齐。继续加油