摘要：<!DOCTYPE html> <html> <head> <title>浮动作业</title> <meta charset="utf-8"> <script type="text/javascript" src="jque
<!DOCTYPE html>
<html>
<head>
<title>浮动作业</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#mainbox{
width: 620px;
height: 415px;
border: 1px solid #F2F2F2;
border-radius: 10px;
position: relative;
left: 20%;
top: 10px;
}
#top{
width: 620px;
height:40px;
}
#medbox{
width: 560px;
height: 310px;
position: relative;
left: 30px;
top:20px;
}
#imbox{
width: 170px;
height: 135px;
float: left;
}
#expbox{
width: 170px;
height: 67.5px;
border-radius: 5px;
border: 1px solid red;
float: left;
}
hr{
position: relative;
width: 580px;
top: 10px;
left:20px;
border: 0.5px dashed #F2F2F2;
}
span{
position: relative;
left: 30px;
top:5px;
font-family: 华文新魏;
font-weight: bold;
font-size: 16px;
}
img{width: 170px;
height: 135px;border-radius: 5px;}
</style>
</head>
<body>
<div id="mainbox">
<div id="top">
<span>最新课程</span>
<hr>
</div>
<div id="medbox">
<div id=imbox >
<img src="images/5be9298c9566e363.png">
</div>
<div id=imbox>
<img src="images/5be946c9486aa132.png">
</div>
<div id=imbox>
<img src="images/5be67cf51017e406.png">
</div>
<div id=imbox>
<img src="images/5be28efee5b73872.png">
</div>
<div id=imbox>
<img src="images/5be15ddd6f850969.png">
</div>
<div id=imbox>
<img src="images/5be15b16233ed893.png">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#medbox >div").eq(0).css({"margin-left":"0px","margin-top":"0px"})
$("#medbox >div").eq(1).css({"margin-left":"25px","margin-top":"0px"})
$("#medbox >div").eq(2).css({"margin-left":"25px","margin-top":"0px"})
$("#medbox >div").eq(3).css({"margin-left":"0px","margin-top":"40px"})
$("#medbox >div").eq(4).css({"margin-left":"25px","margin-top":"40px"})
$("#medbox >div").eq(5).css({"margin-left":"25px","margin-top":"40px"})
})
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-13 09:06:49
老师总结：缺少总结！下次记得带上！不错！课后记得多多练习哈！继续加油吧！
