源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div.article_outer{
width: 1090px;
height: 510px;
display: flex;
justify-content: space-around;
margin: 0 auto;
}
div.article_outer div{
width: 265px;
height: 365px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
}
div.article_outer div>section:first-child{
width: 265px;
height: 265px;
}
div.article_outer div>section:first-child img{
width: 265px;
height: 265px;
}
div.article_outer div>section:last-child{
width: 265px;
height: 91.4px;
}
div.article_outer div>section>p{
text-align: center;
}
div.article_outer div>section>p:first-child{
height: 20px;
}
div.article_outer div>section>p .one_span{
background-color: #e36644;
display: inline-block;
height: 20px;
line-height: 20px;
font-size: 12px;
padding: 0 5px;
}
div.article_outer div>section>p:nth-child(2){
width: 166px;
height: 35px;
font-size: 12px;
margin: 0 auto;
line-height: 20px;
padding-top: 5px;
margin-bottom: 5px;
}
div.article_outer div>section>p .three_one{
color: #d4282d;
font-size: 13px;
}
div.article_outer div>section>p .three_two{
color: #999;
font-size: 12px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="article_outer">
<div>
<section>
<img src="./heizhima.jpg" alt="">
</section>
<section>
<p>
<span class="one_span">新品限时购</span>
</p>
<p>
你的发际线 黑芝麻丸100g
</p>
<p>
<span class="three_one">
¥29
</span>
<span class="three_two">
¥39
</span>
</p>
</section>
</div>
<div>
<section>
<img src="./heizhima.jpg" alt="">
</section>
<section>
<p>
<span class="one_span">新品限时购</span>
</p>
<p>
你的发际线 黑芝麻丸100g
</p>
<p>
<span class="three_one">
¥29
</span>
<span class="three_two">
¥39
</span>
</p>
</section>
</div>
<div>
<section>
<img src="./heizhima.jpg" alt="">
</section>
<section>
<p>
<span class="one_span">新品限时购</span>
</p>
<p>
你的发际线 黑芝麻丸100g
</p>
<p>
<span class="three_one">
¥29
</span>
<span class="three_two">
¥39
</span>
</p>
</section>
</div>
<div>
<section>
<img src="./heizhima.jpg" alt="">
</section>
<section>
<p>
<span class="one_span">新品限时购</span>
</p>
<p>
你的发际线 黑芝麻丸100g
</p>
<p>
<span class="three_one">
¥29
</span>
<span class="three_two">
¥39
</span>
</p>
</section>
</div>
</div>
</body>
</html>
效果图: