摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
ul li{
list-style: none;
width: 100px;
height: 40px;
text-align: center;
background-color: red;
}
.box1{
margin: 0px 1px;
float: left;
}
.box2{
margin: 0px 1px;
float: right;
}
.main{
height: 100px;
width: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
display: none;
position: relative;top: 21px; }
.clean{
clear: both; }
.box:hover .main{
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<div> 1
<div>ok?</div>
</div>
</li>
<li>
<div> 2
<div>ok?</div>
</div></li>
<li>
<div>3
<div>ok?</div>
</div></li>
<li>
<div> 4
<div>ok?</div>
</div></li>
<li>
<div> 5
<div>ok?</div>
</div></li>
<li>
<div> 6
<div>ok?</div>
</div></li>
<div></div></ul>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-09 09:14:28
老师总结：简单的效果已经实现，可以把知识点运用到案例中去
