【SEIKO】精工VPN创建

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:创建连接精工服务器的VPN

 

创建连接精工服务器的VPN。以Win7为例,其他系统大同小异

  1. 创建seikoVPN连接。

打开“控制面板”--“网络和Internet”--“Internet选项”>“连接”菜单,弹出窗选择“添加VPN(P)”,如下图:seiko服务器端操作一110

在弹出框设置如下:seiko服务器端操作一123

“下一步”,输入用户名和密码。【已固定,因为有保密性,查看相关文档】seiko服务器端操作一160

现在,seiko的vpn已出现桌面任务栏的网络连接中,点击任务栏网络连接按钮seiko服务器端操作一202出现上图,右击”seiko”-> “属性” -> “网络” 更改相应配置。seiko服务器端操作一242

选择“TCP/IP4” -> “属性”seiko服务器端操作一264弹出框去掉“在远程网络上使用默认网关”选项。然后确定退回。seiko服务器端操作一296

2、像连接宽带一样连接VPN

3、远程登录内网的虚拟机192.168.1.152(此机器是win2003系统)

点击win的开始,选择运行【快捷键:win键+r】seiko服务器端操作一380

输入mstsc,启用远程登录seiko服务器端操作一399

如下图,输入内网的ip,192.168.1.152,点击显示选项seiko服务器端操作一438

点击”本地资源”下的”详细信息”弹出右侧对话框,勾选如下选项。【可以完成本机和服务器的信息的复制粘贴】,点击”确定”,回到上图界面,点击连接按钮。seiko服务器端操作一514

看到下图所示,输入 账号、密码seiko服务器端操作一532

【注意】: 每次登远程之前要先连seiko的vpn(和连接宽带方式相同)。

【SEIKO】精工PPT制作说明

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:精工每月PPT制作技巧和内容的总结

 

一、概述

二、详细介绍

1.表类网站分析PPT

2.精工网站数据分析PPT

3.半年度ppt

三、PPT制作的小技巧

 

一、概述

精工有三类PPT需制作,第一个是对精工自家流量的分析(每月)、第二份是对精工同类型手表的网站分析(每月),即所谓的“表类网站分析PPT”,第三份是半年度PPT。其中每月还需从51yes网站上导出精工“每月访问数据量excel”,用于制作PPT 。

三份PPT对应内容简介如下表

