geekman – 第910页 – 极客世界

https的使用注意事项


编	写：袁	亮
时	间：2015-11-20
说	明：https的使用注意事项

一、全部https的优缺点以及选择
	1、优点
		1.1 安全性高
	2、缺点
		2.2 用户访问会变慢，特别是第一次访问（需要下载证书）
		2.2 开发成本较高，https页面的所有资源都必须是https资源
		2.3 统计代码不能使用，大部分统计代码都不提供https版本
		2.4 服务器端的负载也会变高
	3、其他网站参考
		3.1 百度、淘宝等很多二级域名也不是https
		3.2 京东大部分都不是https
	4、结论
		只针对安全级别高的几个页面采用https即可，不需要整个域名都使用https
		
二、开发过程注意事项
	1、静态资源都必须是https
		1.1 js等请求，浏览器直接会阻止http的请求
		1.2 图片请求，http的不阻止，但是会报warning错误
		1.3 为兼容http和https同时访问，可以写//***.ci123.com/****，会自动根据当前的访问协议加上http或者https
	2、ajax请求
		2.1 ajax请求也必须是同协议的，否则将跨域，不能访问
		2.2 jsonp可以解决这个问题，但最好不要这么做
	3、核心cookie可以设置为仅https访问
		3.1 淘宝中的skt，对应的应该是一个sessionId，就是仅https的
		3.2 这个设置要小心，因为该cookie在http中是访问不到的
		3.3 可以防止cookie被劫持，一般用与session
		3.4 用的不多
	4、关键地方，只配置https，不允许http访问
		4.1 防止用户被引导到http请求中，然后输入了敏感信息
		
三、安全问题
	1、证书伪造：浏览器有提示
	2、引导到http请求，然后盗取

四、其他
	1、https请求可以被缓存
	
附录：
1、HTTPS连接的前几毫秒发生了什么
	http://blog.jobbole.com/48369/ 
2、与HTTP有什么区别？HTTPS的七个误解
	http://www.chinaz.com/web/2015/0320/391752.shtml
3、HTTPS那些事（一）HTTPS原理
	http://www.guokr.com/post/114121/
	日志转载：HTTPS那些事（二）SSL证书
	http://www.guokr.com/post/116169/
	HTTPS那些事（三）攻击实例与防御
	http://www.guokr.com/blog/148613/

一、关于PSR-1/2

国内靠谱翻译psr-1
国内靠谱翻译psr-2

补充规定

如下的这些都是基于上面规定来的，只是将一些规定明确化

psr-1部分

1 概览

不准使用<\?=短标签

4.2 属性

属性明确规定必须按照"下划线分隔式"
常用变量名

$sql: sql语句
$page: 分页页码
$limit: 每页显示多少条
$ip: 用户ip地址
$dated: 当前时间
$ms: mysqls操作类实例
$pager: 存放分页的html代码
$data: 当前页面主要的数据
$user_id: 用户id
$username: 用户名
$nickname: 用户昵称

psr-2部分

8. [补充]字符串单引号、双引号

纯字符串的时候，使用单引号
字符串中有变量时，使用双引号，变量用{}包含起来。

$show = "你好，{$nickname}!";

9. [补充]用die不用exit

二、关于CodeSniffer

Github-PHP_CodeSniffer

三、关于如何操作？

检查我改动的代码

