一:今日团购页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>今日团购模块 </title>
<style>
*{
margin:0px;
padding:0px;
font-size:12px;
}
#pruduce{
width:947px;
background-color:#F2F2F2;
margin: 0px auto;
}
.top{
height:55px;
background:url(img/top.jpg) no-repeat 10px 10px;
}
.main{
text-align:center;
height:309px;
}
.box{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
.box1{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
.box2{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
dl{
padding-top:3px;
}
dd{
line-height:30px;
}
div.btprice_1{
height:50px;
background:#FFF2CE url(img/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
height:50px;
background:#FFF2CE url(img/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
height:50px;
background:#FFF2CE url(img/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
background-color:#D51938;
color:#fff;
}
.red{
background-color: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
$(".box").mouseover(function(){
$(".box").addClass("red");
}).mouseout(function(){
$(".box").removeClass("red");
});
$(".box1").mouseover(function(){
$(".box1").addClass("red");
}).mouseout(function(){
$(".box1").removeClass("red");
});
$(".box2").mouseover(function(){
$(".box2").addClass("red");
}).mouseout(function(){
$(".box2").removeClass("red");
});
})
</script>
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="img/pic1.jpg" /></dt>
<dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box1">
<dl>
<dt><img src="img/pic2.jpg" /></dt>
<dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box2">
<dl>
<dt><img src="img/pic3.jpg" /></dt>
<dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
</div>
</body>
</html>
效果图:
二:制作QQ简易聊天框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<style>
*{
margin: 0;
padding: 0;