PPT标题 PPT内容 PPT制作时间 PPT数据准备
1.表类网站分析 主要是分析同类型腕表(例如劳力士、天梭、浪琴等手表)的数据,包括该类手表每个月的资讯更新情况、每个月的排名等 同类网站比较ppt制作时间为当月最后一天【做迟做早都可能造成数据不准确】建议每月月底前制作。 网站Alexa排名,登录(http://www.alexa.cn/)用百度搜索各类表名,看是否有品牌推广。进入官网,截取首页,并查看是否有咨询更新
2.精工每月数据分析 主要在51yes上获取精工网站的相关数据,如:PV访问量,独立IP访问量,流量来源与比例等。 精工数据分析ppt制作时间为下个月的月初【可获取上个月的完整数据,做早了会导致数据不完整】 登录51yes(http://countt.51yes.com/login.aspx)查询网站的各项数据。(侧栏的导航都有分类)。Excel图表制作,以及数据计算
3.半年度 主要是对半年的表类网站分析数据的总结比较 半年度ppt每半年做一次。精工会直接向我公司索要PPT。最好提前做好准备。

二、详细介绍

1.表类网站分析PPT

1.1 第一项:本月同类手表网站总体排名与更新excel截图

需制作者先在excel里统计数据后再截图。

该excel内容包括:

(1)资讯更新

(2)上月排名情况

(3)本月排名情况

排名登录:http://www.alexa.cn/ 获取(操作见1.1.1&1.1.2)

image001

1.1.1 新闻资讯更新获取

在各网站的官网中,如有新闻更新,写入;无则空白,各网站结构大同小异,小伙伴自行查找吧。ppt制作技巧【图片由excel截图】:

(1).图片圆角制作:image002

"裁剪"工具下拉选项---裁剪为形状

(2)投影制作:开始----形状效果---映像。

1.1.2 Alexa本月数据获取

各网站Alexa查询:http://www.alexa.cn/image003

同类比较网站首页地址:

劳力士http://www.rolex.com/zh-hans#/home?

欧米茄http://www.omegawatches.com/?

天梭http://www.tissot.ch/?

浪琴http://www.longines.cn/?

西铁城http://www.citizen.com.cn/??

英纳格http://www.enicar.com/?

梅花http://www.titoni.ch/zhs.html?

美度http://www.mido.ch/?

雷达http://www.rado.com/??

卡西欧http://www.casio.com.cn/wat/?

【上月Alexa数据直接由上月PPT中copy】

1.2 第二项:其它表类网站分析

分析内容包括:

(1)首页整理结构有无变化。

(2)有无资讯更新。

(3)是否在百度首页有推广。

如下图:image004

在百度搜索引擎中输入表类关键字,看该表是否在百度上做了品牌推广。比较上个月ppt,填写格式参照ppt。

1.3 根据查询结果写结论-END

  1. 精工网站数据分析PPT

Tip:精工流量数据均可在51yes上查询到,且可查到往期的数据

(1)统计区间制作方法image005

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

(2)数据获取【以下各数据选取,均注意日期选择】,访问:http://countt.51yes.com/login.aspx

2.1 第一项:概况

此项主要简单说明下本月PV和IP较上月数值的变动情况,如下图:image006

2.2 第二项:综合评价

此项主要是通过具体的数值,详细的说明下本月PV和IP较上月的变动情况,如下图:image007

数值获取方式:

(1) 先查数据

登录51yes网站。image008

点进侧栏的“综合统计”。主页面右下方有上月访问量统计(蓝色为pv量,括号紫色为独立IP访问量):image009

(2) 计算上升/下降百分比

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

2.3 第三项:流量分析

此项主要统计以下几个内容:

(1)将本月和上月访问量最高的城市记录下来,包括其访问比率。同时对访问比的变化情况作总结。

(2)记录两个月的流量主要来源,并简要总结。

(3)记录哪些网站对精工网站流量产生影响。(此项一般不会变化,主要是一些主流的搜索引擎)image010

2.3.1 数据获取

点击”客户端分析”【获取访问量最高的前五城市】image011

2.3.2 搜索引擎流量分析

如上,在侧栏点击”来路统计(域名为单位)”,注意日期选取。在ppt记录前三四域名及所占比例。

2.4 第四项:页面总访问和独立ip访问数据获取

2.4.1 网站访问量统计

侧栏“数据下载”:image012 点击进入下载页,类型选择,”下一步”:image013

选择你想要输出的月份:image014

点击下载按钮即可。

2.4.2 制作柱形图

通过excel表格的柱形图制作成如下格式【根据下周的excel表格—插入柱形图制作,注意格式以及颜色选择】。同理制作独立IP访问量的柱形图。image015

2.5 第五项:单个页面的受访率

此项主要统计以下几个内容:

(1)受访页面的截图。

(2)在51yes上获取当月的数据,与前一年的数据形成比较。image016

根据获取到的页面访问率,从高到低排列,参考往月ppt 变化,注意更改。在51yes的侧栏点击:image017

(注意右侧日期选择)。

  1. 半年度ppt

对比分析以往半年度PPT,主要修改的是以下几点内容:

(1)半年的表类网站分析PPT总结版,截取制作当月各网站的首页图片【可以用firefox的FireCaptors截屏插件,截取一整个网站的图片。】并附上网站logo。

(2) 统计各比较网站的资讯更新,附上主图和链接。

(3) 统计网站半年的资讯更新情况,统计各网站的半年咨询更新数量,自行绘制“网站活跃度表格”。

三、PPT制作的小技巧

1.网站的截取可以由firefox的FireCaptors

2. 图片圆角制作:"裁剪"工具下拉选项---裁剪为形状

3. 投影制作:开始----形状效果---映像。

4. 统计区间制作方法:

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

5. 数据计算:

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

Apidoc的安装及使用

整    理:曹燕

时    间:2015-11-27

说    明:Apidoc的安装及使用(官方文档:http://apidocjs.com/

 

1.安装

2.运行

3.apidoc.json配置文件

4.注释中必需的部分

5.继承

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

(2)@apiDefine——定义一个可重用的块

(3)@apiDescription——api方法的详细介绍

(4)@apiError——出错情况的描述

(5)@apiErrorExample——一个返回出错信息的示例

(6)@apiExample——使用一个接口的示例

(7)@apiGroup——对块进行分类,便于导航条分类

(8)@apiHeader

(9)@apiHeaderExample

(10)@apiIgnore——不被转换的块

(11)@apiName——接口的名称

(12)@apiParam——描述接口的参数

(13)@apiParamExample——接口参数的一个示例

(14)@apiPermission

(16)@apiSuccess——成功时的返回值

(17)@apiSuccessExample——一个成功的返回信息的示例

(18)@apiUse——调用一个已经定义好的块

(19)@apiVersion——一个块的版本信息

 

1.安装

npm install apidoc -g

2.运行

apidoc -i myapp/ -o apidoc/ -t mytemplate/

-i 输入文件的目录,即项目文件夹

-o 输出目录,即放置生成文档的位置

-t 使用的模板,会有默认的模板,当然也可以用自己定义的模板

示例: apidoc -i abc/ -o doc/   apidoc的使用1956

3.apidoc.json配置文件

放在你的工程项目的根目录下,是对项目的概要介绍,包括标题、简要介绍、版本等。

{

"name": "育儿网",

"version": "1.0.0",

"description": "育儿API文档",

"title": "API文档",

"template": {

"withCompare": true,

"withGenerator": true

}

}

其中name、version、description都会被显示出来。

4.注释中必需的部分

/**

* @api {get} /user/:id Request User information

* @apiName GetUser

* @apiGroup User

*/

  • 注释块必须用/** */包围
  • @api {get} /user/:id Request User information

注释块必须以@api开头,否则会忽视这个注释块

  • @apiName必须是一个独一无二的名字
  • @apiGroup的作用是给这个方法分组

5.继承apidoc的使用2448

@apiDefine定义了一个可重用的块,然后其他块调用这个块的时候就写:

@apiUse UserNotFoundError

在生成的文档中会自动填充成UserNotFoundError块的具体内容。

Apidoc中的继承只能继承一层,层数多了会影响可读性。

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

【开头必需,除非是@apiDefine开头】apidoc的使用2644

Method:必须,方法的请求方式,如get、post、put、delete...

Path:必须,请求路径

Title:可选,可选,用于导航和文章的子标题apidoc的使用2725

(2)@apiDefine——定义一个可重用的块apidoc的使用2753

Name:必须,独一无二的名字,之后引用这个块就是用这个名字

Title:可选,标题

Description:可选,详细介绍,另起一行写apidoc的使用2824

(3)@apiDescription——api方法的详细介绍apidoc的使用2858

Text:必须,api方法的文字介绍

(4)@apiError——出错情况的描述apidoc的使用2902

(Group):可选,有了group值之后该错误会被分组;默认归类为Error 4xx。

{Type}:可选,返回类型,如{Boolean},{Number},{String}等。

Field:必须,返回标识符,例如错误码。

Description:可选,对错误码的描述。apidoc的使用3041

(5)@apiErrorExample——一个返回出错信息的示例

会以预格式化代码输出到页面apidoc的使用3091

{type}:可选,返回信息的格式

Title:可选,这个出错信息的标题

Example:必须,具体的返回信息apidoc的使用3149

(6)@apiExample——使用一个接口的示例

会以预格式化代码输出到页面apidoc的使用3192

{type}:可选,代码的语言

Title:必须,这个例子的标题

Example:必须,使用接口的代码apidoc的使用3246

(7)@apiGroup——对块进行分类,便于导航条分类apidoc的使用3278

Name:必须,分类的名称apidoc的使用3294

(8)@apiHeader

暂略

(9)@apiHeaderExample

暂略

(10)@apiIgnore——不被转换的块apidoc的使用3361

将这句放在块的起始位置,这样进行转换的时候这个块就会被跳过,常常用于一个块还没有开发完毕的时候。

Hint:可选,描述为什么不转换这个块apidoc的使用3432

(11)@apiName——接口的名称apidoc的使用3455

Name:必须,接口的名称,必须是独一无二的名称(允许版本不同的同一名称)apidoc的使用3495

(12)@apiParam——描述接口的参数apidoc的使用3521

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Parameter。

{type}:可选,参数的类型,如{String}等。

{type{size}}:可选,参数取值的详细信息,如

{number{100-999}}——参数必须是个100-999的数字

{string{2..5}}——参数必须是2-5个字符的字符串

{type=allowedValues}:可选,关于变量允许取值的信息,如

{string="small","huge"}——参数必须是包含”small”或”huge”的字符串

Field:必须,变量名,表示该参数对于接口是必须的

[field]:必须,变量名,表示该参数对于接口不是必须的

=defaultValue:可选,参数的默认取值

Description:可选,参数的描述apidoc的使用3884

(13)@apiParamExample——接口参数的一个示例apidoc的使用3919

{type}:可选,请求信息的格式

Title:可选,示例的标题

Example:必须,请求的具体信息apidoc的使用3973

(14)@apiPermission

暂略

(15)@apiSampleRequest——模拟请求时的urlapidoc的使用4031

(16)@apiSuccess——成功时的返回值apidoc的使用4602

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Success 200。

{type}:可选,参数的类型,如{String}等。

Field:必须,返回标识符。

Description:可选,成功码的描述。apidoc的使用4723

(17)@apiSuccessExample——一个成功的返回信息的示例apidoc的使用4763

{type}:可选,返回信息的格式

Title:可选,示例的标题

Example:必须,返回的具体信息apidoc的使用4817

(18)@apiUse——调用一个已经定义好的块

已经定义的块是指用@apiDefine定义的块apidoc的使用4869

Name:必须,@apiDefine定义的块的名称apidoc的使用4897

(19)@apiVersion——一个块的版本信息

Group和name值都相同的块,可以进行不同版本的对比。可用于在生成的文档中和之前的版本进行比较,增加和修改的会用绿色标出、删除的会用红色标出。apidoc的使用5000

Version:必须,版本号apidoc的使用5017

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/
		


[PHP]PSR-1/2 育网修订版介绍以及推广

整    理:吴万利

时    间:2015-11-23

说    明:代码规范

关于PSR-1/2

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

补充规定

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

psr-1部分

1 概览

  • 不准使用<\?=短标签

4.2 属性

  • 属性明确规定必须按照"下划线分隔式"
  • 常用变量名
  1. $sql: sql语句
  2. $page: 分页页码
  3. $limit: 每页显示多少条
  4. $ip: 用户ip地址
  5. $dated: 当前时间
  6. $ms: mysqls操作类实例
  7. $pager: 存放分页的html代码
  8. $data: 当前页面主要的数据
  9. $user_id: 用户id
  10. $username: 用户名
  11. $nickname: 用户昵称

psr-2部分

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

  • 纯字符串的时候,使用单引号
  • 字符串中有变量时,使用双引号,变量用{}包含起来。
  1. $show = "你好,{$nickname}!";

9. [补充]用die不用exit

关于CodeSniffer

Github-PHP_CodeSniffer

关于如何操作?

检查我改动的代码

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

结果展示

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

如果没有错误就没有提示

自动修复

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

结果展示

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

实际操作步骤说明

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

整    理:徐秀、晋哲

时    间:2015-11-20

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

1.页边距(<body>)

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

2.段间距(<p>)

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

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

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

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

4.1. 一般浏览器ul默认"list-style:disc;margin:16px;padding-left:40px;"
代码:ulp
4.2. 一般浏览器ol默认"list-style:decimal;margin:16px;padding-left:40px;";li的默认"display:list-item;"默认占据一行;
代码:
oli1
效果:
olp
4.3. dl/dd/dt的默认"display:block;",dl默认"margin:16px;"dd的margin-left:40px;
代码:
dli
效果:
dlp

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

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

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

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

附录:

重置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可能取值CSS display属性59

常用取值为:

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——是否独占一行

说明:块级元素会独占一行;内联元素和内联块状元素不会独占一行,而是会排在一行中,直到排不下才会换行显示,但二者在处理行尾时略有不同。CSS display属性875 CSS display属性876

效果:CSS display属性882

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

说明:块级元素和内联块状元素都可以设置宽高;内联元素不可以设置宽高。CSS display属性937 CSS display属性939

效果:CSS display属性946

3.3示例3——设置margin值

说明:块级元素和内联块状元素可以设置margin的4个方向值;内联元素只可以设置margin-left和margin-right值,上下的margin设置之后是无效的。CSS display属性1052 CSS display属性1054

效果:CSS display属性1060

3.4示例4——设置padding值

说明:块级元素和内联块状元素可以设置padding的4个方向值;内联元素只可以设置padding-left和padding-right值,上下的padding设置之后是无效的。CSS display属性1171 CSS display属性1173

效果:CSS display属性1179

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

说明:通过设置display的值可以改变任意元素的类型CSS display属性1234 CSS display属性1236

效果:CSS display属性1242

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中元素实现垂直水平居中的方式

 

1. 块级元素和内联元素

1.1区别

1.2常用块级及内联元素

1.3内联块状元素

2. 水平居中

2.1 text-align:center

2.2 margin:0 auto

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

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

2.5浮动配合相对定位

3. 垂直居中

3.1 line-height

3.2 vertical-align:middle配合line-height

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

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

4. 表格的居中问题

4.1表格居中

4.2扩展

5. 常用的绝对居中(水平垂直居中)方法

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

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

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

5.4translate方法

 

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中,它能使任何元素进行水平居中。

示例:水平垂直居中方式2277 水平垂直居中方式2279

效果:水平垂直居中方式2285

 

2.2 margin:0 auto

设置位置:块级元素

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

示例:水平垂直居中方式2389 水平垂直居中方式2391

 

效果:水平垂直居中方式2397

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

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

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

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

示例:水平垂直居中方式2559 水平垂直居中方式2561

 

效果:水平垂直居中方式2567

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

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

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

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

示例:水平垂直居中方式2683 水平垂直居中方式2685

 

效果:水平垂直居中方式2691

 

2.5浮动配合相对定位

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

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

示例:水平垂直居中方式2844 水平垂直居中方式2846

效果:水平垂直居中方式2852

3.垂直居中

3.1 line-height

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

设置元素:块级元素

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

示例:水平垂直居中方式2945 水平垂直居中方式2947

效果:水平垂直居中方式2953

3.2 vertical-align:middle配合line-height

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

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

注:在IE6中无效。

示例:水平垂直居中方式3212 水平垂直居中方式3214

效果:水平垂直居中方式3220

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

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

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

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

示例:水平垂直居中方式3380 水平垂直居中方式3382

效果:水平垂直居中方式3388

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

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

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

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

示例:水平垂直居中方式3502 水平垂直居中方式3504

效果:水平垂直居中方式3510

4.表格的居中问题

4.1表格居中

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

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

示例:水平垂直居中方式3645 水平垂直居中方式3647

效果:水平垂直居中方式3653

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

4.2扩展

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

示例:水平垂直居中方式3833 水平垂直居中方式3835

效果:水平垂直居中方式3841

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%);

示例:水平垂直居中方式4264 水平垂直居中方式4266

效果:水平垂直居中方式4272

前端与后端配合须知

整 理:晋哲、雷媛

时 间: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”的部分即可。
ph-pic1
但需注意:选项卡的内容切换不需要后端if判断,所以还是属于前端js去控制显示和隐藏。

二、CSS方面

1、不要使用id选择器编写样式(编写js时可以设置id,建议jQuery用class选择器)。

2、交互切换性的部分,单独立一个特殊样式的class名,方便调取。
比如:<li>列表中需要一个凸显的样式,那么在<li>里面编写公共样式,再将变换的样式写在单独的class上。常提取出背景色background-color、背景图片background-image、字体颜色color、边框色border-color等样式。
ph-pic2
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格式