<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>今日团购</title>
</head>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
$(".cell").each(function(){
$(this).hover(
function(){
$(this).css({"background-color":"black"});
$(this).children().children("dd").css({"background-color":"black","color":"white"});
$(this).animate({"width":"220px","height":"220px"},200);
},
function(){
$(this).css("background-color","#F90");
$(this).children().children("dd").css({"background-color":"white","color":"black"});
$(this).animate({"width":"200px","height":"200px"},200);
}
);
});
});
</script>
<style>
body{background-color:#CCC;}
*{margin:0;padding:0;border:0;font-size:12px;}
.cell{width:200px;height:200px;background-color:#F90;}
.cell dl{width:98%;height:98%;padding:1%;}
.cell dl dt{width:100%;height:74%;background-color:white;}
.cell dl dd{width:100%;height:12%;background-color:white;margin-top:1%;}
.cell dl dt img{width:100%;height:100%;}
.cell dl dd font{color:red;font-size:24px;text-align:left;}
.cell dl dd div{float:right;padding-top:5%;}
</style>
<body>
<div class="cell">
<dl>
<dt><img src="img/list3.jpg"/></dt>
<dd><p>ThinkPad</p></dd>
<dd><font>￥2999</font><div>15人已买</div></dd>
</dl>
</div>
</body>
</html>
7757
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
