CSS3 新特性
包括
CSS3 选择器（Selector）
@Font-face 特性、
Word-wrap &Text-overflow 样式
Text-decoration
多列布局（multi-column layout）
边框和颜色，颜色支持透明度（color, border）
渐变效果（Gradient）
阴影（Shadow）和反射（Reflect）效果
盒子模型
Transitions, Transforms 和 Animation
比如：@Font-face 特性
@font-face {
font-family: BorderWeb
src:url(BORDERW0.eot)
}
@font-face {
font-family: Runic
src:url(RUNICMT0.eot)
}
.border { FONT-SIZE: 35pxCOLOR: blackFONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110pxCOLOR: blackFONT-FAMILY: "Runic" }
更多参考：http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到标签相关的表单控件上
(label的for关联input的id，自动聚焦)
https://www.jianshu.com/p/9abf4e490ba5
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html
udefined、undefined
4，0、1、2、3
1,false
//报错。加上static标识属于构造函数的方法。实例化出来的对象不能调用构造函数的方法，只能使用构造函数的原型protoType和对象原型中的方法。
//报错。题中给构造函数添加了一个方法，然后使用对象的实例来调用改方法。对象不能调用构造函数的方法，只能调用其原型
1、纯js,无动画版本[html] view plain copy
window.scrollTo(x-coord, y-coord)
[html] view plain copy
如：window.scrollTo(0,0)
2、纯js，带动画版本
生硬版：
[html] view plain copy
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset
if ( pos >0 ) {
window.scrollTo( 0, pos - 20 )// how far to scroll on each step
} else {
window.clearInterval( scrollToTop )
}
}, 16)// how fast to scroll (this equals roughly 60 fps)
流畅版：
[html] view plain copy
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop
if (currentScroll >0) {
window.requestAnimationFrame(smoothscroll)
window.scrollTo (0,currentScroll - (currentScroll/5))
}
})()
3、jQuery,带动画版本
首先需要在顶部添加如下html元素：
[html] view plain copy
<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
</span>
其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：
[css] view plain copy
<span style="font-size:14px">/*returnTop*/
p#back-to-top{
position:fixed
display:none
bottom:100px
right:80px
}
p#back-to-top a{
text-align:center
text-decoration:none
color:#d1d1d1
display:block
width:64px
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s
-webkit-transition:color 1s
-o-transition:color 1s
}
p#back-to-top a:hover{
color:#979797
}
p#back-to-top a span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px
border-radius:6px
display:block
height:64px
width:56px
margin-bottom:5px
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition:background 1s
-webkit-transition:background 1s
-o-transition:background 1s
}
#back-to-top a:hover span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px
}
</span>
上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：
有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。
[html] view plain copy
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500)
}
else
{
$("#back-to-top").fadeOut(1500)
}
})
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
//$('body,html').animate({scrollTop:0},1000)
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000)
return false
}
$('body').animate({ scrollTop: 0 }, 1000)
return false
})
})
})
</script>
