拿到这一张效果图，你会用什么样的方式去实现呢？（让我们一起思考）
我的第一个想法就是用四张图片来表示四个不同的状态，当我着手处理图片的时候发现一个弊端，如果里面的字要增加或者是减少那岂不是很悲剧？于是我停了下来再次分析效果图，在着手写代码之前花较多的时间去分析效果图很有必要，这样即使日后需要修改你还是会发现当时已经考虑到这种情况，只需要修改小小的一些代码就可以实现修改后的效果。
接下来果然让我猜中了，里面的字确实需要修改，而且数量也由四个变成了五个，这时你是不是头大了，当时没说要加字啊，更没说要加状态条啊？是的，当时是没有说，可是现在要加，今天修改好，明天提交。
我暗自庆幸，亏得我想到了，马勒隔壁，不然又不消停了。不知道你想到了没有？
大家不妨看一下我分离出来的demo（图片渐变在两个字的时候过度有些不好，我懒得处理，请不必在意），本demo仅仅为了说明“分析效果图”这个步骤的重要性，如果当初没有考虑到字数会改变，没有考虑到状态条数量会增加，那么日后的修改估计没有这么方便，所以个人认为在分析效果图上花费的时间一定不能少，千万不要看一块做一块，那样估计当你发现下一个区域块可能和前面有冲突的时候就会去马勒隔壁了。
/*万事开头难*/
相关日志-小站地图为你展开
<![CDATA[
<ol>
<li class="comment even thread-even depth-1" id="li-comment-2771">
<div id="comment-2771">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/c5585bc91bfaf779dd411905850480a1.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.xiaogou.tk' rel='external nofollow' class='url'>善良的小狗</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 10.0.619.0' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在455 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我会是沙发吗额 (lover)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2771#respond' onclick='return addComment.moveForm("comment-2771", "2771", "respond", "1819")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2772">
<div id="comment-2772">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/6a3c42d009cc1539ef1c617b3921f944.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.iklive.com' rel='external nofollow' class='url'>创享·生活</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 5.0.375.99' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在455 天之前</span>
</div>
<div class="comment-text clearfix">
<p>嘿嘿…方法有很多种，只是看看哪种最方便最好。呵呵</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2772#respond' onclick='return addComment.moveForm("comment-2772", "2772", "respond", "1819")'>回复</a> </div>
</div>
</li>
<li class="comment even thread-even depth-1" id="li-comment-2773">
<div id="comment-2773">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/8c8d9931e5d1ba7537982f65fea8d805.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://ons.me/' rel='external nofollow' class='url'>西门</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 9.0.597.98' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在455 天之前</span>
</div>
<div class="comment-text clearfix">
<p><a href="http://www.laozhuhome.com/?r=http://www.hzlzh.com/" rel="nofollow">http://www.hzlzh.com/</a><br />
<a href="http://www.laozhuhome.com/?r=http://www.ks-pe.com/" rel="nofollow">http://www.ks-pe.com/</a><br />
这两个博客的表现效果都还不错。</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2773#respond' onclick='return addComment.moveForm("comment-2773", "2773", "respond", "1819")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2774">
<div id="comment-2774">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/5c73a3b6e3d5f97edea783410ab3e82a.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.sub-273.com' rel='external nofollow' class='url'>ADD~``</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 11.0.672.2' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在455 天之前</span>
</div>
<div class="comment-text clearfix">
<p>这个确实有必要在开始敲代码前..考虑下怎么实现..以前吃过上别的亏- -..话说你这篇离上篇的时间..号久了 ~</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2774#respond' onclick='return addComment.moveForm("comment-2774", "2774", "respond", "1819")'>回复</a> </div>
</div>
</li>
<li class="comment even thread-even depth-1" id="li-comment-2783">
<div id="comment-2783">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/0416a34f4d4e333ce9599802826c88d6.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://blog.moonlightdoudou.com' rel='external nofollow' class='url'>月光下的小豆豆</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/ie8.png' title='Internet Explorer 8.0' alt='Internet Explorer' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在453 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我痛苦的发现我彻彻底底的落后了</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2783#respond' onclick='return addComment.moveForm("comment-2783", "2783", "respond", "1819")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2876">
<div id="comment-2876">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/84bb7cd3b9babc16388566df64943b89.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://jacall.isj8.com' rel='external nofollow' class='url'>JaCall</a> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 9.0.597.98' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows Server 2003' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在439 天之前</span>
</div>
<div class="comment-text clearfix">
<p>很个性！不错哟！</p>
<p>主题也自己改了？？？</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/the-value-of-analyse-layout?replytocom=2876#respond' onclick='return addComment.moveForm("comment-2876", "2876", "respond", "1819")'>回复</a> </div>
</div>
</li>
</ol>
]]>
快来吐槽吧
