<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}
a{
text-decoration:none;
}
body{
background-color:rgba(128, 128, 128, 0.089);
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
ul{
width:1239px;
height:812px;
margin:0 auto;
/* margin-left:-13px; */
/* border:1px solid black; */
}
ul::after{
content:"";
display:block;
clear:both;
}
ul li{
cursor:pointer;
position:relative;
float:left;
width:400px;
height:190px;
margin-left:13px;
margin-bottom:13px;
/* border:1px solid red; */
background-color:#fff;
}
ul li:hover{
z-index:2;
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
transform: translate3d(0,-2px,0);
}
ul li::after{
content:"";
display:block;
clear:both;
}
ul li .left{
position:absolute;
width:200px;
height:190px;
/* background-color:hotpink; */
}
ul li .left a{
display:inline-block;
width:200px;
height:190px;
}
ul li .left a img{
width:200px;
height:190px;
}
ul li .right{
margin-left:200px;
height:190px;
/* background-color:indigo; */
}
ul li .right .name{
margin-left:20px;
margin-top:27px;
}
ul li .right .name a{
/* color:#757575; */
display:inline-block;
width:180px;
color:#333;
font-size:16px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
ul li .right .present{
margin-left:20px;
}
ul li .right .present a{
color:#757575;
font-size:12px;
}
ul li .right .money{
margin-left:20px;
margin-top:25px;
font-size:16px;
color:#f1393a;
}
ul li .right .money span{
color:#757575;
font-size:12px;
text-decoration:line-through;
}
ul li .right .button{
position:absolute;
left:220px;
top:135px;
width:118px;
height:28px;
border:1px solid #f1393a;
}
ul li .right .button a{
display:inline-block;
width:118px;
height:28px;
color:#fff;
text-align:center;
line-height:28px;
/* font-weight:bold; */
background-color:#f1393a;
font-size:14px;
}
</style>
</head>
<body>
<ul>
<li>
<div class="left">
<a href="#">
<img src="11.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">小米无线鼠标 Lite 黑色</a>
</div>
<div class="present">
<a href="">简约设计，轻盈握感</a>
</div>
<div class="money">29.00元 <span>39元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="22.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">智能积木 公路赛车 白色</a>
</div>
<div class="present">
<a href="">烧脑搭建，进行狂奔</a>
</div>
<div class="money">269.00元 <span>299元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="33.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">米家两门冰箱 160L 银色</a>
</div>
<div class="present">
<a href="">小巧能装，速冻养鲜</a>
</div>
<div class="money">949.00元 <span>1000元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="44.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">日常元素抽纸 青春版 24包/箱</a>
</div>
<div class="present">
<a href="">精选原生竹浆，健康环保</a>
</div>
<div class="money">27.90元 <span>32.9元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="55.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="" style="width: 165px;px;">贝医生声波电动牙刷 S7</a>
</div>
<div class="present">
<a href="">洁齿更智能，刷牙更轻松</a>
</div>
<div class="money">249.00元 <span>399元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="66.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">小米智能门锁 推拉式更省心</a>
</div>
<div class="present">
<a href="">一步推拉，高端智能门锁</a>
</div>
<div class="money">1599.00元 <span>1699元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="77.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="" style = "width:175px;">米家天然乳胶护颈枕更舒心</a>
</div>
<div class="present">
<a href="">天然乳胶 三曲线护颈</a>
</div>
<div class="money">159.00元 <span>199元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="88.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">米家扫地机器人1C 白色</a>
</div>
<div class="present">
<a href="">能扫能拖，地面清洁交给我</a>
</div>
<div class="money">1199.00元 <span>1299元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="99.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">HITH智能足浴器Q3 有线版 旋钮款</a>
</div>
<div class="present">
<a href="">D舒适按摩，精准恒温足浴</a>
</div>
<div class="money">379.00元 <span>569元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
<li>
<div class="left">
<a href="#">
<img src="00.png" alt="">
</a>
</div>
<div class="right">
<div class = "name">
<a href="">COSBEAUTY 电激光生发仪</a>
</div>
<div class="present">
<a href="">医用LLLT激光，更放心</a>
</div>
<div class="money">1999.00元 <span>2299元</span></div>
<div class="button">
<a href="#">登录后抢购</a>
</div>
</div>
</li>
</ul>
</body>
</html>