abstract：<!doctype html><html><meta charset="utf-8"><title>常用导航布局案例-作业</title><!-- <link rel="stylesheet" type="text/css" href="index.css&
<!doctype html>
<html>
<meta charset="utf-8">
<title>常用导航布局案例-作业</title>
<!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
/*index.css*/
*{margin:0px;padding:0px;}
a{color:#999999;font-size:12px;text-decoration:none;}
.clear{clear:both;}
#header{width:100%;height:30px;background-color:#E3E4E5;}
.header_content{width:1000px;/*height:30px;*/line-height:30px;margin:0px auto;/*background-color:pink;*/}
.header_content a:hover{color:#F10215;}
.header_left{height:30px;float:left;}
.header_right{height:30px;width:720px;float:right;/*background-color:yellow;*/}
.header_right ul li{list-style:none;line-height:30px;width:75px;text-align:center;float:left;}
.tb_span{display:line-block;margin-left:5px;color:#999999;font-size:1px;line-height:1px;}
.header_menu:hover{background:#fff;}
.address_content{display:none;color:#999999;width:80px;height:60px;}
.header_left div:hover .address_content{display:block;}
.address_content ul li{width:40px;height:30px;float:left; list-style:none;font-size:12px;text-align:center;}
.address_content ul li:hover{background-color:#f4f4f4; }
.address_content ul li a{display:block;}
.address_ac a{background-color:#F10215;color:#fff;}
.address_ac a:hover{color:#fff;}
/* 导航中间一个小小的 | 线做不出那个效果.....*/
</style>
<body>
<div id='header'>
<div class='header_content'>
<div class='header_left'>
<div class='header_menu' style='width:60px;text-align:center;'>
<span class='fa fa-map-marker' style='color:#F10215'></span> <a>北京</a>
<div class='address_content'>
<ul>
<li class='address_ac'><a href="">北京</a></li>
<li><a href="">上海</a></li>
<li><a href="">深圳</a></li>
<li><a href="">福建</a></li>
</ul>
</div>
</div>
</div>
<div class='header_right'>
<ul>
<li style='width:150px;'><a href="">你好,请登录</a> <a style='color:#F10215' href="">免费注册</a></li>
<li><a href="">我的订单</a></li>
<li class='header_menu'><a href="">我的京东</a> <i class='fa fa-angle-down'></i></li>
<li><a href="">京东会员</a></li>
<li class='header_menu'><a href="">企业采购</a> <i class='fa fa-angle-down'></i></li>
<li class='header_menu'><a href="">客户服务</a> <i class='fa fa-angle-down'></i></li>
<li class='header_menu'><a href="">网站导航</a> <i class='fa fa-angle-down'></i></li>
<li><a href="">手机京东</a></li>
</ul>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-13 14:00:08
Teacher's summary：fa-angle-down, 'header_menu', 以后class风格要统一起来, 不会一会用下划线, 一会用连接线