网页重构:由网页图标处理引发的思考

内容标签+背景
这里说的是带文字等内容的标签加入黄钻等级图标背景来实现，如<span>我是黄钻7级用户</span>，给span的左边定义一个图标，把文字向右移动一定的位置。大伙在实践中验证，这种在语义上和实现上，可以说是完美的了。但是，不方便项目代码的规划和管理，特别像等级图片这类的可以归入库的代码及应用方式。同时，标题的大小区域为不可控，在后续的维护中，更会不定期更改其区域大小，那么，就在图片的合并上存在瓶颈，难以确定一个图片该预留多大的透明区域，使之不影响到其它场景的图片应用，也可能会因为后期的维护处理不当，影响到其它标签区域的背景显示异常，造成不良的用户体验。

标签载体+背景
结合前几点所述，用一个标签作为图片的载体，再给它定义背景等属性，显示出相应的图标。它既可以免除用图片处理产生的流量和请求及服务器压力，又减去合并图片时所考虑的预留空间尺寸。一般标签不具img的特殊属性，既能成块状显示出图标，又能和文字等共处一行内，那么在选取的这个标签要在样式上定义得较少，不易继承样式影响表现，破坏页面的兼容和库文件的管理维护。
在实际项目中，选用了strong作为图标的替代标签：

回顾完各种处理方式后，一起来了解一下实现上的细节，分析一下文章第一张图所示，共有38个图标，且都是图形化，原始想法是，把38个图合并成一个文件。但细心看，这38个图片，有好多的相同的图形，经过整理后，得到下面这张图：

除四个图标载体外，数字都是相同的，因为这里使用的是第四种处理方式，那么在图标的合并上，不用给各小图片块预留过多的透明区域。
雪碧图处理好以后，就可以着手写代码来实现效果了。

<strong class="gb_vip_1"><span><span>lv1</span></span></strong>
<strong class="gb_vip_2"><span><span>lv2</span></span></strong>

为了让标签具有img的特有属性，给strong定义display:-moz-inline-st

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!