phpcs --standard=PSR2 [files you\'ve changed]

结果展示

FILE: /opt/ci123/www/html/vshop2_dev/svn/lab/src/entity/Product.php
----------------------------------------------------------------------
FOUND 2 ERRORS AFFECTING 2 LINES
----------------------------------------------------------------------
74 | ERROR | Method name "Product::get_discount" is not in camel
| | caps format
84 | ERROR | Method name "Product::get_photo_url" is not in camel
| | caps format
----------------------------------------------------------------------

如果没有错误就没有提示

自动修复

phpcbf --standard=PSR1 --standard=PSR2 Slider.php

结果展示

Changing into directory /opt/ci123/www/html/vshop2_dev/svn/lab/src/entity
Processing Slider.php [PHP => 379 tokens in 45 lines]... DONE in 23ms (1 fixable violations)
=> Fixing file: 0/1 violations remaining [made 2 passes]... DONE in 49ms
Patched 1 file
Time: 124ms; Memory: 6.75Mb

四、实际操作步骤说明

【前端技术文档】html标签默认属性

整理：徐秀、晋哲

时间：2015-11-20

说明：html标签默认可能影响布局的属性

1.页边距(<body>)

一般默认外边距为8px，根据不同浏览器有微小差别，通过设置:"margin:0;"消除。但body与其它block元素不同，它的background属性是从浏览器的左上角扩展到整个可见页面的。

重置代码: body{margin:0;}

2.段间距(<p>)

一般默认边距:"margin:16px;"通过重置 "margin:0;"消除。

3.标题样式(<h>标签)

h标签默认加粗:"font-weight:bold;"
h标签有默认边margin和font-size。根据不同浏览器有所不同，(ps：有文字的block的文字域都有大于font-size的高度。可以通过设置line-height:1;消除。)

4.列表样式 (<ul>/<ol>/<dl>)

4.1. 一般浏览器ul默认"list-style:disc;margin:16px;padding-left:40px;"

代码：

效果：

4.2. 一般浏览器ol默认"list-style:decimal;margin:16px;padding-left:40px;"；li的默认"display:list-item;"默认占据一行;

代码：

效果：

4.3. dl/dd/dt的默认"display:block;",dl默认"margin:16px;"dd的margin-left:40px;

代码：

效果：

5.表格默认属性(<table>)

table及其子元素默认属性较多，主要有如下。在布局中，我们只要重置：table{border-spacing:0;border-collapse:collapse;}【注：重置后，table自带的cellpadding、 cellspacing属性失效】
table及其子标签的display不可更改，否则可能会影响布局。
代码:效果：

6.输入标签默认属性(<input>/<button>/<textarea>等)

下面是webkit浏览器关于input及button的默认属性，其它浏览器有所差别，但是默认属性都不少【仅作了解，不要深究】需要注意的是input,button{display:inline-block;}

代码:

效果:

附录：

重置css代码:
body,h1,h2,h3,h4,h5,h6,p,form,ol,ul,dl,dd,fieldset{margin:0;padding:0;}
body,button,input,fieldset,select,textarea,p{font-family:Arial,"Microsoft Yahei","Hiragino Sans GB" ,"WenQuanYi Micro Hei",sans-serif;font-size:12px;}
ul,ol{list-style:none}
fieldset,img,input[type="button"],button,img{border:none;}
fieldset,button,textarea,select,input{outline:none;}
table{border-collapse:collapse;border-spacing:0}
img{-ms-interpolation-mode:bicubic;}

【前端技术文档】CSS display属性

整理：曹燕、肖雅君

时间：2015-11-20

说明：CSS display属性常用的取值

1.定义及取值

1.1定义

display 属性规定元素应该生成的框的类型。

1.2可能取值

常用取值为：

block——使元素表现为块级元素（又叫块元素）

inline——使元素表现为内联元素（又叫行内元素）

inline-block——使元素表现为内联块状元素

2.块级元素、内联元素及内联块状元素

2.1区别

（1）块级元素会独占一行，其宽度若不设置则自动填满其父元素宽度；

内联元素不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化，处于行尾的内联元素会拆分在两行显示；

内联块状元素也不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度若不设置则随元素的内容而变化，处于行尾的内联块状元素会整体移到第二行显示。

（2）块级元素可以设置 width, height属性；

内联元素设置width, height无效；

内联块状元素可以设置 width, height属性。

（3）块级元素可以设置margin 和 padding；

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果；

内联块状元素可以设置margin 和 padding。

2.2常用html元素分类

块级元素：div，p，h1 -h6，hr，ol，ul，dl，form，table，pre，menu

内联元素：a，br，img，input，label，select，span，strong，b，em，i,small，cite，code，sub，sup，textarea

3.示例

3.1示例1——是否独占一行

说明：块级元素会独占一行；内联元素和内联块状元素不会独占一行，而是会排在一行中，直到排不下才会换行显示，但二者在处理行尾时略有不同。

效果：

3.2示例2——是否可以设置宽高

说明：块级元素和内联块状元素都可以设置宽高；内联元素不可以设置宽高。

效果：

3.3示例3——设置margin值

说明：块级元素和内联块状元素可以设置margin的4个方向值；内联元素只可以设置margin-left和margin-right值，上下的margin设置之后是无效的。

效果：

3.4示例4——设置padding值

说明：块级元素和内联块状元素可以设置padding的4个方向值；内联元素只可以设置padding-left和padding-right值，上下的padding设置之后是无效的。

效果：

3.5示例5——应用display转换元素类型

说明：通过设置display的值可以改变任意元素的类型

效果：

jquery – 事件绑定的不同写法


编	写：袁	亮
时	间：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中元素实现垂直水平居中的方式

2.1 text-align:center

3.2 vertical-align:middle配合line-height

1.块级元素和内联元素

1.1区别

（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都不会产生边距效果。

1.2常用块级及内联元素

块级元素：div，p，h1 -h6，hr，ol，ul，dl dt dd，form

内联元素：a，br，img，input，label，select，span，strong，b，em，font，i,small

1.3内联块状元素

同时具备内联元素、块状元素的特点，设置方法是display:inline-block

①和其他元素都在一行上；

②元素可以设置width, height，margin 和 padding。

2.水平居中

2.1 text-align:center

设置位置：块级元素

实现效果：使得块级元素内部的文本及内联元素、内联块状元素在水平方向上居中。并且它里面所有的文字、内联元素、内联块状元素都只会相对于最近一层块级元素来实现水平居中。

注：在IE6、7中，它能使任何元素进行水平居中。

示例：

效果：

2.2 margin:0 auto

设置位置：块级元素

实现效果：使块级元素自身水平居中。使用这个方法的前提是块级元素必须设置宽度，这样才能根据宽度自动调节左右两边的margin值，使之居中。

示例：

效果：

2.3 绝对定位水平居中方法一

方法：position:absolute;left:50%;再设置magin-left的值为负的元素宽度的一半。

设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置宽度。

实现效果：使任何元素在水平方向上居中

示例：

效果：

2.4绝对定位水平居中方法二

方法：position:absolute; left:0; right:0; margin:auto;

设置位置：任何元素。前提是元素必须设置宽度。

实现效果：使任何元素在水平方向上居中

示例：

效果：

2.5浮动配合相对定位

方法：给要居中的元素加一层wrapper，wrapper设置：position:relative; float:left; left:50%;居中元素自身设置：position:relative; left:-50%;

设置位置：任何元素。优点是无需知道元素的宽度。

示例：

效果：

3.垂直居中

3.1 line-height

方法：将一个元素height和line-hieght的值设为一样

设置元素：块级元素

实现效果：使得块元素内部的文本垂直居中显示

示例：

效果：

3.2 vertical-align:middle配合line-height

设置元素：块级元素设置line-height与自身的height相同，它的内联子元素设置vertical-align:middle。

实现效果：使得内联元素相对于父元素垂直居中。因为vertical-align设置的是内联元素的基线相对于该元素所在行的基线的垂直对齐方式，必须先通过line-height设置行高，然后vertical-align：middle使得该元素的基线与所在行基线垂直居中对齐。

注：在IE6中无效。

示例：

效果：

3.3绝对定位垂直居中方法一

方法：position:absolute;top:50%;再设置magin-top的值为负的元素高度的一半。

设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置高度。

实现效果：使任何元素在垂直方向上居中。

示例：

效果：

3.4绝对定位垂直居中方法二

方法：position:absolute;top:0;bottom:0;margin:auto;

设置位置：任何元素。前提是元素必须设置高度。

实现效果：使任何元素在垂直方向上居中。

示例：

效果：

4.表格的居中问题

4.1表格居中

（1）方法一：通过表格自身属性实现。水平居中通过align=”center”实现，垂直居中通过valign=”middle”实现，设置在th或td上，使得单元格的内容居中。

默认情况下，th完全居中，td在垂直方向上居中。

示例：

效果：

（2）方法二：通过css属性实现。水平居中通过text-align:center实现（前提是单元格内容是内联元素或内联块状元素），垂直居中通过vertical-align:middle实现。

4.2扩展

对于那些不是表格的元素，可以通过display:table-cell 来把它模拟成一个表格单元格，然后利用4.1中表格居中的方法二实现居中。

示例：

效果：

5.常用的绝对居中（水平垂直居中）方法

5.1一行文字的水平垂直居中

方法：text-align:center;外层块元素的line-height与height值相同

5.2内联元素的水平垂直居中

方法：外层块设置text-align:center;vertical-align:middle;line-height与height值相同

5.3任何元素的水平垂直居中

方法一：position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

方法二：position:absolute;top:50%;left:50%;margin-top:负半元素高;margin-left:负半元素宽;

5.4translate方法

方法：元素设置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;
}