今天学习了一下css，感觉要记录一下常见案例。
简单的商品展示布局，如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 275px;
height: 283px;
border: 1px solid #ff7e00;
margin: 100px;
position: relative;
}
.box1 .image img{
width: 275px;
height: 175px
}
.dtc{
width: 52px;
height: 28px;
background: url("assets/img/icons.png") no-repeat -108px 0;
left: 9px;
top: -9px;
position: absolute;
}
.myy{
width: 52px;
height: 28px;
background: url("assets/img/icons.png") no-repeat -54px 0;
left: 61px;
top: -9px;
position: absolute;
}
.xd{
width: 52px;
height: 28px;
background: url("assets/img/icons.png");
left: 113px;
top: -9px;
position: absolute;
}
.box1 h3{
width: 275px;
height: 36px;
line-height: 36px;
background: #000000;
color: #ffffff;
font-size: 14px;
top: 139px;
position: absolute;
opacity: 0.9;
}
.box1 h4{
font-size: 14px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.txt{
overflow: hidden;
text-overflow:ellipsis;
font-size: 14px;
}
.price{
width: 275px;
height: 36px;
line-height: 36px;
padding: 0 15px;
position: absolute;
bottom: 15px;
}
.price .new {
color: #ff7e00;
}
.price .new span{
font-size: 24px;
}
.price .old{
color: #8c939d;
}
.price .sold{
float: right;
padding-right: 30px;
color: #8c939d;
}
.price .sold .sold_num{
color: #ff7e00;
}
</style>
</head>
<body>
<div class="box1">
<span class="dtc"></span>
<span class="myy"></span>
<span class="xd"></span>
<p class="image">
<img src="assets/img/mm.jpg">
</p>
<h3><span style="padding-left: 15px;">奶茶</span></h3>
<h4><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></h4>
<div class="txt"><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></div>
<div class="price">
<span class="new">￥<span>85</span></span>
<del class="old">￥100</del>
<span class="sold">已售<span class="sold_num">10</span></span>
</div>
</div>
</body>
</html>
所需的图标：
