摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.header{
background:#F5F5F5;
width: 100%;
}
.header-content{
margin: 0 auto;
width:90%;
line-height: 37px;
}
.header-content-left{
float:left;
height: 37px;
}
.header-content-right{
float:right;
height:37px;
}
.header-content a{
display: inline-block;
width: 80px;
height: 37px;
}
.header-content a:hover{
color: orangered;
}
.header_a:hover{
background: #FFFFFF;
}
.header_a ul{
border:1px solid #F5F5F5;
width:100px;
display:none;
border-top:none;
}
.header_a:hover ul{
display: block;
position: absolute;
}
.header_a{
display: inline-block;
height: 40px;
text-align: center;
width: 90px;
position: relative;
}
.header_a ul li:hover{
background:#F5F5F5;
}
.header_a ul li{
color: #6C6C6C;
line-height: 30px;
height: 30px;
text-align: left;
padding:0 3px;
margin:5px 0;
}
</style>
<title>Document</title>
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-content-left">
<a class="header_a" href="#">中国大陆<i class="layui-icon" style="font-size: 1px;"></i>
</a>
<a class="header_a" href="#" style="color:coral;">亲，请登录</a>
<a class="header_a" href="#">注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="header-content-right">
<a class="header_a" href="#">我的淘宝<i class="layui-icon" style="font-size: 1px;"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="#"><i class="layui-icon layui-icon-cart-simple"></i>购物车<i class="layui-icon" style="font-size: 1px;"></i></a>
<a class="header_a" href="#">收藏夹<i class="layui-icon" style="font-size: 1px;"></i>
<ul style="width:80px;">
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="#">商品分类</a>
<a class="header_a" href="#">卖家中心<i class="layui-icon" style="font-size: 1px;"></i></a>
<a class="header_a" href="#">联系客服<i class="layui-icon" style="font-size: 1px;"></i></a>
<a class="header_a" href="#">网站导航<i class="layui-icon" style="font-size: 1px;"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-28 14:37:39
老师总结：<div class="clear"></div> 以后别这样清浮动, 可以用:after
