效果:
html:
<body>
<div class="box">
<img src="img/图片2.png" alt="">
<div class="box2">
<p class="zhujie">这是一款蓝牙耳机,这是一款蓝牙耳机,这是一款蓝牙耳机</p>
<div class="pinjia">来自****</div>
<div class="info">
<h4>******</h4>
<h3>|</h3>
<span>199.9¥</span>
</div>
</div>
</div>
</body>
css:
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #e8eae8;
}
.box{
width: 350px;
height: 490px;
background-color: #ffffff;
margin: 0 auto;
}
.box img{
width: 100%;
}
.box2{
padding: 0 30px;
}
.zhujie{
margin-top: 40px;
height: 105px;
}
.pinjia{
color: #a2a2a2;
font-size: 12px;
}
.info{
margin-top: 20px;
}
.info h4{
display: inline-block;
font-weight: 400;
}
.info h3{
display: inline-block;
color: #747474;
}
.info span{
color: #e19f83;
}
</style>
又是美好的一天!