<!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;
}
body{
background-color:rgba(128, 128, 128, 0.089);
}
ul>li{
width:234px;
height:260px;
background-color:#fff;
text-align:center;
font-family:arial;
padding:20px 0;
}
ul>li:hover{
z-index:2;
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
transform: translate3d(0,-2px,0);
}
ul>li>img{
width:160px;
height:160px;
margin-bottom:18px;
cursor:pointer;
}
.paragraph1{
font-size:14px;
margin:0px 10px 2px;
color:#333333;
font-weight:400px;
cursor:pointer;
}
.paragraph2{
font-size:12px;
margin:0px 10px 10px;
color:#B0B0B0;
cursor:pointer;
}
.paragraph3{
font-size:14px;
margin:0px 10px 14px;
color:#FF6700;
cursor:pointer;
}
ul{
list-style-type:none;
width:992px;
float:left;
}
ul::after{
content:"";
display:block;
clear:both;
}
ul>li{
width:234px;
height:260px;
background-color:#fff;
text-align:center;
font-family:arial;
padding:20px 0;
float:left;
margin-left:14px;
margin-bottom:14px;
}
.left{
cursor:pointer;
float:left;
width:234px;
height:614px;
background-image:url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb1bd61ad71c45a4f67f09b075463944.jpeg?thumb=1&w=234&h=614&f=webp&q=90);
}
.left:hover{
z-index:2;
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
transform: translate3d(0,-2px,0);
}
</style>
</head>
<body>
<!-- <div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/68217751d12b1bfd2f9766e458b5e2dd.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Redmi K40 Pro 系列</p>
<p class = "paragraph2">骁龙888/E4旗舰直屏</p>
<p class = "paragraph3">2799元起</p>
</div> -->
<div class = "left">
</div>
<ul>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/68217751d12b1bfd2f9766e458b5e2dd.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Redmi K40 Pro 系列</p>
<p class = "paragraph2">骁龙888/E4旗舰直屏</p>
<p class = "paragraph3">2799元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/73617424da6ff6b64f9c630387bca874.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Redmi K40</p>
<p class = "paragraph2">骁龙870，新一代 E4 AMOLED旗舰直屏</p>
<p class = "paragraph3">1999元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a260090e0e08770b0bd865845a4b4ab.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">小米11</p>
<p class = "paragraph2">骁龙888/2K四曲面屏</p>
<p class = "paragraph3">3999元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">小米10</p>
<p class = "paragraph2">骁龙865/1亿像素相机</p>
<p class = "paragraph3">3399元起 <del style = "color:#999">3999元<del></p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4e75e528fb468aee107f551179aa0799.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Note 9 Pro</p>
<p class = "paragraph2" style = "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">一亿像素夜景相机，120Hz六档变速高刷屏</p>
<p class = "paragraph3">1599元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/de2f71a797a74e1ca70f1fb4570bc026.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Note 9</p>
<p class = "paragraph2">天玑 800U处理器，5000mAh电池，</p>
<p class = "paragraph3">1299元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/13f10e47913f9dc82e6c6a6199f413cd.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Note 9 4G</p>
<p class = "paragraph2">6000mAh长续航</p>
<p class = "paragraph3">999元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c892a7640f58032489cbff8a948b50f9.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p class = "paragraph1">Redmi 9A</p>
<p class = "paragraph2" style = "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">5000mAh长循环大电量，6.53"超大护眼屏幕</p>
<p class = "paragraph3">499元起</p>
</li>
</ul>
</body>
</html>