抢购模块设计
使用浮动属性进行抢购模块的设计。制作过程遵循从外到内，先整体后细节的顺序。
先进行分析：抢购模块分为图片部分（img）和详情部分（info）。其中详情部分又分为标题（title）、补充信息（info-detail）、进度条（progress）、售出信息（sold）和价格（price）五个小部分。
如下图所示：
经过从整体到细节的分析，设计思路也会更加清晰，相应的代码编写起来也会更加得心应手。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D5-2</title>
<link rel="stylesheet" href="css/reset.css" />
<style>
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
clear: both;
display: block;
content: "";
}
.page{
width: 395px;
height: 180px;
border: 1px solid #000000;
}
.img{
width: 180px;
height: 180px;
background-color: #dcc6b9;
}
.info{
width: 180px;
height: 180px;
margin-left: 35px;
/* background-color: #f5dd87; */
}
img{
width: 180px;
height: 180px;
}
.title{
width: 161px;
font-size: 16px;
line-height: 22px;
margin-top: 11px;
}
.info-detail{
margin-top: 12px;
line-height: 28px;
font-size: 12px;
color: #989898;
}
.progress{
background-color: #FFE4Dc;
width: 159px;
height: 6px;
border-radius: 3px;
overflow: hidden;
}
.progress .sold{
width: 20%;
height: 6px;
background-color: red;
}
.sold{
color: #FE3338;
line-height: 28px;
height: 28px;
font-size: 12px;
}
.price span:nth-of-type(1){
font-size: 12px;
color: red;
}
.price span:nth-of-type(2){
font-size: 19px;
color: #ff6113;
}
.price span:nth-of-type(3){
font-size: 12px;
color: #989898;
text-decoration: line-through;
margin-left: 6px;
}
</style>
</head>
<body>
<div class="page clearfix">
<div class="img fl">
<img src="./img/goods.jpg" />
</div>
<div class="info fl">
<p class="title">[正版书籍] 浪漫地理学：追寻崇高景观</p>
<p class="info-detail"> 春节不打烊，新年更优惠</p>
<div class="progress">
<div class="sold"></div>
</div>
<p class="sold clearfix">
<span class="fl">20%</span>
<span class="fr">已抢288件</span>
</p>
<p class="price">
<span> ￥</span>
<span>34.8</span>
<span class="price">￥56.1</span>
</p>
</div>
</div>
</body>
</html>
效果图：
