<!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>小米效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 610px;
margin: 100px auto;
}
.box img {
width: 100%;
}
.details {
box-sizing: border-box;
width: 100%;
height: 130px;
padding: 0px 15px 0px 15px;
/* background-color: rgb(224, 201, 201); */
}
.details p {
margin-bottom: 20px;
}
.details .mo1 {
font-size: 24px;
font-weight: 700;
color: red;
}
.details .mo2 {
font-size: 16px;
color: grey;
text-decoration: line-through;
}
.bar {
width: 100%;
height: 20px;
color: #333;
font-size: 14px;
vertical-align: middle;
}
.bar_in {
display: inline-block;
width: 140px;
height: 10px;
border: 1px solid red;
border-radius: 7px;
background-color: #fff;
margin-left: 5px;
}
.bar_in .b {
width: 87%;
height: 100%;
background-color: red;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.details .bar span {
color: red;
}
.box button {
width: 100%;
height: 70px;
background-color: #df0021;
color: #fff;
font-size: 32px;
border: 1px solid #df0021;
}
</style>
</head>
<body>
<div class="box">
<img src="images/phone.webp">
<div class="details">
<p>Apple iPhone 13 (A2634) 512GB 午夜色 支持移动联通电信5G 双卡双待手机</p>
<span class="mo1">¥7999</span>
<span class="mo2">¥8988</span>
<div class="bar">
已售<span>87%</span>
<div class="bar_in">
<div class="b"></div>
</div>
剩余<span>29</span>件
</div>
</div>
<button>立即抢购</button>
</div>
</body>
</html>