HTML5和CSS3小技巧

一、before和after伪元素

 可以指定伪元素的尺寸，关联背景图片，结合伪类实现过度效果，

blockquote:before {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -3px -3px #ddd;
 
 display: block;
 height: 25px;
 width: 25px;
}
blockquote:after {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -1px -32px #ddd;
 
 display: block;
 height: 25px;
 width: 25px;
}

总结所能实现的效果如下：

a.可以实现折纸效果，

b.3D按钮效果

c.叠加的图片的效果

二、页面出现小缝隙的解决办法;:

 当板块之间出现小缝隙时候，考虑是否是文字的行高不同造成，解决办法可以重置最外成的字体的font-size:0，但不可重置内部的字体，这样就可以解决问题。

三、css3中选择奇偶数

div:nth-child(odd);   //奇数个div
div:ntb-child(even);   //偶数个div