编 写：袁 亮
时 间：2015-11-16
说 明：jquery事件绑定
一、作用
1、将html显示与js动态交互分离，不在html中写一堆的onclick等js
2、简化代码，统一处理，防止遗漏以及重复写，比如ajax请求等
3、结构清晰，分层，html，css，js等独立
二、如何绑定事件
1、bind：向匹配元素添加一个或多个事件处理器
1.1 所有jquery版本均支持，但1.7版本后，推荐使用on
1.2 只能对已经存在的元素进行事件绑定
1.3 了解即可，不使用
2、live:向当前或未来的匹配元素添加一个或多个事件处理器
2.1 jquery 1.9版本以上，已经删除
2.2 使用on来代替
3、delegate：为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
3.1 jquery 1.4以上版本支持
3.2 1.7以下版本的时候可以考虑使用，旧项目，新项目使用不要使用
4、on【重点】:为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
4.1 jquery 1.7以上版本支持
4.2 尽量使用这个，不要使用其他三种绑定
三、简单例子
$("选择器").on({
click:function(){
console.log("我是"+$(this));
console.log("点击触发");
},
mouseout:function(){
console.log("我是"+$(this));
console.log("鼠标触发");
}
},"子选择器(可选)");
四、常见问题(1.72版本jquery下测试)
1、元素后加载，事件绑定不成功
1.1 示范代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
//a标签事件绑定
$(".test a").on({
click:function(){
console.log("click");
}
});
//后加载生成dom节点
$(".test").prepend("<a>测试连接</a><hr>");
});
</script>
</code>
1.2 因为a标签是后加载的元素，在绑定事件的时候，dom数上还没有该元素，因此绑定失败
2、解决办法1
2.1 事件绑定在已经存在的父元素上，匹配选择器是否符合
2.2 示例代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
//后加载生成dom节点
$(".test").prepend("<a>测试连接</a><hr>");
//a标签事件绑定
$(".test").on({
click:function(){
console.log("click");
}
},"a");
});
</script>
</code>
2.3 优点：绑定事件与处理逻辑脱离，代码更简单易懂
2.4 缺点：需要注意选择器必须是已经存在的节点，子选择器可以是后加载的元素，不清楚的话，可以直接绑定在document上
iphone下，会出问题，元素需要添加cursor: pointer;样式，手机使用，不采用这个
3、解决办法2
3.1 在元素加载后，执行绑定函数
3.2 实例代码
<code>
<div class="test">你好</div>
<script type="text/javascript">
$(function(){
$(".test").prepend("<a>测试连接</a><hr>");
$(".test a").on({
click:function(){
console.log("click");
}
});
});
</script>
</code>
3.3 优点：各种情况都兼容，不会出现绑定失败
3.4 缺点：代码可能不是那么好看，绑定事件混在了处理逻辑中
五、使用建议
1、使用1.7以上版本jquery，2.0以下（不兼容ie8及以下版本）
2、绑定事件均使用on来绑定，不要使用其他的
3、对于后加载元素，在加载完成之后进行事件绑定，避免兼容性问题
六、原理，额外拓展，dom树结构（了解即可）
1、可以使用off来取消事件绑定
2、可以使用.one，只绑定一次，触发之后就取消绑定
3、页面dom数结构
4、事件如何冒泡
附参考文档：
1、浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
2、jQuery三种事件绑定方式.bind(),.live(),.delegate()
【前端技术文档】水平垂直居中方式
整 理：曹燕、肖雅君
时 间：2015-11-13
说 明：html中元素实现垂直水平居中的方式
3.2 vertical-align:middle配合line-height
（1）块级元素会独占一行，其宽度自动填满其父元素宽度。
内联元素不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。
（2）块级元素可以设置 width, height属性。
内联元素设置width, height无效。
（3）块级元素可以设置margin 和 padding.
内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
块级元素：div，p，h1 -h6，hr，ol，ul，dl dt dd，form
内联元素：a，br，img，input，label，select，span，strong，b，em，font，i,small
同时具备内联元素、块状元素的特点，设置方法是display:inline-block
①和其他元素都在一行上；
②元素可以设置width, height，margin 和 padding。
设置位置：块级元素
实现效果：使得块级元素内部的文本及内联元素、内联块状元素在水平方向上居中。并且它里面所有的文字、内联元素、内联块状元素都只会相对于最近一层块级元素来实现水平居中。
注：在IE6、7中，它能使任何元素进行水平居中。
示例：
效果：
设置位置：块级元素
实现效果：使块级元素自身水平居中。使用这个方法的前提是块级元素必须设置宽度，这样才能根据宽度自动调节左右两边的margin值，使之居中。
示例：
效果：
方法：position:absolute;left:50%;再设置magin-left的值为负的元素宽度的一半。
设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置宽度。
实现效果：使任何元素在水平方向上居中
示例：
效果：
2.4绝对定位水平居中方法二
方法：position:absolute; left:0; right:0; margin:auto;
设置位置：任何元素。前提是元素必须设置宽度。
实现效果：使任何元素在水平方向上居中
示例：
效果：
方法：给要居中的元素加一层wrapper，wrapper设置：position:relative; float:left; left:50%;居中元素自身设置：position:relative; left:-50%;
设置位置：任何元素。优点是无需知道元素的宽度。
示例：
效果：
方法：将一个元素height和line-hieght的值设为一样
设置元素：块级元素
实现效果：使得块元素内部的文本垂直居中显示
示例：
效果：
3.2 vertical-align:middle配合line-height
设置元素：块级元素设置line-height与自身的height相同，它的内联子元素设置vertical-align:middle。
实现效果：使得内联元素相对于父元素垂直居中。因为vertical-align设置的是内联元素的基线相对于该元素所在行的基线的垂直对齐方式，必须先通过line-height设置行高，然后vertical-align：middle使得该元素的基线与所在行基线垂直居中对齐。
注：在IE6中无效。
示例：
效果：
方法：position:absolute;top:50%;再设置magin-top的值为负的元素高度的一半。
设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置高度。
实现效果：使任何元素在垂直方向上居中。
示例：
效果：
方法：position:absolute;top:0;bottom:0;margin:auto;
设置位置：任何元素。前提是元素必须设置高度。
实现效果：使任何元素在垂直方向上居中。
示例：
效果：
（1）方法一：通过表格自身属性实现。水平居中通过align=”center”实现，垂直居中通过valign=”middle”实现，设置在th或td上，使得单元格的内容居中。
默认情况下，th完全居中，td在垂直方向上居中。
示例：
效果：
（2）方法二：通过css属性实现。水平居中通过text-align:center实现（前提是单元格内容是内联元素或内联块状元素），垂直居中通过vertical-align:middle实现。
对于那些不是表格的元素，可以通过display:table-cell 来把它模拟成一个表格单元格，然后利用4.1中表格居中的方法二实现居中。
示例：
效果：
方法：text-align:center;外层块元素的line-height与height值相同
方法：外层块设置text-align:center;vertical-align:middle;line-height与height值相同
方法一：position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;
方法二：position:absolute;top:50%;left:50%;margin-top:负半元素高;margin-left:负半元素宽;
方法：元素设置position:absolute;top:50%;left:50%;然后设置transform: translate(-50%,-50%);
示例：
效果：
前端与后端配合须知
整 理：晋哲、雷媛 时 间：2015-11-12 说 明：前端在团队合作中如何与上下游紧密配合 ---------- 与后端配合须知 ---------- 一、HTML方面 1、不要通篇都是<div>标签，便于后端识别HTML代码。 比如：<ul><li>用于结构、样式相同的列表。 2、在需要结构、样式相同的列表时需注意：如果有个别列表上有特殊样式，尽量不去添加单独的class或内嵌style，选择使用伪类或伪元素选择器编写特殊的样式。保证列表的HTML代码结构的一致性。 比如<ul><li>列表，多个<a>标签列表等，往往需要设置最后一个元素的样式，可以使用伪元素选择器:last-child编写独立的样式。 3、注释很重要 当页面代码很多时，需用注释划分代码区块，注明用途，但也不宜文字过多。 4、前端需要会简单的php，if判断、for循环、include语句的改写 比如：一个列表一样的数据，无需写多个li标签，可以写一个li然后用for循环，精简代码；公共引用的header和footer部分使用include语句引入。 5、在Appserv中直接编写.php文件，利于查看生效的php代码，也方便后端改写。 6、需要后端for循环写入的list代码，前端在HTML中复制出两段以上，方便后端知晓，只有一段list代码不好找。 比如：<li>标签约定俗成地作为循环列表，后端人员看到<li>标签时也可引起注意。 7、需要后端if判断的代码，前端就不需要为了都显示出来而写多余的js代码。只需要显示一个代码段，其他代码段用style="display:none;"隐藏起来就可以了。 比如：下图弹出框有两个条件状态：领取成功、领取失败。将需要改变的代码段，一个显示，一个隐藏，之后后端只需if判断“popup-box”的部分即可。但需注意：选项卡的内容切换不需要后端if判断，所以还是属于前端js去控制显示和隐藏。 二、CSS方面 1、不要使用id选择器编写样式（编写js时可以设置id，建议jQuery用class选择器）。 2、交互切换性的部分，单独立一个特殊样式的class名，方便调取。 比如：<li>列表中需要一个凸显的样式，那么在<li>里面编写公共样式，再将变换的样式写在单独的class上。常提取出背景色background-color、背景图片background-image、字体颜色color、边框色border-color等样式。
3、切图过程中，所有的图片都需要优化，手机端的图片不能超过70KB，避免后期后端还需去单独优化图片。 4、项目页面的样式放置在统一的外部css文件中；多个页面引用的公共样式需提炼出来放置一处，不要多处复制。 5、独立的页面，如活动页面，因css代码较少，根据后端需求，一般内嵌至HTML页面的<head>中。 三、JS方面 1、js代码统一放置在页面代码最下面，位于</body>之上；引用的外部js放置在编写的js代码之前，利于js代码的加载。 2、每个模块区域作用的js代码要分段编写，并注明每段js代码的用途，不要将所有的js代码混合在一起或合并起来，方便后端快速修改、删除，并合并前后端代码。 3、交互性js效果都需前端实现，减少后端工作量；根据用户体验，交互效果尽量考虑周全，减少遗漏。 4、若前期已有现成的js效果代码可以直接采用，比自己现编写更实用、更效率。 四、调试页面 1、做完页面之后前端必须先对照设计稿调试页面，包括电脑上的页面显示以及各种型号的手机上的呈现效果。在确认没有页面结构、样式问题后，再提交到后端。尽量避免HTML结构代码的返工修改。 2、对照设计图调试的同时，需要考虑用户的可操作性，以及页面的美观效果，避免后期上线时需再次修改。 比如：字体的大小是否合适、弹框文字是否居中、弹框的遮罩层点击之后弹框是否关闭（包括确定按钮、关闭按钮）等等，一系列影响美观和用户操作的细节问题。 3、浏览器审查元素调试页面样式更便捷、更直观、更准确。得到属性值后再去编辑器里修改。 4、页面调试时使用PageSpeed插件分析页面性能，进行相应调整。 5、当后端生成出测试页面时，前端需再次测试页面，确保页面代码布局没有遗漏，根据后端需求、实际环境调整样式。 五、及时沟通 1、前端工作开始之前先确认自己的上下游，拿到设计稿后，将JPG效果图传给后端预先知晓。 2、在拿到设计图的同时，整个图的流程需要搞清楚，若不清楚需要和后端或者是负责人及时沟通，避免后端与前端的逻辑流程差异过大，交接时出现不必要的麻烦。 3、当页面交接时有需要特别交代的地方，文字表达不清楚时，当面交流更效率。 ---------- 与编辑、设计配合须知 ---------- 1、总览页面效果图，看到不确定元素时，需与负责人沟通，确定其想要的布局形式以及交互动态效果，避免与需求不符。 2、需要交互变换效果的元素，先确认设计稿里是否有隐藏图层。如果没有再与设计确认交互样式。 3、当页面完成之后，可以交于编辑确认是否有遗漏，再提交给后端或上线。 4、专题页面需编辑提供的信息： （1）专题项目命名 （2）网页标题：title （3）关键字(PC端)：keyword （4）关键描述(PC端)：description （5）微信分享的文案和图片 （6）cnzz代码 （7）“往期回顾”版块所需图片及链接 （8）视频文件：pc版需要flv格式，wap端需要MP4格式
【前端技术文档】CSS选择器
整 理：徐秀、晋哲
时 间：2015-11-09
说 明：CSS各种选择器及其意义，以及常见选择器的用法，附CSS命名建议
- 什么是CSS？
CSS是Cascading style sheets【层叠样式表】的缩写，用来控制DOM节点的表现样式。
- CSS结构
CSS组成: selector{property:value;}
- CSS的选择器
选择器是确定CSS样式控制范围的标识，由于添加样式元素。
选择器优先原则：1、就近原则；2、控制范围越小，权重越高；选择符权重：id：100；class：10；标签：1；一个选择器的权重等于各个层级的权重之和，如：
#container .lists ul li.item { … }的权重:100+10 +1+1+10=122.
- 基础选择器
| 选择器 | 含义 | 示例 |
| * | 通用元素选择器，匹配任何元素 | * { margin:0; padding:0; } |
| E | 标签选择器，匹配所有使用E标签的元素 | p { font-size:2em; } |
| .info和E.info | class选择器，匹配所有class name是info的（E）元素 | .info { background:#ff0; } p.info { background:#ff0; } |
| #info和E#info | id选择器，匹配所有id的name为info的(E)元素。 | #info { background:#ff0; } p#info { background:#ff0; } |
- 组合选择器
| 选择器 | 含义 | 示例 |
| E,F | 群组选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 | div,p { color:#f00; } |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | #nav li { display:inline; } li a { font-weight:bold; } |
| E > F | 子元素选择器，匹配所有E元素的子元素F,如果F下还有F，不受该样式影响;不影响E的孙子元素F。 | .one > strong { color:#f00; } |
| E + F | 毗邻元素选择器，匹配所有紧随E元素之后的第一个同级元素F | .one + p { color:#f00; } |
| E~F | 同级选择器，匹配E元素之后的所有同级元素F。 | .two ~ ul{ list-style:none; } |
- 属性选择器【ie8- 版本必须声明<!doctype>,否则(伪)属性、伪类选择器无效】
| 选择器 | 含义 | 示例 |
| E[att] | 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att属性等于“val”的E元素 | div[class=”error”] { color:#f00; } |
| E[att~=val] | 匹配所有att属性中包含单词“val”的E元素，该单词必须独立，前后被空格隔开。 | td[class~=”name”] { color:#f00; } |
| E[att|=val] | 匹配所有att属性以”val”开头的E元素，且”val”后必须接连字符(“-”) | p[lang|=en] { color:#f00; } |
| CSS3新增属性选择器 | ||
| E[att^=”val”] | 属性att的值以”val”开头的元素 | div[id^="nav"] { background:#ff0; } |
| E[att$=”val”] | 属性att的值以”val”结尾的元素 | a[src$=".pdf"] |
| E[att*=”val”] | 属性att的值包含”val”字符串的元素 | a[src*="abc"] |
- 伪类选择器
| 选择器 | 含义 | 示例 | |
| E:link | 匹配所有未被点击的链接 | a:link {color: #f00;text-decoration:underline; } | |
| E:visited | 匹配所有已被点击的链接 | a:visited {color: #f00;text-decoration:none; } | |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | a:active {color: #f00;text-decoration:none; } | |
| E:hover | 匹配鼠标悬停其上的E元素 | a:hover {color: #0f0;text-decoration:none; } | |
| E:focus | 匹配获得当前焦点的E元素【ie9+】 | input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; }[当input获得焦点且鼠标悬停在input上才获得该样式] |
|
| E:lang(c) | 匹配lang属性等于c的E元素 | q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; } | |
| CSS3界面相关伪类 | |||
| E:enabled | 匹配表单中激活的元素【ie9+】 | input[type="text"]:enabled { background:#ff0;} | |
| E:disabled | 匹配表单中禁用的元素【ie9+】 | input[type="text"]:disabled { background:#ddd;} | |
| E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元【目前只有Opera支持】 | input[type="text"]:disabled { background:#ddd;} | |
| E::selection | 匹配用户当前选中的元素【火狐样式单独写；且只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline】 | ::selection { color:#ff0; background:#222; outline:#f00; } ::-moz-selection { color:#ff0; background:#222; outline:#f00; } |
|
| CSS3结构性伪类 | |||
| E:root | 匹配文档的根元素，在HTML文档，根元素是唯一html | :root { background:#ccc; } | |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 | p:nth-child(2) { color:#f00; } | |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，最后一个编号为1 | p:nth-last-child(2) { color:#f00; } | |
| E:nth-of-type(n) | 与:nth-child()作用类似，但仅匹配使用标签E的元素 | p:nth-of-type(2) { color:#f00; } | |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但仅匹配使用标签E的元素 | p:nth-of-type(2) { color:#f00; } | |
| E:first-child | 匹配父元素的第一个子元素 | p:first-child { font-style:italic; } | |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) | ||
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) | ||
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | ||
| E:only-child | 匹配父元素下仅有的一个子元素。如果父级有多个子元素，那么样式不起作用 | ||
| E:only-of-type | 匹配父元素下使用E标签的唯一一个子元素，如果父级有多个标签为E的子元素，那么样式不起作用 | ||
| E:empty | 匹配一个不包含任何子元素标签为E的元素，【标签可省略】注意，文本节点也被看作子元素 | :empty { background:#f00; } | |
| CSS3反选伪类 | |||
| E:not(s) | 匹配不符合当前选择器的任何元素 | :not(p) { border:1px solid #ccc; } | |
| CSS3：target伪类 | |||
| E:target | 匹配文档中特定”id”点击后的效果[页面内部的锚链接指向的id] | ||
- 伪元素选择器
| 选择器 | 含义 | 示例 |
| E:first-line | 匹配E元素的第一行 | p:first-line { font-weight:bold; color;#600; } |
| E:first-letter | 匹配E元素的第一个字母 | .preamble:first-letter { font-size:1.5em; font-weight:bold; } |
| E:before | 在E元素之前插入生成的内容 | .cbb:before { content:”"; display:block;background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } |
| E:after | 在E元素之后插入生成的内容 | a:link:after { content: ” (” attr(href) “) “; } |
- 常用选择器
1. :hover
1.1. 我们常用的锚链接(a:hover)鼠标悬停在链接上字体变色：
a:hover{color:#f00;text-decorate:none;}
1.2. :hover伪类不是a标签特有，几乎所有标签都有该伪类，且它的浏览器兼容性好。用:hover可以让一个区域在鼠标滑过显示不同的样式。
代码:
效果：
2. :before /:after【注意：使用该类伪属性：必须写content:””;】
2.1.可以在清浮动起作用
2.2.制作对话框效果时对话框侧边的边角。
代码:
css代码:
html代码：
效果：
2.3. 添加小图标，可以减少标签和类的使用。
代码：
效果：
这个例子中，使用伪属性:before和:after可以减少至少两个标签，两个类的编写。
2.4. 用content:"(" attr(href) ")" 获取锚链接指向的网址，即使链接改变不需要手动修改HTML页。
代码：
效果：
3. :first-child/:last-child
3.1. 比如在一个具有相同样式的一组元素里，第一个或最后一个元素与其它元素样式略有不同。（:first-child/:last-child用途类似，下面举例:first-child。）
代码：
效果：
【附】：CSS命名建议（从1.可读性和可维护性。2.易修改性。3.公共样式的复用性 三点出发考虑命名。）
- 布局类：header, footer, container, main, content, aside, page, section
- 包裹类：wrap, inner
- 区块类：region, block, box
- 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表类：list, item, field
- 主次类：primary, secondary, sub, minor
- 大小类：s, m, l, xl, large, small
- 状态类：active, current, checked, hover, fail, success, warn, error, on, off
- 导航类：nav, prev, back,next, breadcrumb, forward, indicator, paging, first, last
- 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星级类：rate, star
- 分割类：group, seperate, divider
- 等分类：full, half, third, quarter
- 表格类：table, tr, td, cell, row
- 图片类：img, thumbnail, original, album, gallery,logo
- 语言类：cn, en
- 论坛类：forum, bbs, topic, post
- 方向类：up, down, left, right
- 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading，joinus，vote，tab,banner,hot...
- 单词组合命名，用连字符”-(减号)”连接，单词组合体现模块功能或者是模块内容。如: .article-hd（文章头部）; .page-tt （页面标题）
- 特殊化class，可以采用前缀/后缀来命名。如: 用户页的页面标题用: . user -page-tt 。
- 对于公用样式，命名最好多体现其功能，如: sidebar/subnav/left-page… ，并降低其权重;对于相对稳定的样式，可以跟内容结合：如goods-name/goods-intro/user-info…。
CSS选择器HTML示例地址：
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端文档临时存放\示例文件\CSS选择器示例
【前端技术文档】CSS3 Animation 动画属性
整 理：肖雅君、曹燕 时 间：2015-11-05 说 明：animation属性的介绍和简单的用法 一、兼容性 二、语法介绍 1 定义keyframes语法 1.1 语法 1.2 值和描述 2 调用动画语法 2.1 语法 2.2 属性值 3 属性值详解 3.1 animation-duration 3.2 animation-timing-function 3.3 animation-iteration-count 3.4 animation-direction 三、综合示例 Animation 一、兼容性 Chrome 13+、Firefox 5+、Safari 5.1+、Opera 12+、IE10+均支持animation 常用前缀： Firefox：-moz Safari 和 Chrome：-webkit Opera ：-o 二、语法介绍 1 定义keyframes语法 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 1.1 语法 @keyframes animation-name{keyframes-selector {css-styles;}} 1.2 值和描述 animation-name：(必需)指定要绑定到选择器的关键帧的名称，即动画的名称。 keyframes-selector：(必需)动画时长的百分比。 建议: 在CSS3中，我们以百分比来规定改变发生的时间，或者通过关键词“from”和”to”,等价于0%和100%，其中，0%是动画的开始时间。100%是动画的结束时间。 例如： @keyframes colorchange { 0% { background-color:#00f; /* from:blue */ } 25% { background-color:#f00; /* red */ } 50% { background-color:#0f0; /* green */ } 75% { background-color:#f0f; /* purple */ } 100% { background-color:#00f; /* to: blue */ } } @-webkit-keyframes colorchange { 0% { background-color: #00f; /* from:blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #f0f; /* purple */ } 100% { background-color: #00f; /* to: blue */ } } 解释：这个例子中定义了background-color这个属性。其中0%这可以用from关键字来代替，100%可以用to代替。即： @keyframes colorchange { from { background-color: #00f; /* from: blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #fF0f; /* purple */ } to { background-color: #00fF; /* to: blue */ } } 2 调用动画语法 2.1 语法 animation:name duration timing-function delay iteration-count direction; 例：animation:changeColor 6s ease-in-out .2s infinite alternate; 2.2 属性值 animation属性是一个简写属性，用于设置动画的属性。 animation-name：该属性主要是用来调用@keyframes定义好的动画。 animation-duraton：动画指定需要多久完成，默认是0。 animation-timing-function：设置动画的速度曲线，默认是”ease”。 animation-delay： 设置在动画将启动之前经过的延迟间隔，默认是0。 animation-iteration-count：设置动画周期的播放次数，默认是1。 animation-direction：设置对象动画在循环中是否反向运动，默认是“normal”。 3 属性值详解 3.1 animation-duration 指定动画需要多久完成。请始终规定animation-duration属性，否则时长为0，就不会播放动画了。 3.2 animation-timing-function animation-timing-function值 ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐减慢。 liner：元素样式从初始状态过渡到终止状态速度是恒速。 ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。常称这种状态为渐显效果。 ease-out：元素状态从初始状态过渡到终止状态时，速度越来越缦。呈一种减速状态。常称这种状态为渐隐效果。 ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。常称这种效果为渐显渐隐效果。 3.3 animation-iteration-count 指定动画的播放次数，取值可以是： n：即具体的数字，表示具体的播放次数； infinite：表示无数次播放。 3.4 animation-direction 有四个值： normal：默认，从0%到100%； reverse：动画从100%执行到0%； alternate：动画在0%到100%之间往复执行； alternate-reverse与alternate一致，不过是从100%开始。 三、综合示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animation</title> <style> @keyframes slide{ 0% {background:#f00; left:0px; top:0px;} /* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-moz-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-webkit-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-o-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } .box{ width:100px; height:100px; background:red; position:relative; animation:slide 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:slide 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation:slide 5s linear 2s infinite alternate; /* Opera: */ -o-animation:slide 5s linear 2s infinite alternate; } </style> </head> <body> <div class="box"></div> </body> </html> 说明：这段代码首先用@keyframes定义了一个名称为“slide”的动画，效果是使一个背景为红色的元素从左向右滑动200px，同时背景色变为黄色；然后将这个动画效果和box类绑定，使这个动画：先延迟2s、然后无限循环播放此动画、5s完成一次动画、每次动画都以匀速演示、奇数次动画正向播放、偶数次动画逆向播放。
【前端技术文档】CSS3 Transition 过渡属性
整 理：晋哲、徐秀 时 间：2015-11-05 说 明：Transition属性的介绍和简单的用法 一、定义 允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标指针浮动到元素上时、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 二、语法 transition: property duration timing-function delay; 需要注意的一点：transition-duration与transition-delay的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。1、属性名称：transition-property 2、过渡时间：transition-duration 3、变换速率：transition-timing-function 4、开始时间：transition-delay 三、属性 1、属性名称：transition-property 描述：规定设置过渡效果的 CSS 属性的名称。 其属性值: none：没有属性会获得过渡效果。 all：所有属性都将获得过渡效果。（默认值） [property]：定义应用过渡效果的元素属性名称，多个属性以逗号分隔 注：[property]是可以指定元素的某个属性值。其对应的类型可以是：color、值为数字的属性、transform属性等等。 2、过渡时间：transition-duration 描述：规定完成过渡效果需要花费的时间，以秒或毫秒计。默认值是 0，意味着不会有效果。 3、变换速率：transition-timing-function 描述：规定速度效果的速度曲线。 其属性值: linear：匀速 ease：逐渐变快，再逐渐变慢（默认） ease-in：加速 ease-out：减速 ease-in-out：加速然后减速 cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，自定义一个时间曲线
4、开始时间：transition-delay 描述：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认值是 0，意味着立即执行，没有延迟。 四、浏览器的兼容性 Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 为兼容各大现代浏览器，在应用transition时需要加上各自的前缀，如： -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -o-transition: all 2s linear; transition: all 2s linear; 五、DEMO示例 实现效果：鼠标移上去时，宽度逐渐增加、改变背景色、方形变圆形，降低透明度。 <!-- HTML --> <div class="box"></div> <!-- CSS --> .box{ width: 100px; height: 100px; background: #000; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .box:hover{ width: 300px; height: 300px; background: #f00; border-radius: 50%; opacity: .5; }
【svn入门】- 1、初次使用
编 写：袁 亮
时 间：2015-11-02
说 明：从未接触过svn的人，5分钟内学会简单使用svn
一、获取svn地址
1、发送邮件到cjy@corp-ci.com，告知项目名，申请获取svn地址
例如：http://****/demo/
2、如果没有svn账号的，也一并邮件中申请
二、windows中开始使用
1、下载TortoiseSVN安装
2、在需要使用svn的文件目录上右击，选择SVN CheckOut
3、从svn控制中心，更新最新的程序到本地
4、新增的文件，添加到版本库中
5、将改动提交到svn控制中心（新增或者修改都需要做这步操作）
三、linux种开始使用
1、进入到项目开发目录 cd demo/
2、从版本库中checkout下来
3、从svn控制中心更新最新版本
3、将新文件加入到svn中
4、将改动过的内容提交到svn版本控制中心
四、常用命令使用
1、【svn入门】- 2、常用命令及练习
2、pdf版本下载：【svn入门】- 初次使用
【前端技术文档】Position定位详解
整 理：肖雅君、曹燕
时 间：2015-10-30
说 明：position定位详解
一、兼容性 二、文档流 三、定义和用法 1．position介绍 1.1 说明 1.2 主要的值 1.3 辅助属性 2.position定位方式 2.1 position: static 2.2 position:relative 2.3 position:absolute 2.4 position:fixed 2.5 z-index 三、用途 1.布局 2.设置垂直居中 3.设置全屏 4.固定内容位 一、兼容性 所有的主流浏览器都支持position属性。 二、文档流 含义：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有3种情况会使得元素脱离文档流，分别是：浮动、绝对定位、固定定位。 三、定义和用法 1．position介绍 1.1 说明 position属性规定元素的定位类型，也就是说元素脱离文档的布局后，在页面的任意位置显示。 1.2 主要的值 (1) 默认值：static，无特殊定位，即不设定元素的position属性时，position值是static。它遵循正常的文档流对象，对象占用文档空间。在该定位方式下top、right、bottom、left、z-index等属性是无效的。 (2) relative：相对定位，不脱离文档流的布局，还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 (3)absolute：绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为body文档本身。 (4)fixed：固定定位，脱离文档流，相对于浏览器窗口进行定位，不随着滚动条的移动而改变位置。 (5)inherit：规定从父元素继承position属性的值。 1.3 辅助属性 position属性要想使元素脱离文档流后按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： (1)left：表示向元素的左边插入多少像素，使元素向右移动多少像素。 (2)right：表示向元素的右边插入多少像素，使元素向左移动多少像素。 (3)top：表示向元素的上方插入多少像素，使元素向下移动多少像素。 (4)bottom：表示向元素的下方插入多少像素，使元素向上移动多少像素。 2.position定位方式 2.1 position: static 2.1.1 static详解 （1）默认值static通常都会影响到元素的位置。主要是看元素本身是block属性或是inline属性。 如下图，两个<div>因为是block的关系，所以就会上下各占据一行，那如果是两个<span>，因为是inline，所以会在同一行里呈现。 代码：.div1{width:50px;height:50px;background:#f1f411;} .div2{width:50px;height:50px;background:#dfafda;} .span1{background:#f1f411;} .span2{background:#dfafda;}(2) static不能通过z-index进行层次分级。 2.2 position:relative 2.2.1 说明 相对定位。不脱离文档流的布局，在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置(即下图虚线部分)。
2.2.2 relative详解 (1)relative定位的top / right / left / bottom 属性是不会对相对定位的元素所占据的文档空间产生偏移的。
如下图：.div1{position:relative;top:20px;left:20px;}，而top值和left值并没有对div1原来的位置（即红色虚线部分）产生影响。 (2)元素的margin / padding会让该文档空间产生偏移，从而对定位产生影响。 对div1设置margin:20px;后
2.3 position:absolute 2.3.1 说明 绝对定位。a脱离文档流的布局，遗留下来的空间由后面的元素b填充。a定位是相对于距离a最近的父元素定位,且父元素的postion不为static，否则就相对于body文档本身定位。
2.3.3 absolute详解 absolute定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absolute定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的。 这里还需要注意的是，relative和static方式在最外层时，是以<body>标签为定位原点的，而absolute方式在无父级是position非static定位时，是以<html>作为原点定位。 如下图，示例1的最外层wrapper层未设置position,则第一个子级a是相对于body定位，子子级a-1和a-1-1都是相对于临近的设置了position的父级定位的；而示例2的最外层设置了position，则a是相对于wrapper定位的。示例3的a-1未设置position,则子级a-1-1是相对于临近的设置了定位的a进行的定位。
（2）使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值auto，此时该元素也是脱离文档流的。 （3） 少了left/right/top/bottom属性不行，那如果多设了呢？例如，同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则： 如果top和bottom一同存在的话，那么只有top生效。 如果left和right一同存在的话，那么只有left生效。 与top/bottom/left/right的书写顺序无关。 （4）绝对(absolute)定位对象在可视区域之外会导致滚动条出现，而相对(relative)定位对象在可视区域之外，不会出现滚动条。 2.4 position:fixed 2.4.1 说明 固定定位。类似于absolute，但不随着滚动条的移动而改变位置。
2.5 z-index z-index属性，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠。 如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。 需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。 三、用途 1.布局
2.设置垂直居中 例：在移动端，由于设备宽高不固定，所以对<div>设置垂直居中需用到定位，用于匹配不同的移动设备。 .wrapper{position:relative} .head{position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); } 注意:这里定位是相对于.head的左上角定位，所以还需设置margin-top和margin-left,值为.head宽高的1/2(或者设置transition)。
3.设置全屏 常用于移动端，如：设置蒙层。 手机宽高不一定时，要保证弹出的蒙层全屏显示，可以用到position:absolute,代码如下： .wrapper{position:absolute;top:0;bottom:0;left:0;right:0;} 效果图：
4.固定内容位 如PC端页面侧栏广告、WAP端的分享按钮(如上图)、固定位广告等。
【前端技术文档】Float浮动
整 理：徐秀、晋哲 时 间：2015-10-23 说 明：float浮动原理、用法、清浮动方法一、什么是float
float是在传统的印刷布局中，使文本可以按照需要围绕图片的布局方式。一般把这种方式称为“文本环绕”。浮动的元素仍然是网页流的一部分。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。故而浮动框会影响相邻的元素样式表现。二、float应用
float的可用值：1.图文环绕的浮动效果。 设置img{float:right;}
2.替代无表格的首页布局 .sidebar{float:left;width:200px;...} main{margin-left:200px;...}
3.创建水平菜单栏 设置li{float:left;...}的效果。
设置li{display:inline-block;...}的效果。
4.创建段首字母悬浮于左侧
三、float的影响。
1.无法撑开父级的高度。 2.影响同级非浮动元素样式的表现。 3.ie6中float元素双边距bug。四、 float的清除方法。
1. 清除对父级高度的影响 1.1. 指定父级高度。【不推荐】 1.2. 为父级渲染BFC(块级格式化上下文)【推荐，具体方法，量情况而定】 1.2.1. 父级overflow不为visible；可为（auto/hidden） 1.2.2. 父级设置display:inline-block/table-cell/table-caption/ flex/inline-flex; 1.2.3. 父级也设float 。 1.2.4. 父级设置绝对定位；position:absolute; 1.3 父级定义伪类:after;并设置父级zoom:1【推荐，某宝就使用的该方法】 way1: .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfix{zoom:1} way2: .cf:before, .cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {zoom:1;} 2. 清除对同级非浮动元素影响 2.1 为后面的非浮动元素添加“clear:both;”【推荐】 2.2 在浮动元素后面添加一个空的div，样式设置为clear:both;”【不推荐】 3. 清除IE6下的双边距bug。 问题描述：如果给元素设置了float，并设置了水平方向的margin【比如margin-left:100px】，会IE6下会出现margin-left:200px的显示效果。 解决方法：设置浮动元素的display:inline-block.
前端培训流程及实例练习
编 写：晋 哲 时 间：2015-10-29 说 明：文章底部附实例练习文件的下载地址 > 前端培训步骤 一、前端规范文档的了解 请查看geek上的规范文档 《HTML编码规范》http://blog.geekman.vip/archives/353 《CSS编码规范》http://blog.geekman.vip/archives/352 二、基础HTML结构编写 了解常用标签，结构布局。 请查看geek上的《DIV+CSS布局》http://blog.geekman.vip/archives/426 三、手机页面常用CSS样式属性 了解常用样式属性，请查看文章底部的《页面常用样式属性》 可以对应w3school上的解说快速了解 四、PS切图工具的基本使用 请查看geek上的操作文档 《Photoshop基本切图操作文档》http://blog.geekman.vip/archives/476 《CSS Sprites》http://blog.geekman.vip/archives/497 五、手机页面实例练习 按顺序练习Demo1-4，从简到繁。 六、审核页面、疑问解答 1、审查元素，调试页面 2、与后端配合须知 到此步基本可以实现简单页面的编写。先示范讲解，再自己练习。 之后是丰富知识和熟练程度，需自己学习了解、实例练习。 七、手机端常用的简单Js或jQuery网页动态交互效果 结合Demo5中的交互效果，熟悉jQuery的常用交互效果 八、手机端常用的CSS3新属性 结合Demo6了解CSS3的过渡、动画属性用法，再对应w3school上的解说进行详细了解 九、强化实例练习，理解、解决遇到的实际问题 十、阅读《公司前端项目规范文档》 geek地址：http://blog.geekman.vip/archives/495 -----------------------分割线----------------------- > 文件说明（具体内容见底部附件） 一、手机页面固定HMTL框架、PS切图练习源文件 简单了解HTML页面的组成，编写环境；通过对“每日新衣首页”页面的解析，了解页面整体框架。 二、Demo1_HTML简单局部 通过编写简单的登录页面，练习HTML代码架构，以及简单标签的使用。 三、Demo2_CSS基础样式运用 该练习初步涉及到CSS样式设置定位布局和浮动布局，以及间距、颜色等基础样式的运用。 四、Demo3_深入定位布局、背景图片 定位布局的灵活嵌套运用，强化浮动布局和盒模型设置，以及图片的运用，区别<img>标签图片和背景图片的设置 五、Demo4_切图操作、强化布局 稍复杂布局结构，开始PS切图练习，以及Sprite图合并与使用 六、Demo5_交互效果、完整练习（分两步） 1、弹窗页面的编写 通过练习了解页面固定定位、弹窗蒙层设置、预留Class设置交互效果，了解Js基础交互效果实现。 2、详情页整体页面练习 全局架构，简单的Js交互效果编写，如切换效果、显示隐藏效果、滑动效果等。 七、Demo6-CSS3动画效果介绍 了解常用的CSS3属性，以及实现效果练习。 -----------------------分割线----------------------- > 页面常用样式属性 通过www.w3school.com.cn了解以下属性，即可应对日常样式调整。 一、布局 1、定位：position 2、位置：top / right / bottom / left 3、浮动：float 4、框类型：display 5、溢出：overflow 6、层叠顺序：z-index 二、盒模型 1、边框：border 2、外边距：margin 3、内边距：padding 4、宽度：width 5、高度：height 三、文本排版 1、文本系列： a、字号：font-size b、字体：font-family c、字体粗细：font-weight 2、排版系列： a、行高：line-height b、水平对齐：text-align c、垂直对齐：vertical-align d、缩进：text-indent 四、视觉效果 1、背景系列：background a、背景色：background-color b、背景图片：background-image c、背景平铺方式：background-repeat d、背景图片定位：background-position e、背景图片尺寸：background-size 2、颜色：color a、十六进制值（如：#fff） b、rgba形式值（如：rgb(255,255,255,.9)） 3、圆角边框：border-radius 4、边框阴影：box-shadow
附件：前端实例练习文件下载地址
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端培训流程