由黄钻等级图标处理引发的思考(2)
作者:飘飘 来源:ISD Webteam 发布时间:2009-11-16 12:37:00
回顾完各种处理方式后,一起来了解一下实现上的细节,分析一下文章第一张图所示,共有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-stack;display:inline-block;
因各浏览器兼容性的原因,需要定义了两个属性,这里不禁一定要问了,为什么不选用-moz-inline-box呢?这里选用-moz-inline-stack而非-moz-inline-box的原因是:
使用-moz-inline-stack可以解决Firefox2不支持inline-block的问题,但是所有的Firefox版本对于属性为-moz-inline-stack的Element,它的First child element会继承该Element的宽度和高度,但是再下一级的Element不会再继承该属性。
这里说说一下与本图标应用无关的话题,在实际应用中-moz-inline-box会存在元素间的对齐等问题,在处理自适应宽的<button>就能遇到。虽然Firefox有一个私有属性-moz-box-align来帮助解决Element水平对齐问题,但未能预见的问题依旧不少,而相对来说-moz-inline-stack的表现更像inline-block,这点可以在Firefox3中验证出来。仅管如此,-moz-inline-stack使用时也会有一个bug,如果一个moz-inline-stack的Element外层Element是inline属性就会使Firefox中其包含的链接不可点(和IE6的filter+position:absolute出现的BUG一样),这个可以借助position:relative;来解决。
设置完display属性后,我们就给图标定义宽高。实际的图标处理中,完成这两步基本就OK了。但是这个图标应用较为特殊,因为它是两个背景合成一个图标的(载体+等级数),如下图:
下面是两个载体的拼合示意:
所以在结构上加多了两个span,一个是给等级数字的背景载体,另一个是隐藏图标替换文字。
代码写完后,发现代码量相当的惊人,因为只在最外层定义不同的className,那么,就意味着,我们要对众多个类及其里面的标题定义:
.gb_vip_1 span,
.gb_vip_2 span,
.gb_vip_3 span,
.gb_vip_4 span,
.gb_vip_5 span,
.gb_vip_6 span,
.gb_vip_7 span
这样代码就相当臃肿,于是,改变className的定义方式,给各个等级图标最外层容器定义相同的命名,给里面数字的载体定义区别显示的命名(带数字的命名是方便逻辑实现):
<strong class="gb_vip_icon"><span class="lv1"><span class="gb_vip_none">lv1</span></span></strong>
<strong class="gb_vip_icon"><span class="lv2"><span class="gb_vip_none">lv2</span></span></strong>
以上所述的供讨论和参考,期盼大伙一些其它的想法和分享。
猜你喜欢
- 最近,W3C的一项公告称,在W3C与XHTML2的合同于今年年底到期后将不会续签。这意味着W3C停止了对XHTML2的开发,转而大力支持HT
- 当你连接到MySQL服务器时,你应使用一个密码。密码不以明文在上传输。客户端连接序列中的密码处理在MySQL 4.1.1中已经升级,很安全。
- MySQL Group By用法我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是
- 在SQL查询分析器执行以下代码就可以了。01.declare @t varchar(255),@c varchar(255) 02.decl
- 版权所有:Copyright 1997 Netscape Communications Corporation原文链接:Object Hie
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中,一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中
- Guide to the Section 508 Standards for Electronic and Information Tech
- 最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同
- 通常,在完成了一件网页设计后,设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行
- 经常有网友会问,SQL Server占用了太多的内存,而且还会不断的增长;或者说已经设置了使用内存,可它没有用到那么多,这是怎么一回事儿呢?
- 设计网站的同志背景主要有两种:学计算机、学艺术。基本上会写代码的不懂设计,会设计的不懂代码,这个格局似乎到今天还没变。某些学计算机的同学,有
- 问题:1. 访问 ASP 页面时,出现以下错误:Active Server Pages 错误 'ASP 0201'错误无效的
- 有时,希望除去某些记录或更改它们的内容。DELETE 和 UPDATE 语句令我们能做到这一点。用update修改记录UPDATE tbl_
- 使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创
- innerHTML,outerHTML innerHTML检索或设置标签内的内容;outerHTML检索或设置整个标签的内容(包含标签)。&
- osql 工具是一个 Microsoft Windows 32 命令提示符工具,您可以使用它运行 Transact-SQL 语句和脚本文件。
- 1.尽量不要对列名进行函数处理。而是针对后面的值进行处理例如where col1 = -5的效率比where -col1=5的效率要高因为后
- asp无组件上传VBS编写的大家见的多了,这个是纯javascript实现的上传,原来unicode可以解决读取位置的问题,这次真的是纯JS
- 这里列出了13种实现图片或网页内容 lightbox 效果的方法,大部分是链接到各种lightbox作者的英文页面,里面都有源代码下载。Th
- 浏览器:IE ,不支持firefoxfilter视觉滤镜的种类:Alpha(透明度) Blur(模糊) Chroma(指定颜色透明) Dro