摘要：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} body{background-color: #F0F3EF} a{text-decoration: none;color
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background-color: #F0F3EF}
a{text-decoration: none;color: #9FA0A0;}
i{ font-style:normal;}
.clear{clear: both;}
.header{background-color: #E3E4E5;color: #9FA0A0;height: 30px;font-size: 10px;}
.header_logo{float: left;width: 190px;height: 170px;background-color: #FFFFFF;box-shadow: 0px 5px 30px #ccc;}
.header_menu{width: 1000px;margin: auto;line-height: 30px;text-align: center;height: 30px;}
.header_left{float: left;width: 55px;margin-left: 10px;}
.header_left_box{width: 305px;height: 360px;background-color: #FFFFFF;display: none;}
.header_right{float: right;}
.header_right a{margin-right: 10px;}
.header_a1{position: relative;display: inline-block;}
.header_a2{position: relative;display: inline-block;}
.header_a3{position: relative;display: inline-block;}
.header_a4{position: relative;display: inline-block;}
.header_a5{position: relative;display: inline-block;}
.header_a1_box{width: 285px;height: 160px;background-color: #FFFFFF;position: absolute;display: none;}
.header_a2_box{width: 155px;height: 65px;background-color: #FFFFFF;position: absolute;display: none;}
.header_a3_box{width: 160px;height: 250px;background-color: #FFFFFF;position: absolute;display: none;left: -100px;}
.header_a4_box{width: 1000px;height: 200px;background-color: #FFFFFF;position: absolute;display: none;left: -853px;}
.header_a5_box{width: 180px;height: 305px;background-color: #FFFFFF;position: absolute;display: none;left: -120px;}
.header_left:hover{background-color: #FFFFFF;}
.header_left:hover .header_left_box{display: block;}
.header_right a:hover{color: red;}
.header_a1:hover{background-color: #FFFFFF;}
.header_a2:hover{background-color: #FFFFFF;}
.header_a3:hover{background-color: #FFFFFF;}
.header_a4:hover{background-color: #FFFFFF;}
.header_a5:hover{background-color: #FFFFFF;}
.header_a1:hover .header_a1_box{display: block;}
.header_a2:hover .header_a2_box{display: block;}
.header_a3:hover .header_a3_box{display: block;}
.header_a4:hover .header_a4_box{display: block;}
.header_a5:hover .header_a5_box{display: block;}
</style>
</head>
<body>
<div class="header">
<div class="header_menu">
<div class="header_logo"></div>
<div class="header_left">北京
<div class="header_left_box"></div>
</div>
<div class="header_right">
<a href="#">您好，请登录</a>
<a href="#" style="color: red;">免费注册</a><i>|</i>
<a href="#">我的订单</a><i>|</i>
<a class="header_a1" href="#">我的京东▼<div class="header_a1_box"></div></a><i>|</i>
<a href="#">京东会员</a><i>|</i>
<a class="header_a2" href="#">企业采购▼<div class="header_a2_box"></div></a><i>|</i>
<a class="header_a3" href="#">客户服务▼<div class="header_a3_box"></div></a><i>|</i>
<a class="header_a4" href="#">网站导航▼<div class="header_a4_box"></div></a><i>|</i>
<a class="header_a5" href="#">手机京东▼<div class="header_a5_box"></div></a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-12-26 09:31:17
老师总结：布局的时候代码该简洁的时候尽量简洁，不需要重复写这么多class
