<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>0311</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body{
background-color:#ebe2eb;
}
.box {
height:415px;
width: 298px;
margin: 100px auto; /*让块级的盒子居中对齐*/
background-color: #808080;
}
.box img{
width:100%;
}
.review{
height:70px;
font-size:14px;
padding:0 28px;
margin-top:30px;
}
.pinglun {
font-size: 12px;
padding: 0 28px;
margin-top:15px;
color:antiquewhite;
}
div.info {
font-size: 14px;
padding: 0 28px;
margin-top: 15px;
color: black;
text-decoration:none;
}
.price{
color:orangered;
}
em{
color:antiquewhite;
padding:0 7px 0 15px;
font-style:normal;
}
a{
font-style:normal;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div class="box">
<img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/bi001/2023/0815/73/ias_010054834578eff7dfcce58d18dcf92e_1135x545_85.jpg" class="brand-img" data-original="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/bi001/2023/0815/73/ias_010054834578eff7dfcce58d18dcf92e_1135x545_85.jpg" alt="施华洛世奇专场">
<p class="review"> <a href="#"> 这是一段文字文字。。。。。</a></p>
<span class="pinglun"> 这是一条评论评论。。。</span>
<div class="info"> <a href="#">这是一段详情文字。。。</a>
<em>|</em>
<span class="price">99.9元</span></div>
</div>
</body>
</html>
看一下最终的结果