不规则形状背景图翻转的CSS定位
拿到这一张效果图，你会用什么样的方式去实现呢？（让我们一起思考）
我的第一个想法就是用四张图片来表示四个不同的状态，当我着手处理图片的时候发现一个弊端，如果里面的字要增加或者是减少那岂不是很悲剧？于是我停了下来再次分析效果图，在着手写代码之前花较多的时间去分析效果图很有必要，这样即使日后需要修改你还是会发现当时已经考虑到这种情况，只需要修改小小的一些代码就可以实现修改后的效果。
接下来果然让我猜中了，里面的字确实需要修改，而且数量也由四个变成了五个，这时你是不是头大了，当时没说要加字啊，更没说要加状态条啊？是的，当时是没有说，可是现在要加，今天修改好，明天提交。
我暗自庆幸，亏得我想到了,不然又不消停了。不知道你想到了没有？
大家不妨看一下我分离出来的demo（图片渐变在两个字的时候过度有些不好，我懒得处理，请不必在意），本demo仅仅为了说明“分析效果图”这个步骤的重要性，如果当初没有考虑到字数会改变，没有考虑到状态条数量会增加，那么日后的修改估计没有这么方便，所以个人认为在分析效果图上花费的时间一定不能少，千万不要看一块做一块，那样估计当你发现下一个区域块可能和前面有冲突的时候就会去马勒隔壁了。
附上代码：（见第二页）
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Z-INDEX</title> <style> .tesco { width: 960px; margin: 10px auto; } .returnGoodsstep p { padding: 1px 0pt; } .content .returnstep { display: block; position: static; width: 678px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: rgb(102, 102, 102); height: 28px; line-height: 28px; text-indent: 0pt; border: 0pt none; } .returnstep b { float: left; color: rgb(0, 0, 0); } .returnstep span { float: left; position: relative; padding: 0pt 5px 0pt 20px; background: none repeat scroll 0% 0% rgb(227, 227, 227); } .returnstep span.one { z-index: 9; } .returnstep span.two { z-index: 8; } .returnstep span.three { z-index: 7; } .returnstep span.four { z-index: 6; } .returnstep span.five { z-index: 5; } .returnstep span.first { padding: 0pt 5px 0pt 10px; } .returnstep span.last { padding-right: 10px; } .returnstep span.on { background: url('590-tesco_sprite.gif') no-repeat scroll -47px -748px transparent; color: rgb(114, 53, 0); border: 0pt none; } .returnstep span s { position: absolute; width: 17px; height: 28px; background: url('590-tesco_sprite.gif') no-repeat scroll -4px -748px transparent; right: -15px; top: 0pt; z-index: 10; } .returnstep span.on s { background: url('590-tesco_sprite.gif') no-repeat scroll -24px -748px transparent; } .Bmethod { font-size: 12px; color: rgb(102, 102, 102); } .Bmethod span, .Bmethod span b { float: left; height: 28px; line-height: 28px; } .Bmethod span { background: url('590-tesco_sprite.gif') no-repeat scroll 0pt -634px transparent; padding-left: 13px; margin-left: -10px; } .Bmethod span b { height: 28px; background: url('590-tesco_sprite.gif') no-repeat scroll right -698px transparent; padding: 0pt 20px 0pt 5px; } .Bmethod span.on { background-position: 0pt -606px; } .Bmethod span.on b { background-position: right -664px; color: rgb(114, 53, 0); } .Bmethod span.first { background-position: -270px -698px; } </style> </head> <body> <div class="tesco"> <div class="tesco_content"> <h2>A方式</h2> <div class="tesco_card_order"> <div class="space_top_tab"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr class="content on"> <td class="bgLight-yellow" colspan="6"><div class="status space-tb returnGoodsstep"> <ul> <li> <div class="returnstep"> <b>另约状态：</b> <span class="first one on">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、信息已修改<s></s></span> <span class="four last">4、另约流程已结束，待评价</span> </div> <div class="returnstep"> <b>另约状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two on">2、申请已受理<s></s></span> <span class="three">3、信息已修改<s></s></span> <span class="four last">4、另约流程已结束，待评价</span> </div> <div class="returnstep"> <b>另约状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three on">3、信息已修改<s></s></span> <span class="four last">4、另约流程已结束，待评价</span> </div> <div class="returnstep"> <b>另约状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、信息已修改<s></s></span> <span class="four last on">4、另约流程已结束，待评价</span> </div> <p>2010-12-19 14:31:49 黄小虎 申请提交成功</p> <p>2010-12-19 15:17:05 陆指南 申请已受理</p> </li> </ul> </div> <div class="status space-tb returnGoodsstep" style="height: auto; display: block;"> <ul> <li> <div class="returnstep"> <b>退货状态：</b> <span class="first one on">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、取件<s></s></span> <span class="four">4、退货处理中<s></s></span> <span class="five last">5、退货结束，请评价</span> </div> <div class="returnstep"> <b>退货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two on">2、申请已受理<s></s></span> <span class="three">3、取件<s></s></span> <span class="four">4、退货处理中<s></s></span> <span class="five last">5、退货结束，请评价</span> </div> <div class="returnstep"> <b>退货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three on">3、取件<s></s></span> <span class="four">4、退货处理中<s></s></span> <span class="five last">5、退货结束，请评价</span> </div> <div class="returnstep"> <b>退货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、取件<s></s></span> <span class="four on">4、退货处理中<s></s></span> <span class="five last">5、退货结束，请评价</span> </div> <div class="returnstep"> <b>退货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、取件<s></s></span> <span class="four">4、退货处理中<s></s></span> <span class="five last on">5、退货结束，请评价</span> </div> <div class="returnstep"> <b>换货状态：</b> <span class="first one on">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、送新<s></s></span> <span class="four last">4、换货结束，请评价</span> </div> <div class="returnstep"> <b>换货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two on">2、申请已受理<s></s></span> <span class="three">3、送新<s></s></span> <span class="four last">4、换货结束，请评价</span> </div> <div class="returnstep"> <b>换货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three on">3、送新<s></s></span> <span class="four last">4、换货结束，请评价</span> </div> <div class="returnstep"> <b>换货状态：</b> <span class="first one">1、申请提交成功<s></s></span> <span class="two">2、申请已受理<s></s></span> <span class="three">3、送新<s></s></span> <span class="four last on">4、换货结束，请评价</span> </div> <p>2010-12-19 14:31:49 黄小虎 申请提交成功</p> <p>2010-12-19 15:17:05 陆指南 申请已受理</p> </li> </ul> </div> </td> </tr> </tbody> </table> </div> </div> <h2>B方式</h2> <div class="Bmethod"> <span class="first"><b>1、申请提交成功</b></span> <span class="on"><b>2、申请已受理</b></span> <span><b>3、信息已修改</b></span> <span><b>4、另约流程已结束，待评价</b></span> <span><b>5、另约流程已结束，待评价</b></span> <span><b>6、另约流程</b></span> </div> <div style="clear:both; height:100px"></div> </div> </div> </body> </html>
