开发者学堂课程【移动 Web 前端开发：首页-秒杀头部】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8409
首页-秒杀头部
基本内容
一、秒杀头部的介绍
二、秒杀
一、秒杀头部的介绍
1、（1）处向左浮动
（2）处向右浮动
2、<!--产品区块-->
<div class="jd_ product">
<section class="jd_ proBox">
<div class="pro_ tit nb">
<div class="f_left"></div>
<span class="sk_ icon"></span>
<span class="sk_ text">掌上秒杀</span>
<div class="sk_ time">
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0k/span>
</div>
</div>
<div class="f_right"><a href=”#”class = “m_r10”>更多</a></div>
</div>
<div class="pro_ con"></div>
</section>
<section class="jd_ proBox">
<div class="pro_ tit"></div>
<div class="pro_ con"></div>
</section>
<section class="jd_ proBox">
<div class="pro_ tit">
</div> <div class="pro_ con"></div>
</section>
<section class="jd_ proBox">
<div class="pro_ tit"></div>
<div class="pro_ con"></div>
</section>
</div>
二、秒杀
/*秒杀*/
.sk_ icon {
width: 16px;
height: 20px;
float: left;
margin-top: 7px;
margin-left: 10px;
/*一倍左右*/在开发中，遇到一些使用的图片，可以将它放大一倍或者将它缩小一倍，必须要适当，不能太夸张 。
background: url("../ images/seckill- icon.png") no-repeat ; 小闹钟的图片
background-size: 16pх 20px;
}
.sk_ text {
color: #d8505c; 文字的颜色
margin-left: 10px;
float: left;
}
.sk_ _time {
float: left;
margin-left: 10px;
}
.sk_ time span {
width: 16px;
height: 16px;
text -align: center ;
line- height: 16px;
color: #fff;
background: #333 ;
margin-left: 3px;最左边的时间制定
float: left;
margin-top: 7px;
}
. sk_time span:nth-child(3n） { 倒计时
background: #fff; 背景：白色
color: #333;
width: 3px;
}
