jQuery日历到期提醒特效

1、新建html文档。

2、书写hmtl代码。

<div class="zAccountInner zAccount2 clearfix">

 <div class="colorsBox clearfix">

  <div><span class="yellow box"></span>预期到期</div>

  <div><span class="blue box"></span>已到期</div>

 </div>

 <div class="zAccountPlanL span5 no-margin-left" style="position:absolute;left:0px;top:50px;width:450px;">

  <div id="div1"></div>

  <input type="hidden" id="index_clander" />

  <input type="hidden" id="d523_y">

 </div>

 <div class="span7" style="height: 320px;position:absolute;right:0;text-align:center;top:50px;width:290px;">

  <div class="zAccount5 boxSize no-margin-left">

   <div class="zAccountPlanRinner zAccountPlanR">

    <div class="today">今天</div>

    <div class="week" id="d523_w">星期三</div>

    <div class="day" id="d523_d">27</div>

    <p class="date">创新性低风险产品，安全靠谱

    <a href="" class="detail">查看明细</a>

    <div class="waveBox">

     <div class="line_water waveInner"> <img src="images/zz111.png"> <img src="images/zz111.png"> </div>

     <div class="line_water2 waveInner"> <img src="images/zz222.png"> <img src="images/zz222.png"> </div>

    </div>

   </div>

  </div>

 </div>

</div>

3、初始化css代码。

<style>

.row-fluid .zAccountPlanRinner { position: relative; }

.waveBox { position: absolute; left: 0; bottom: 0; width: 100%; height: 61px; overflow: hidden; }

.waveInner { position: absolute; left: 0; bottom: 0; width: 1200px; height: 61px; }

.waveInner img { float: left; display: block; }

.zAccountPlanR .detail { color: #fb653b; position: relative; z-index: 3; }

.row-fluid .zAccountPlanR { background-image: none; }

</style>

4、书写css代码。

.zAccountInner{width:770px;height:370px;overflow:hidden;position:relative;margin:20px auto 0 auto;}

.row-fluid  .zAccountPlanR{border-top:4px solid #fc977b;height:326px;background:url("../images/zArtboard29.png") repeat-x 0 bottom;line-height:2;text-align:center; }

.row-fluid  .zAccount5{width:300px;float:left;}

.zAccountPlanRinner{margin-right:20px;}

.zAccountPlanR .week{  font-size:14px;line-height:2;}

.zAccountPlanR  .date{font-size:18px;line-height:30px;padding:0 5px 10px 5px;}

.today{font-size:16px;color:#fb653b;padding:8px 0;text-align:left;}

.zAccountPlanR  .detail{font-size:16px;}

.zAccountPlanR  .day{font-size:48px;color:#fb653b;line-height:84px;padding-bottom:20px;}

.zAccountPlanR  .detail{color:#fb653b;}

.zAccountLeft{padding-bottom:15px;   margin-right:1%;}

.zAccountRight{margin-left:1% !important;}

.zTabMoney{cursor:pointer;}

.zTabMoney p{width:50%;font-size:18px;float:left;text-align:center;background:#e5e5e5;color:#565656;line-height:63px;}

.zTabMoney p.cur{background:#ffffff;color:#fb653b}

.zAccountPlanInvest{border:1px solid #ececec;}

.zSituation table{text-align:center;line-height:51px;}

.zSituation table tr{border-top:1px solid #ececec;}

.zAccountable .invest.gray{background:#d2d2d2;}

.colorsBox{ margin-bottom:18px; }

.colorsBox>div{float:left ;font-size:18px;line-height:24px;}

.colorsBox>div:first-child{padding-right:45px;}

.colorsBox>div .box{display:block;width:25px;height:18px;float:left;background:#fdab01;margin-top:3px;margin-right:20px;}

.colorsBox>div .box.blue{background:#63b7fd;}

5、代码整体结构。

6、查看效果。