Copyright © 2000-2016 www.knowsky.com All rights reserved | 沪ICP备05001343号

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

CSS的sPRite和单位 (1).关于css sprite技术

比方说: 有个论坛频道,其中有个一些论坛特有的小图标(火啊,顶啊之类),基于整站小图标大团结的思想,这些小图标也放在了那个icon背景图片上了。然而,数年下来,我发现,论坛的那几个图标就论坛这个频道使用了,这几个图标跟着整站走,对于99%的页面而言,是多余的,浪费流量,典型的“占着茅坑不拉屎”! 数年之后,有些图标要做调整。问题来了,有些图标不记得其他地方有没有使用过,不敢删除,不敢替换。这可维护性立马下降了很多! 改进: 属性分组:例如,所有分享系列的图标(新浪微博,企鹅微博小图标)集合 功能分组:所有表示餐厅优惠状态的图标(惠,券等)集合在一起 直接独立:无亲无故的小图标就不要硬是去攀关系,自己独立一家即可 总结: 不能执着于某个牛角尖(我要最少的请求数)而破坏了大局的权衡。

(2).绝对单位和相对单位

input, textarea, select这些控件元素本身就有文字大小,默认不会直接继承body等父级标签。因此,我们需要reset下,否则16像素的文字会吓着用户的。

最初的时候,受一些大网站的影响,是这样设置的: Codeinput, textarea, select { font-size: 12px; }

我看了下,眼睛微博还是这样子的(//zxx: 无数次事实表明,要想举反例,眼睛微博一找一个准): 然而,这种设置很不好。为何,看看上面“螃蟹和章鱼的故事”中螃蟹的下场就知道了!不灵活,不能自动适应,只会变成困兽,任人宰割。 好的做法是这个: Codeinput, textarea, select { font-size: 100%; }

这个百分之百最佳实践,毋庸置疑,与什么狗屁经验没有一点关系。为什么这样设置?你用了就知道了。 对了,临时想到其他一点东西,我看到很多人写两层标签按钮的时候,会有类似下面的代码: Code.redbtn { height: 24px; ... }.redbtn .btn { height: 24px; ... }

如果你不写个高度height就缺乏安全感的话,你这样写也好啊: Code.redbtn { height: 24px; ... }.redbtn .btn { height: 100%; ... }

其实呢,有个height是多余的,这样子就够了: Code.redbtn { ... }.redbtn .btn { height: 24px; ... }

记住,内外标签如果高度一样,不要同时出现相同的定值。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航