html:
<div class="ad">
<div class="ad_block">
<div class="ad_block_item item1">
</div>
<div class="ad_block_item item2">
</div>
<div class="ad_block_item item3">
</div>
</div>``
css:
/*=============ad css start======================*/
.ad{
float: left;
/*position: absolute;*/
background:#F8F8FF;
width: 100%;
height: 400px;
/*margin-top:60%;*/
}
.ad_block{
width: 85%;
background: #F8F8FF;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.ad_block_item{
position: relative;/*绝对定位*/
top: 0px;
width: 29%;
height: 90%;
background: #FFFFFF;
border: 1px solid #000000;
float: left;
margin-left: 40px;
/*margin-right: 40px;*/
margin-top: 35px;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.ad_block_item:hover{
box-shadow: 0px 1px 25px 5px #808080;
top: -8px;
}
.item1{
border-top: 3px solid red;
}
.item2{
border-top: 3px solid green;
}
.item3{
border-top: 3px solid blue;
}
/*=============ad css end======================*/