- 17
- 九月
背景图片设置对CSS渲染效率的研究
这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究：
书写高效的CSS – 漫谈CSS的渲染效率http://www.52css.com/article.asp?id=787
CSS对Web页面载入效率的影响http://www.52css.com/article.asp?id=751
树型结构竖线用样式表（背景图）来实现，样式表背景图片只需要加载一次，而现在这个模式（用多个<img>）图片虽然有缓存机制，但还是有可以每张小图片都请求一次服务器的，所以我想用样式表来实现有多么的好呀，代码又精简，结构又清晰，效果又酷，但是结果我将近一个星期的测试，我这种设想彻底失败，原因就是样式表的渲染效率太差。新的构想没能实现，心情有些沮丧，但我想也应该让大家分享一下这个测试成果。
这里我再解释一下树型里的竖线，树的左边都有 ┌ ├ └ │ 这些竖线图表示树层次，我的1.0版里是用一张张的小图片堆积起来的，而这种使用样式表的是用<div class=”l2″></div> （l是字母L）这种代码来实现的，样式表负责填充背景图。
| 以下为引用的内容： Example Source Code [www.52css.com] #www_52css_com .l0{background:url(line0.gif) no-repeat center} #www_52css_com .l1{background:url(line1.gif) no-repeat center} #www_52css_com .l2{background:url(line2.gif) no-repeat center} #www_52css_com .l3{background:url(line3.gif) no-repeat center} #www_52css_com .l4{background:url(line4.gif) no-repeat center} #www_52css_com .ll{background:url(line5.gif) no-repeat center} #www_52css_com .pm0{background:url(plus0.gif) no-repeat center} #www_52css_com .pm1{background:url(plus1.gif) no-repeat center} #www_52css_com .pm2{background:url(plus2.gif) no-repeat center} #www_52css_com .pm3{background:url(plus3.gif) no-repeat center} #www_52css_com .expand .pm0{background:url(minus0.gif) no-repeat center} #www_52css_com .expand .pm1{background:url(minus1.gif) no-repeat center} #www_52css_com .expand .pm2{background:url(minus2.gif) no-repeat center} #www_52css_com .expand .pm3{background:url(minus3.gif) no-repeat center} |
- 17
- 九月
几个经典的css技巧
使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
期前也提到过这样的问题，更多信息可以看这里。
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
- 17
- 八月
最常用的12种CSS BUG解决方法与技巧
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助，如果您依然有疑问，欢迎您到52CSS.com查阅、搜索相关内容。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用。
| IE6及其更低版本 * html {} IE7及其更低版本 *:first-child+html {} * html {} 仅针对IE7 *:first-child+html {} IE7和当代浏览器 html>body{} 仅当代浏览器(IE7不适用) html>/**/body{} Opera9及其更低版本 html:first-child {} Safari html[xmlns*=""] body:last-child {} |
要使用这些选择器,请将它们放在样式之前. 例如:
| #content-box { width: 300px; height: 150px; } |
| * html #content-box { width: 250px; } |
| 当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 |
| *html{} |
IE 7 以下
| *:first-child+html {} * html {} |
只对IE 7
| *:first-child+html {} |
只对IE 7 和现代浏览器
| html>body {} |