<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text4</title>
<style>
.wrapper {
calc(200px * 5 + 40px) ;
margin: 0 auto;
border: 1px solid black;
}
.wrapper:after {
content: '';
display: block;
clear: both;
}
.box {
float: left;
200px;
height: 260px;
background-color: orange;
margin-right: 10px;
margin-bottom: 10px;
/*position: relative;*/
}
.box:nth-child(5n) {
margin-right: 0;
}
.t, .b {
height: 125px;
background-color: pink;
}
.t {
margin-bottom: 10px;
}
.b1 {
background-image: url("img/001.jpg");
background-repeat: no-repeat;
background-size: 200px 260px;
}
.b2 .b2-d1{
height: 260px;
200px;
background-color: white;
position: relative;
}
.b2 .b2-d1 div {
position: absolute;
50px;
height: 30px;
background-color: forestgreen;
color: white;
text-align: center;
line-height: 30px;
left:calc(50% - 25px)
}
.b2 .b2-d1 img {
150px;
position: absolute;
left: calc(50% - 75px);
top: 50px;
}
.b2 .b2-d1 p {
position: absolute;
background-color: #cccccc;
font-size: 15px;
bottom: 10px;
calc(100%);
text-align: center;
}
.b2 .b2-d1 .f {
calc(100%);
background-color: #ff6700;
position: absolute;
left: 0;
bottom: 0;
height: 0;
overflow: hidden;
transition: 0.2s;
}
.b2:hover .f{
height: 60px;
}
.box {
transition: 0.2s;
top: 0;
}
.b2:hover .b2-d1{
top: -5px;
box-shadow: 0 0 5px 0 black;
}
/*.b2 {*/
/* 200px;*/
/*height: 260px;*/
/**/
/*}*/
.b3 .d1 {
200px;
height: 260px;
position: relative;
}
.b3 .d1 div {
position: absolute;
50px;
height: 30px;
background-color: forestgreen;
color: white;
text-align: center;
line-height: 30px;
left:calc(50% - 25px)
}
.b3 .d1 img {
150px;
position: absolute;
left: calc(50% - 75px);
top: 50px;
}
.b3 .d1 p {
position: absolute;
background-color: #cccccc;
font-size: 15px;
bottom: 10px;
calc(100%);
text-align: center;
}
.b3 .d1 .t {
calc(100%);
background-color: #ff6700;
position: absolute;
left: 0;
bottom: 0;
height: 0;
overflow: hidden;
transition: 0.2s;
}
.b3:hover .t{
height: 60px;
}
.b3:hover .d1{
top: -10px;
box-shadow: 0 0 5px 0 black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box b1"></div>
<div class="box b2">
<div class="b2-d1">
<div>新品</div>
<img src="img/002.jpg" alt="">
<p>小米反馈方便快捷发</p>
<div class="f">12545粉红色开发和是否国家和高科技回复可见高考恢复工具会计法哈饭卡i阿富汗高科技爱看飞机送就6</div>
</div>
</div>
<div class="box b3">
<div class="d1">
<div>新品</div>
<img src="img/003.jpg" alt="">
<p>小米米家门锁</p>
<div class="t">12545粉红色开发和是否国家和</div>
</div>
</div>
<div class="box">
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
</body>
</html>