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">创新性低风险产品，安全靠谱</p> <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、查看效果。
