index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--系统内置 start-->
<script type="text/javascript"></script>
<!--系统内置 end-->
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<h3>小米<小爱老师></h3>
<p>口袋里的英语外教</p>
<h4>499元起</h4>
</div>
</body>
</html>index.css
* {
margin: 0;
padding: 0;
}
.box {
box-sizing: border-box;
width: 200px;
height: 256px;
background: #ffffff;
padding-top: 22px;
text-align: center;
box-shadow:0px 0px 10px rgba(0,0,0,0.11);
}
.box::before {
content: '';
display: block;
width: 130px;
height: 130px;
margin: 0px auto 16px;
background: url(./images/phone.jpg) no-repeat center;
background-size: contain;
}
.box h3 {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
color: #000000;
}
.box p {
margin-top: 4px;
margin-bottom: 8px;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
color: #A8A8A8;
}
.box h4 {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #FD6821;
}运行结果
