从题目可以看出，类格式写法就是指使用面向对象中定义类的格式书写CSS代码，如：
h1#technique-one {
width: 250px;
height: 25px;
background-image: url(logo.gif);
}
h3#technique-one span {
display: none;
}
PS：此写法是CSS-Tricks发表的“Nine Techniques for CSS Image Replacement”一文中提到的此方法，感觉很不错，所以在此分享一下。
首先，感谢下我的同事的分享，是很诡异的效果，想不通这个垂直居中是实现的原理，直接上代码
更新一下，已经找到实现的原理了，其实就是使用的display: inline-block;来实现的
这里有比较全的Demo，以及Mozilla blog的Cross-Browser Inline-Block
IE6 bug: while you add a <img /> in <a></a>(within <li></li>) which has been set to block element, that you will find a little blank in the bottom of your <li></li>, so the next <li> will misplacement. Here is an example:
<ul id="innerMenu">
<li><a href="/activ/01/01/default.asp?id=1"><img src="/images/activity/transparentInner.gif" border="0" /></a></li>
<li><a href="/activ/01/02/default.asp?id=1"></a></li>
<li><a href="/activ/01/03/default.asp?id=1"></a></li>
<li><a href="/activ/01/04/default.asp?id=1"></a></li>
</ul>
核心：方法一：让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；方法二：使用display: table; 方法三：直接使用table布局（使用太多table容易让结构看起来比较混乱，其实页面中使用少量的table，只要不要嵌套使用，还是可以实现使用少量CSS，达到最好的效果的），这种方法这里就不举例演示了。请看下面的示例……
阅读更多…
今天在做项目时，发现了一个很诡异的问题的，就是IE的style.opacity的值的问题。
情节：要做个相册的Javascript，由于要实现图片切换的透明变换效果，因为像Firefox等不支持filter（但是可读？同样IE如果通过改变style.opacity来实现透明也行不能，但IE中它也是可读的？啊，明白了，其实根本就没有opacity这个属性的，所以一般情况下，直接读取ele.style.opacity时，会提示undefined，但为什么这里不会出现提示，而且顺利通过呢？其实在读取这个属性之前，已经设置了ele.style.opacity=0，这里就相当于定义了个新的属性为opacity=0），为了兼容性，所以就直接通过if判断，如果透明度不等于1或者100，则透明度加0.1或10，代码如下：
阅读更多…
核心：当链接获得焦点后触发失去焦点即OK.
自己平时做项目时，都使用的直接在A标签上添加onfocus=”blur()”的方法来解决的，后来有人在web标准化联盟里面提到了这个问题，当时有个网友说了个自己没用过的方法（其实自己也根本就不知道）：在A标签上添加hidefocus=”hidefocus”、outline: 0;（FF）很感激这些友友们分享自己的经验，让无知的我又学到了，嘻嘻….
阅读更多…
核心：支持滤镜一切搞定，js的方法也是将传入的对象进行DOM操作，添加style=“filter: ….”。
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的
========================================================
此效果简单，。。。。相当不错 推荐
style=”FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png’)”
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
阅读更多…
核心：word-wrap: break-word; word-break: break-all;
测试代码如下：
测试结果：
总结：IE和chrome浏览器支持word-wrap:break-word; word-break:break-all;属性。但是火狐与opera浏览器不支持，只有用overflow:hidden;将溢出的连续英文字符隐藏掉。
核心：display: table-cell、line-height、tabel
第一种：display: table-cell的方式，IE7及以下不适用（目前主要指IE6、IE7），示例：
CSS:
html {
height: 100%;
}
body {
background: url(../images/bg.gif) 0 0 repeat;
height: 100%;
display: table;
width: 100%;
}
#box {
display: table-cell;
height: 100%;
text-align: center;
vertical-align: middle;
width: 100%;
}
#wrapper {
border: 1px solid red;
height: 300px;
margin: 0 auto;
width: 500px;
}
