<!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>
body{
background-color: #f1f1f1;
}
.phone{
width: 1300px;
height: 720px;
margin: 0 auto;
}
.left{
float: left;
width: 234px;
height: 720px;
}
.right{
float: right;
width: 1050px;
}
.box{
float: left;
width: 250px;
height: 345px;
background-color: #fff;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
.img-logo{
width: 234px;
height: 720px;
}
</style>
</head>
<body>
<div class="phone">
<div class="left">
<img class="img-logo" src="./logo.webp" alt="">
</div>
<div class="right">
<div class="box">
<img src="./1.webp" alt="">
<h3>Redmi 12C</h3>
<p>高性能续航,5000万像素超清双摄</p>
<p>699元起</p>
</div>
<div class="box">
<img src="./2.webp" alt="">
<h3>Redmi K60</h3>
<p>骁龙8+ | 2K高光直屏 | 5500mAh</p>
<p>2499元起</p>
</div>
<div class="box">
<img src="./3.webp" alt="">
<h3>Redmi K60 Pro</h3>
<p>【第二代骁龙8】狂暴引擎</p>
<p>3299元起</p>
</div>
<div class="box">
<img src="./4.webp" alt="">
<h3>Redmi Note 12 Pro极速版</h3>
<p>高通骁龙778G,OLED柔性直屏</p>
<p>1699元起</p>
</div>
<div class="box">
<img src="./5.webp" alt="">
<h3>Xiaomi 13 限量定制色</h3>
<p>全新第二代骁龙8 | 徕卡专业光学镜头</p>
<p>4999元起</p>
</div>
<div class="box">
<img src="./6.webp" alt="">
<h3>Xiaomi 13 Pro</h3>
<p>全新第二代骁龙8 | 徕卡专业光学镜头</p>
<p>4999元起</p>
</div>
<div class="box">
<img src="./7.webp" alt="">
<h3>Xiaomi 13</h3>
<p>全新第二代骁龙8 | 徕卡专业光学镜头</p>
<p>3999元起</p>
</div>
<div class="box">
<img src="./8.webp" alt="">
<h3>Redmi Note 12 5G</h3>
<p>三星 OLED 护眼屏 | 骁龙5G芯</p>
<p>1199元起</p>
</div>
</div>
</div>
</body>
</html>