摘要：<!DOCTYPE html> <html> <head> <title>仿PHP中文网部分</title> <meta charset="utf-8"> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<title>仿PHP中文网部分</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;
}
#inbox{
width: 149px;
height: 54px;
background-color: #fff;
position: relative;
top: -65px;
border-radius: 5px;
border: .5px solid #ccc;
padding: 5px 10px;
font-size: 15px;
font-family: 宋体;
}
label{
background-color: #93999F;
color: #fff;
font-weight:600;
}
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="5be9298c9566e363.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</div>
<div id=imbox>
<img src="5be946c9486aa132.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</div>
<div id=imbox>
<img src="5be67cf51017e406.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</div>
<div id=imbox>
<img src="5be28efee5b73872.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</div>
<div id=imbox>
<img src="5be15ddd6f850969.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</div>
<div id=imbox>
<img src="5be15b16233ed893.png">
<div id="inbox"><label>中级</label>全栈工程师的Node.js之路</div>
</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"})
$("#medbox>#imbox").mouseover(function(){
$(this).children("#inbox").animate({height:"104px",top: "-115px"},500
)
})
$("#medbox>#imbox").mouseleave(function(){
$(this).children("#inbox").animate({height:"54px",top: "-65px"},500
)
})
})
</script>
</body>
</html>
实现了鼠标移上去div向上展开，离开恢复的效果！
批改老师：灭绝师太批改时间：2018-11-17 09:22:51
老师总结：布局丑了点，不过完成的很棒，思路没问题！
