其实这个效果的制作思路在以前的文章纯CSS图片切换效果中提到过，这次做了些拓展。让它成为流行的选项卡效果。当然这个效果也可以用JS实现，也是介绍过的，只用到了几句很简单的JavaScript就可以实现。
先看最终效果图：
由于是纯CSS实现的在载入速度和效率方面应该是最快的，所以很广泛的应用于信息类网站。这次就不多解释了，直接上效果：
分类目录归档：「 CSS相关 」
火狐也有bug
以前我们都是说IE的bug,特别是IE6的bug那叫一个神出鬼没。好吧，今天咱来看看被大家看成最标准的浏览器之一的火狐，让我轻轻的告诉你就像是说没有完美的东西一样火狐也是有bug的。
以前也有说到过一个关于火狐的一个制表符bug，可能大家没看见过(被我del了)。今天主要看看火狐的注释bug。情况是这样的：
在css的style标签中如果有html注释并且后面紧跟一个空格那么在火狐中就会使注释下面的样式失效，比如以下这段代码：
<style type="text/css>
<!-- 1.这里最好不要放注释 -->
* { margin:0; padding:0;}
body{ font:12px Verdana, Geneva, sans-serif; color:#666; padding:10px;}
<!-- 2.这里最好不要放注释 -->
p { color:red; }
</style>
如果这段代码放在火狐中浏览的话所有p标签的文字都会是默认颜色而不是红色。如果你用的也是火狐
解决方法：
在样式表中用CSS注释(/*注释*/)而不是用html注释(<!–注释–>)
IE条件注释详解
CSS条件注释是一微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。
总结一下通用的语法是这样的（注意红色部分）：
<!--[ if rang IE no]> ...... <![ endif ]-->
“rang”的取值有以下几种：
- lie: Less than or equal to的缩写，表示小于或者等于
- lt: Less than的缩写，表示小于
- Gte: greater than or equal to的缩写，表示大于或者等于
- Gt: greater than的缩写，表示大于
- !: 不等于，编程语言中逻辑非的符号
“no”即表示IE的具体版本号，如：5,6,7,8
“……”省略号表示在以上条件下显示出来的html代码，如:
<!--[ if lte IE 6]> <style type="text/css"> body{ text-align:center; } </style> <![ endif ]-->
这条代码表示：在IE6以下版本的浏览器中body元素的文字对齐方式为居中。
CSS样式代码缩写总结
使用缩写的代码行式自然有很多好处：如加快代码输入速度，减少CSS文件大小，便于阅读等。那好吧我们研究一下。大概总结了四种：
1.盒模型代码简写
关于边框如：
- border-color:#f00;
- border-with:1px;
- border-style:solid
可以简写成：
border:1px solid #f00;
关于margin或padding如：
- margin-top:10px;
- margin-left:15px;
- margin-bottom:16px;
- margin-right:17px;
用CSS实现给图片上色的效果
听着挺新鲜的，其实现起来很简单。让我忽发其想的是网友说到这个网页中幻灯片的效果：http://www.fullyillustrated.com/portfolio/
当你鼠标移动上去的时候图片会由黑白变成彩色的效果。刚看风的时候还以为用了js或者jquery呢。再用firebug一看就明白了：用到的只是一个简单的css sprite技术。
步骤是这样的：
1.先把你想要做的图片放到PS里面进行去色处理-“图像–调整–去色”或者“ctrl+shift+u”
2.将此图和原图片整合成上下两张的图片，如下图：
3.下一步写下代码：
xhtml代码：
<div id="box"> <a href="#"> <span></span> </a> </div>
CSS代码：
a {
float:left;
}
#box span {
border:3px solid #ccc;
display:block;
width:170px;
height:120px;
background:url(flower.jpg) center top no-repeat;
}
#box a:hover span {
background:url(flower.jpg) center -120px no-repeat;
}