消息框弹窗;

　　不是alert这种弹窗，是用button和两个a链接写一个弹窗。

　　大概理解了一点脚本阻塞，要想页面加载快、流畅，就要根据内容的重要性或者需要的时机，先后次序来写。

　　　　在<head>里面外链一个css样式，在<body>中书写html内容，但是将动态产生的效果全部隐藏起来（实际上是加载出来的）。比如：

 

 你以为我页面上只有一个按钮吗？ 天真。实际上页面是这样的：

　　　　

弹窗内容是写在<body>里的，其实是加载出来了的。但是通过css样式把它隐藏了而已。display:none

当我点击“弹窗”按钮，这时候才会用到js代码，所以js放在</body>上面。这个时候只要把弹窗内容.style.display="block",它就出现了。

所以实际上，根据使用的时机，js代码是最后才要用的。而我页面的内容早就全部加载好了。

 

这里有用到几个css样式，之前没见过：

　　1. 垂直居中position+transform：水平居中很简单，垂直居中就麻烦多了。

　　　　在知道元素宽高的时候，用margin-left和margin-top来水平垂直居中，在不知道元素宽高的时候，用绝对定位搭配transform，

　　　　

position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);

 

　　2.@keyframes动画效果：

　　　　可以用0%-100%来表示动画起始效果。等于使用from和to。可以规定起始颜色，位置，大小，形状.....

　　　　animation也是动画效果的属性，规定了从动画开始到结束所用的时间。

　　3.-webkit-user-select ：这部分内容被禁止选中。

　　　　就像百度文库不能复制粘贴一样，因为鼠标不能选中里面的文字，只需要把-webkit-user-select:none就实现了。

　　4.cursor ：鼠标移上去的样式。

　　　　有很多样式，什么十字形啊，小手啊，箭头啊。