css3 不 京东 遮挡 遮罩 京东
雪花永远飘在所有层的最前面，按照我们以往掌握的css2的知识来看其实可以实现但是唯一缺点就是被遮住的其他按钮或者链接也会被遮挡住按不了。
如果想要某一个层永远显示在最前面，也不会去遮挡到其他的按钮或者链接就在这个层上添加：
pointer-events:none 默认属性值是：auto
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～
1. This moment will nap, you will have a dream; But this moment study,you will interpret a dream。
此刻打盹，你将做梦；而此刻学习，你将圆梦。 //不要做白日梦，学习才重要
2. I leave uncultivated today, was precisely yesterday perishes tomorrow which person of the body implored。
我荒废的今日，正是昨日殒身之人祈求的明日。 //不要虚度每一天，做什么都好只要学到有用的东西哪怕一天记一个单词
3. Thought is already is late, exactly is the earliest time。
觉得为时已晚的时候，恰恰是最早的时候。 //学习永远都不会晚，等你30岁时说20岁学就好了，在等你40岁时说你30岁学就好了
4. Not matter of the today will drag tomorrow。
勿将今日之事拖到明日。 //今天能决解的事，要今天要决解
5. Time the study pain is temporary, has not learned the pain is life-long。
学习时的苦痛是暂时的，未学到的痛苦是终生的。 //每天去记忆一件事情很费脑子，但是掌握了可以靠他赚钱
6. Studies this matter, lacks the time, but is lacks diligently。
学习这件事，不是缺乏时间，而是缺乏努力。 //总是说难，只要你感兴趣的事情哪怕给你一辈子的时间去学习还怕学不会吗？
7. Perhaps happiness does not arrange the position, but succeeds must arrange the position。
幸福或许不排名次，但成功必排名次。 //每个人的幸福点不同，但是做一件事情成功了就会有成就感。
8. The study certainly is not the life complete. But, since continually life part of – studies also is unable to conquer, what but also can make?
学习并不是人生的全部。但，既然连人生的一部分——学习也无法征服，还能做什么呢？ //学习各种都是人必须要经历的
9. Please enjoy the pain which is unable to avoid。
请享受无法回避的痛苦。 //可能一帆风顺，但大部分情况下或多或少阻碍会有，遇到了你才会进步。
10. Only has compared to the others early, diligently diligently, can feel the successful taste。
只有比别人更早、更勤奋地努力，才能尝到成功的滋味。 //要比大多数人学习时间长才行。
11. Nobody can casually succeed, it comes from the thorough self-control and the will。
谁也不能随随便便成功，它来自彻底的自我管理和毅力。 //提升自己的能力才是关键
12. The time is passing。
时间在流逝。 //人活的时间最多就也是 7，80岁，死了就什么都没了，好好感受活着现在。
13. Now drips the saliva, will become tomorrow the tear。
现在流的口水，将成为明天的眼泪。 //今天想得到又得不到的东西，将会是你每一天惦记的，也伴随着痛苦。
14. The dog equally study, the gentleman equally plays。
狗一样地学，绅士一样地玩。 //向比你会的人学习，别管他是不是你的晚辈，做事时候要认真谨慎。
15. Today does not walk, will have to run tomorrow。
今天不走，明天要跑。 //不要把问题都集中在一个时间点上，要适当分流。
16. The investment future person will be, will be loyal to the reality person。
投资未来的人是忠于现实的人。//对美好的未来有向往，在现实今天的你要充实自己
17. The education level represents the income。
受教育程度代表收入。 //（开始有点不赞同，但是总体来说还是受教育的人收入高于低教育的人）
18. One day, has not been able again to come。
一天过完，不会再来。 //浪费时间别后悔
19. Even if the present, the match does not stop changes the page。
即使现在，对手也不停地翻动书页。 //社会在进步的，你别落后了。
20. Has not been difficult, then does not have attains。
没有艰辛，便无所获 //不解释
vs2015 php
之前一直在使用DW发现JS和CSS3部分的提示还不够完善，转去使用vs2015。发现VS不支持PHP提示，这里推荐使用PhpTools，这是为VS提供PHP的IDS提示工具可以免费使用30天但之后需要激活。
最新更新：https://visualstudiogallery.msdn.microsoft.com/6eb51f05-ef01-4513-ac83-4c5f50c95fb5
H5缓存
1，<html lang=”en” manifest=’manifest.appcache’>
2，添加文件
//manifest.appcache
你直接修改文件是没用的，你只有修改版本好才能达到更新页面的效果，例如：升级到version 0.2
下面代码意思是
缓存列表是
img/1.jpg
img/2.jpg
css/css.css
其他的内容均网络下载
CACHE MANIFEST #version 0.1 CACHE: img/1.jpg img/2.jpg css/css.css NETWORK: *
更全面例子：
CACHE MANIFEST CACHE: # 需要缓存的列表 style1.css 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要缓存的 4.jpg FALLBACK: # 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html 2.jpg加载失败后就加载3.jpg代替 2.jpg/3.jpg
3，加上以下这段JS，当修改了manifest.appcache中的版本号就会在重新更新之前的缓存
<script>
window.onload = function () {
window.applicationCache.addEventListener('updateready', function (e) {
if( window.applicationCache.status==window.applicationCache.UPDATEREADY ){
window.applicationCache.swapCache();
window.location.reload();
}
},false);
}
</script>
4，修改apache文件mime.types
在文件的末尾加上
text/cache-manifest appcache
H5缓存优点：就是离线时候还能正常显示页面，下次访问时候速度极快，降低服务器压力。
缺点：一旦有一个文件更新了它不会只更新一个文件的缓存而是全部文件都缓存一边，还有一个页面带有参数例如：a.php?p=1 和 a.php?=2，会当作两个页面把同样的CSS和JS再多缓存一次。
在什么情况下适合H5缓存：
1，在单页面时候没有参数
2，不需要实时更新业务
3，手机微信webapp（手机流量珍贵）
相关文章：http://www.cnblogs.com/yexiaochai/p/4271834.html
相关视频：http://www.imooc.com/video/3249
css app 手机 前端 bootstrap微信注意细节
相关链接《css初始化》
meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：
// 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
// 禁止百度SiteApp转码声明
<meta http-equiv="Cache-Control" content="no-siteapp">
// 禁止自动识别电话和邮箱；
<meta name="format-detection" content="telephone=no, email=no">
// 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
// 添加到 IOS 主屏后的标题
<meta name="apple-mobile-web-app-title" content="觉唯设计">
// 隐藏地址栏，启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">
// 优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
// 注明作者
<meta name="author" content="www.jiawin.com">
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。
rem（root element，html）是 CSS3 新增的一个相对单位，相对于根目录的 em 而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是 html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。从而可以有效的快速保持任何分辨率下保持视觉一致。
当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。
a, img {
-webkit-touch-callout:none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
-webkit-user-select:none; /* 禁止选中文本（如无文本选中需求，此为必选项） */
user-select:none;
}
还记得满大街的摇一摇抽奖吗？大部分核心代码就是这个。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
alert('别摇那么大力嘛...');
// your code here
}
lastX = x;
lastY = y;
lastZ = z;
}
常见的CSS3动画效果类型：
移动端上touch事件有四个，其触发顺序为：
touchstart -> touchmove -> touchend -> touchcancel
在移动端 click 会有 300ms 的延迟，所以体验十分差，建议封装的 tap 事件来代替 click 事件（其实 tap 是由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成）。
注：对于某些 android 系统 touch 的 bug:
比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。
对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。但是对于大图，就不要使用base64编码了，不然你的代码会变成无底洞，拉代码滚动条拉到你想哭。编码和解码也需要计算量，比较耗费CPU。
base64有以下几个优点：
如果你涉及到动画制作，是否经常发现在PC端效果非常不错，但是到了手机上就卡翔了。这个时候我们可以通过CSS开启硬件加速来改善动画效果，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速。CSS animations, transforms 以及 transitions 默认是不会自动开启GPU加速，而是需要某些CSS规则来触发，例如：transform: translate3d。开启硬件加速后可以解决页面闪白等问题，可以让渲染更流畅。
内容排版布局显示，尽量少使用float，建议使用display的box、flex等（多栏）自适应布局；优点表现在：
当用户在操作按钮的时候，如果按钮还是死死的，没有任何反应，这样子的体验是很差的，甚至是反人类的。在pc端我们都会习惯加上hover属性，来改变按钮状态；但移动端可不买这家伙的帐，在移动端没有鼠标一说，这个时候我们就可以让active上场了，带来的效果也是杠杠的。
//竖屏时使用的样式
@media all and (orientation:portrait) {
code here ...
}
//横屏时使用的样式
@media all and (orientation:landscape) {
code here ...
}
http://www.jiawin.com/mobile-web-development-solution