Dom code:
<div class="main">
<div class="countdown">
<h2><span>今日推荐:</span>【10:02开团】现价59.5元包邮 原价119元个性时尚静音金属挂钟12寸（每个ID限购3件）</h2>
<div class="info-box clearfix">
<div class="Auto_Widget" data-widget-type="Countdown" data-widget-config="{
'endTime': '3000', /* 第1段倒计时结束时间*/
'interval': 1000,
'timeRunCls': '.moo-countdown-run',
'timeUnitCls':{
'h': '.moo-h',
'm': '.moo-m',
's': '.moo-s'
},
'minDigit': 2,
'timeEndCls': '.moo-countdown-end',
'onEnd':function(){
new Countdown('second',{
'endTime': '3000', /* 第2断倒计时结束时间*/
'interval': 1000,
'timeRunCls': '.moo-countdown11-run',
'timeEndCls': '.moo-countdown11-end',
'timeUnitCls':{
'h': '.moo-h',
'm': '.moo-m',
's': '.moo-s'
},
'minDigit':2
});
}
}">
<div class="meta">
<!-- 倒计时进行中显示的内容，即将开始 -->
<div class= "moo-countdown-run">
<div class="item-buy">
<strong class="price"><b>￥</b>119<span>.00</span></strong>
<a class="start btn" href="#" target="_blank">
</a>
</div>
</div>
<!-- 价格折扣 -->
<dl class="item-prices">
<dt class="price">原 价</dt>
<dt class="discount">折 扣</dt>
<dt class="save">节 省</dt>
<dd class="price"><del>￥119.00</del></dd>
<dd class="discount">5.4</dd>
<dd class="save">￥59.50</dd>
</dl>
<!-- 倒计时 -->
<div class="time-count moo-countdown-run">
<p class="tit">剩余时间: </p>
<span class="moo-h value"></span><span class="unit">小时</span>
<span class="moo-m value"></span><span class="unit">分</span>
<span class="moo-s value"></span><span class="unit">秒</span>
</div><!--/time-count-->
<div class= "moo-countdown-end">
<div id="second">
<div class="second_con">
<div class="item-buy moo-countdown11-run">
<strong class="price"><b>￥</b>59<span>.50</span></strong>
<a class="buy" href="#" target="_blank">
</a>
</div>
<div class= "moo-countdown11-run">
<div class="item-buy">
<strong class="price"><b>￥</b>59<span>.50</span></strong>
<a class="buy btn" href="#" target="_blank">
</a>
</div>
</div>
<div class="time-count moo-countdown11-run">
<p class="tit">剩余时间: </p>
<span class="moo-h value"></span><span class="unit">小时</span>
<span class="moo-m value"></span><span class="unit">分</span>
<span class="moo-s value"></span><span class="unit">秒</span>
</div>
<div class="group-end moo-countdown11-end">
<strong class="price"><b>￥</b>119<span>.00</span></strong>
<a class="btn" href="#" target="_blank">
</a>
</div>
<div class="time-count moo-countdown11-end">
很抱歉，团购已经结束！自己添加联想其他文字吧~~
</div>
</div>
</div>
</div>
</div>
<!-- 倒计时进行中显示的内容，绿色边框 -->
<div class="picbox">
<div class="pic">
<a target="_blank" href="#"><img src="assets/cutdown_pro.jpg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
Css code:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix,
* html {height: 1%;}
.clearfix {display: block;}
.main{
height: 400px;
width: 740px;
position: relative;
margin-bottom: 15px;
background-color: white;
border: 2px solid #F8DAD5;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 1px #F1F1F1;
-moz-box-shadow: 0 0 1px #F1F1F1;
-webkit-box-shadow: 0 0 1px #F1F1F1;
padding: 12px 0;
}
.countdown{
padding: 0 8px 2px;
z-index: 20;
}
.countdown h2 {
padding: 3px 8px;
font: bold 23px/36px "微软雅黑";
color: #333;
}
.countdown h2 span {
color: #DC442F;
}
.countdown h2 a{
color:#333333
}
.countdown h2 a:visited{
color:#333333
}
.countdown h2 a:hover{
color:#333333
}
.countdown .info-box {
margin-top: 12px;
position: relative;
zoom: 1;
}
.countdown .meta {
position:relative;
border:1px solid #ffed85;
border-right:none;
border-top:none;
height:183px;
width:254px;
float:left;
margin-left:2px;
padding-top:128px;
z-index:20;
}
.countdown .item-buy{
width:281px;
height:68px;
position:absolute;
z-index:20;
left:-27px;
top:0;
background:url(assets/group.png) no-repeat;
}
.countdown .moo-countdown-run .item-buy{
background-position: right -78px;
}
.countdown .moo-countdown-end .item-buy{
background-position: right 0;
}
.countdown .item-buy strong,#second .group-end strong{
font: bold 46px Arial;
color: white;
text-shadow: 1px 1px 1px #666;
letter-spacing: -3px;
display: block;
height: 68px;
line-height: 68px;
padding-right: 90px;
text-align: center;
}
.countdown .item-buy .btn{
width: 281px;
height: 68px;
display: block;
position: absolute;
top: 0;
cursor: pointer;
background: url(assets/group.png) no-repeat;
}
.countdown .item-buy .buy {
background-position: 190px 0;
}
.countdown .item-buy .start {
background-position: 190px -78px;
}
.countdown .item-prices {
width: 253px;
height: 59px;
position: absolute;
z-index: 10;
top: 68px;
left: -11px;
padding-left: 12px;
background: url(assets/price.png) no-repeat 1px 0;
word-break: normal;
word-wrap: normal;
}
.countdown .item-prices dt, .countdown .item-prices dd {
width: 84px;
height: 29px;
line-height: 29px;
float: left;
text-align: center;
}
.countdown .item-prices dt {
font-size: 14px;
color: #666;
}
.countdown .item-prices dd {
font: 17px Verdana;
letter-spacing: -2px;
color: #333;
}
.countdown .time-count {
margin: 14px 0 0 10px;
white-space: nowrap;
}
.countdown .time-count .tit {
vertical-align: middle;
display: inline;
}
.countdown .time-count .value{
display:inline;
font:normal 20px Verdana;
color:#333;
line-height:1em;
vertical-align: middle;
}
.countdown .time-count .unit{
vertical-align: middle;
margin:0 2px 0 1px;
}
.countdown .picbox {
width: 460px;
height: 310px;
position: relative;
z-index: 10;
float: left;
border: 1px solid #A51100;
border-left: none;
background:#cf301a;
}
.countdown .moo-countdown-run .picbox{
border-color:#1e4502;
background:#2e7409;
}
.countdown .pic {
width: 452px;
height: 301px;
padding: 3px 4px 4px;
border-top: 1px solid #FD9B8B;
}
.countdown .moo-countdown-run .pic {
border-color: #69B539;
}
.countdown .pic a {
border: 1px solid #F5D6D1;
display: block;
text-align: center;
background-color: white;
height: 300px;
overflow: hidden;
}
#second{position:relative;}
#second .item-buy{left:-27px;top:-128px;}
.time-count{height:50px;line-height:50px;}
#second .time-count{position:absolute;left:0;top:-10px;}
#second .group-end{
width:281px;
height:68px;
background:url(assets/group.png) no-repeat right -234px;
position:absolute;
left:-27px;
top:-128px;
z-index:99;
float:left
}
#second .group-end .btn{
background:url(assets/group.png) no-repeat 0 -342px;
display:block;
height:22px;
width:98px;
position:absolute;
right:0;
top:30px;
}
#second .group-end strong{position:relative;}
#second .group-end strong b{font-size:20px;}
.second_con{position:relative}
