& 近期更新：
新增，如需求为此类型，务必遵守此规范
新增，可做现阶段手游需求的参考规范
新增，如需求涉及到邮件类需求，务必阅读此规范
新增，页面用到png32背景图时必须用压缩工具压缩
新增，火影忍者相关活动专题页需统一引用指定foot
腾讯互娱重构外包页面规范 V1.0
&!DOCTYPE&html&
&html&lang=&zh-CN&&
&meta charset="gbk"&
&meta name="robots" content="all"&
&meta name="author" content="Tencent-CP"&
&meta name="Copyright" content="Tencent"&
&meta name="Description" content=""&
&meta name="Keywords" content="腾讯游戏"&
&title>专题主题（标题）- 产品中文全称官方网站 - 腾讯游戏&/title&
&link href="css/common.css" rel="stylesheet"&
&!-- 页面设计：cp | 页面制作：cp | 创建：xxxx-xx-xx --&
&script&src=&http://ossweb-/images/js/foot.js&&&/script&
&script&src=&http://ossweb-/images/js/title.js&&&/script&
&script src="/ping_tcss_ied.js"&&/script&
&script&if(typeof(pgvMain) == 'function') pgvMain();&/script&
&!DOCTYPE html&
注：文档类型统一使用html5的doctype
&meta charset="gbk" /&
注：编码统一使用gbk
&meta name="author" content="Tencent-CP" /&
&meta name="Copyright" content="Tencent" /&
Description和Keywords（可选）
&meta name="Description" content="" /&
&meta name="Keywords" content="" /&
注：Description值一般为页面标题或主题，针对该页面主题的说明。Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开。
官网通用格式：产品中文全称-产品英文缩写-官方网站-腾讯游戏-产品slogin，例如
&title&穿越火线-CF-官方网站-腾讯游戏-三亿鼠标的枪战梦想&/title&
专题通用格式：专题主题（标题）-产品中文全称官方网站-腾讯游戏，例如
&title&抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏&/title&
页面说明注释
在head区域中加上对页面相关人员注释：CP，不能为其他内容。方便在产品环境中的查看
&!-- 页面设计：cp | 页面制作：cp| 创建： --&
CSS引入方式
单页面专题统一使用写入页面头部方法，例如
//这里是具体CSS代码
多页面专题或其他类型重构需求统一使用外链CSS文件方法，例如
&link href="css/comm.css" rel="stylesheet" /&
注：无论是何种引入方式，必须在head区域内引用
使用时，按需配置，去除冗余
精简版（适用于一般的游戏类官网、专题）推荐
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:border-spacing:0}
td,th,ul,ol{padding:0}
通用版（基本适用于所有的页面）
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:font-size:font-weight:inherit}
input,textarea,select{*font-size:100%}
通用版（支持html5）
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: }
table{border-collapse:border-spacing:0}
audio,canvas,video { display: inline-*display:*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:font-size:font-weight:inherit}
input,textarea,select{*font-size:100%}
JS框架的引用
需要用到jQuery的地方统一引用以下路径：（禁止链接到其他地址）
&script&src=&http://ossweb-/images/js/jquery/jquery-1.7.2.min.js&&&/script&
&script&src=&http://ossweb-/images/js/milo/milo-min.js&&&/script&
include的使用
多页面专题，子页超过2个以上，使用include提取页面相同元素，为了便于本地预览，请在图片分离后进行include，示例：
&!--#include file=“/inc/文件名.inc”--&
body{font:12px/1.5 tahoma,'\5b8b\4f53',sans-}
说明：出于有可能乱码而导致字体解析错误的原因，font-family中用到中文字体时，建议优先使用unicode码方式，英文别名方式为备选方案禁止使用中文方式
font-family:'\5FAE\8F6F\96C5\9ED1'; /*推荐*/
font-family:'Microsoft Yahei'; /*备选*/
页面上没有做特殊效果，后期需要修改的内容，如：活动时间、活动方式、活动规则、奖品内容等，尽量用文本内容来实现，不要切在背景中
所有xhtml标签、css、class、id都需小写。class、id命名要有意义。可以是英文或拼音的缩写。能通过名称看出元素的大概用途。
需要联调的部分，不要用ID的形式定义样式，以免ID名变化，引起页局错乱。
给重要的 &a& 标签加上title，特别是需要联调的专题；
必须给链接加地址，同风格的内页，直接刷新本页，不要用打开新页面的形式；
产品要求点击提示“敬请期待！”的，代码统一用href="javascript:alert('敬请期待！')"的形式
IE6下半透明png24图片的处理
方案1： png8
说明：将背景切进图片中，导出为png8格式
方案2： AlphaImageLoader滤镜
selectors{
background: url(image.png);
_background:
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
此方案适用于页面透明png24较少的情况下使用，并且不可以是聚合图
方案3： DD_belatedPNG
使用示例：
&!--[if IE 6]&
&script src="http://ossweb-/images/js/comm/DD_belatedPNG-min.js"&&/script&
DD_belatedPNG.fix('.example1,.example2');
&![endif]--&
说明：建议优先选择方案1，如方案1不行，选择方案2，方案3为最后的方案
代码内不可有过多无意义空格、换行，tab缩进允许。
图片文件：/images/
CSS文件：/css/，文件命名如：comm.css（单面页css放在同一个页面中，css的reset采用范例规定的格式）
JS文件（非必须，框架、公用js的放到该目录）：/js/，文件命名如：comm.js
inc文件：/inc/(include页面片)
专题目录命名
a+日期+专题英文或拼音简写 (例如：aavatar，统一使用小写字母)，文件名禁止以数字开头
html首页、引导页命名为index.htm或index.shtml（不要用.html，只有页面使用了include时，后缀名才用.shtml）
html内页，有明显分类的，按英文或拼命首字母命名，无明确意义的，可用page01.htm、page02.htm
所有文件名统一使用小写
图片标签必须写上宽度、高度和alt属性，宽高为图片的原大小，例如：
&img src="" width="500" height="200"
alt="活动奖品建筑排程卡"/&
图片体积不能超过150K，图片格式包括.jpg/.gif/.pngjpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%透明PNG32图片必须用压缩工具压缩后提供，。
合并当前页面中出现的小图片，尽可能减少页面请求数；
辅助图片（修饰、间隔、提醒的图片）作为背景图处理，通过css的background定义；
各类按钮、文字、标题要尽量从背景中分离；能重复利用的部分尽量提取；
页面需具有扩展性，特殊情况除外；
合理切图，需要程序后台动态生成的图片，必须单独切割出来；
专题完成测试，经过确认后，进行图片分离；
如果专题名是aavatar，
将来该专题的图片都会在http://ossweb-/images/chanpin/r2/public/aavatar/下，
需要将css、页面中的图片连接路径修改为绝对路径：http://ossweb-/images/chanpin/r2/public/aavatar/header_bg.jpg
图片路径格式举例说明：http://ossweb-/images/chanpin/r2/public/aavatar/header_bg.jpg
r2是产品名简写，详情查询 ，aavatar是专题名。
浏览器兼容性测试
兼容IE6、IE7、IE8、IE9、Firefox、chrome，TT浏览器。并且拖大和缩小窗口，页面布局不会发生错位；
显示器分辨率测试
可读性测试
在屏蔽js、css后，页面要仍然具有良好的可读性。
表现与结构分离，代码中不要涉及表现元素，如：style、font、bgColor、border等。
选用恬当的元素，标题使用h1~h6，h1为网页一级标题，一个页面中只出现一次；
分大块使用div，段落使用p。数据列表使用table/ul/ol/dd等，关键字使用strong
chrome插件检查工具
页面完成后，请先使用对完成页面自检，无问题后再进行后续流程。
cpexp插件功能：
检测页面标题规范
页面关键字、描述、编码
专题目录是否符合规范
检查页面链接是否为空连接，图片是否分离，是否添加alt和width、height属性
检查点击流、top条、foot是否添加
腾讯视频参数是否添加outhost等
exe检测程序功能：
检测页面标题规范
检测页面关键字、描述、编码
检测页面链接是否为空连接，图片是否分离，是否添加alt属性
检测点击流、top条、foot是否添加
检测样式图片是否分离
需要在&/body&前添加，根据产品不同，调用不同的js。示例：
&script&src=&http://ossweb-/images/js/title.js&&&/script&
需要在&/body&前添加，所有产品（除洛克王国、机甲旋风）专题统一调用：
&script src="http://ossweb-/images/js/foot.js"&&/script&
对于洛克王国：在&/head&前调用js文件，在&/body&前调用具体方法：
&script src="/js/foot.js"&&/script&
&script&foot()&/script&
对于机甲旋风，按如下方式调用：
&script src="/js/foot.js"&&/script&
【新增】对于火影忍者OL各活动专题页，按如下方式调用：
&script src="/foot/foot.js"&&/script&
详细说明：
通用统计代码
所有页面都需要添加统计代码，需要在&/body&前添加，示例：
&script src="/ping_tcss_ied.js"&&/script&
&script&if(typeof(pgvMain) == 'function')pgvMain();&/script&
圆盘抽奖组件：
&div class=&flash&&&div id=&swfcontent& &
&script src=&http://ossweb-/images/js/basic/flashmanagerv5.js&&&/script&
//点击开始抽奖 通知js
function callJsToStart(){
callFlashToRoll(1);
//开发获得抽奖结果 通知flash开始播放效果 js->flash
function callFlashToRoll(id){
//通知转盘转到对应的中奖产品的id （序号从0,1,2.....，0是指针初始指示的位置，沿着顺时针的方向递增）
if(SWFOBJ)SWFOBJ.stopRoll(id);
//3、flash动画完成通知js
function callJsToComplete(){
alert('恭喜你获得大奖哟！！');
//初始化抽奖对象的SWFOBJ
//转盘的中心点坐标为（0,0））
var SWFOBJ= FlashManager.init({
'flashUrl' : 'http://ossweb-/images/flash/lottery/circle/lotteyround_2013_v1.swf',
'r':8,//奖品总数
'width':660,//flash宽度
'height':660,//flash高度
'b':'http://ossweb-/images/flash/lottery/circle/g.png',//圆盘的图片 文件格式可以是swf、png、jpg（建议swf 可以压缩）
's':'http://ossweb-/images/flash/lottery/circle/z.png',//开始抽奖按钮图片
'bx':0,//圆盘的图片位置x坐标 （转盘的中心点坐标为（0,0））
'by':0,//圆盘的图片位置y坐标
'sx':0,//开始抽奖按钮x坐标
'sy':0,//开始抽奖按钮y坐标
'contentId' : 'swfcontent',//嵌入swf 的div层的 id
'onClickRollEvent' : callJsToStart,//对应上面接口
'onCompleteRollEvent':callJsToComplete //对应上面接口
方形抽奖组件：
效果演示：
代码示例：
.flash{background:url(lotterybg.jpg) no-width:421 height:300overflow:}
&div class=&flash&&&div id=&swfcontent&&&/div&&/div&
&script src=&http://ossweb-/images/js/basic/flashmanagerv5.js&&&/script&
//开始抽奖flash->js
function callJsToStart(){
callFlashToRoll(1);
//开发获得抽奖结果 通知flash开始播放效果 js->flash
function callFlashToRoll(id){
//通知转盘转到对应的中奖产品的id （序号从0,1,2.....沿着效果光走的顺序，对应下面配置中奖品光效的位置 如id=0 对应显示在19_20的位置）
if(SWFOBJ)SWFOBJ.stopRoll(id);
//3、flash动画完成通知js
function callJsToComplete(){
alert('恭喜你获得大奖哟！！');
//初始化抽奖对象的SWFOBJ 可以不知道内部
var SWFOBJ = FlashManager.init({
'flashUrl' : 'http://ossweb-/images/flash/lottery/lotterybox_2013_v1.swf',
//'lighturl':'light.png',
//外部光圈png
不填写就用默认的效果
//'starturl':'startbtn.png',//外部按钮png
不填写就用默认的按钮效果
'width':800,//flash 宽度
'height':660,//flash 高度
'total':18,//抽奖产品的总数
'sbtnx':239,// 开始抽奖按钮的位置x坐标
'sbtny':130 ,// 开始抽奖按钮的位置y坐标
'sbtnw':320,// 开始抽奖按钮的宽度
'sbtnh':100,// 开始抽奖按钮的高度
'boxw':100,// 奖品光效的宽度
'boxh':100,//奖品光效的高度
'position':"19_20,128_20,238_20,348_19,459_19,568_19,679_19,19_129,128.8_129,568_129,678_129,19_240,128_240,238_240,349_240,459_239,569_239,679_239",
//奖品光效的位置，对应奖品图片的布局，填入每个奖品的位置以及角度用逗号分割
x_y_rotation（角度为0的可以不填写） 例如19_20或者19_20_0 表示第一个奖品的位置 x坐标为19px y坐标为20px 角度为0。）
'contentId' : 'swfcontent',//嵌入swf 的div层的 id
'onClickRollEvent' : callJsToStart,//对应上面接口
'onCompleteRollEvent':callJsToComplete //对应上面接口
使用说明：
flash抽奖组件模板说明及下载：
flashUrl在本地测试时可使用本地flash文件，上传至服务器时请修改为规范中的统一地址
当电脑本地页面要访问网上的flash的时候可能会受到本地的安全限制,如遇此问题请查看
Milo版推荐
效果演示：
代码示例：
&!--登录前状态 Start--&
&p id="unlogin">亲爱的用户，请 &a href="javascript:;" id="dologin"&[登录]&/a&&/p&
&!--登录前状态 End--&
&!--登录后状态 Start--&
&p id="logined" style="display:none"&欢迎您，&span id='login_qq_span'&&/span&，&a href="javascript:;" id="dologout"&[注销]&/a&&/p&
&!--登录后状态 End--&
&script src="http://ossweb-/images/js/milo/milo-min.js"&&/script&
milo.addEvent(g("dologin"), "click", function() {
need("biz.login-min",function(LoginManager){
LoginManager.init({
needReloadPage:true
LoginManager.login();
milo.addEvent(g("dologout"), "click", function() {
need("biz.login-min",function(LoginManager){
LoginManager.logout();
milo.ready(function() {
need("biz.login-min",function(LoginManager){
LoginManager.checkLogin(function(){
g("login_qq_span").innerHTML = LoginManager.getUserUin();//获取QQ号
专题使用示例：
使用说明：
在页面尾部，在页面&/body&前调用脚本http://ossweb-/images/js/milo/milo-min.js
登录前的ID名为unuulogin、登录后的ID名logined，登录按钮ID名为dologin，注销按钮ID名为dologout
请充分测试登录前、后的页面效果，预留足够的位置。
loginmanagerV3版
效果演示：
代码示例：
&div class=&login&&
&p id=&unlogin&&亲爱的用户，请&a href=&javascript:LoginManager.login();&&登录&/a&&/p&
&p id=&logined& style=&display:&&欢迎您，&span id='login_qq_span'&&/span&，&a href=&javascript:LoginManager.logout();&&注销&/a&&/p&
&script src=&http://ossweb-/images/js/login/loginmanagerv3.js& charset=&gb2312&&&/script&
//检查是否已登录，已登录则获取QQ号显示已登录状态
LoginManager.checkLogin(function(){
document.getElementById(&login_qq_span&).innerHTML = LoginManager.getUserUin();//获取QQ号
使用说明：
/* 打开登录 */
LoginManager.login();
/* 检查是否登录 */
LoginManager.checkLogin(function(){ alert('已登录！'); }, function(){ alert('未登录！'); });
/* 退出登录 */
LoginManager.logout();
/* 自动判断是否登录后并执行方法 */
LoginManager.submitLogin(function(){ alert('登录成功以后执行方法'); });
/* 取得登录QQ号码 */
LoginManager.getUserUin();
/* 取得登录用户妮称 */
LoginManager.getNickName(function(loginInfo){
alert(JsonObject.toJsonString(loginInfo));
/* 取得登录用户相关业务的会员信息 */
LoginManager.getUserVip('cf', function(vipInfo){
alert(JsonObject.toJsonString(vipInfo));
/* 取得登录用户相关业务开钻信息 */
LoginManager.getUserDiamond('qqgame', function(diamondInfo){
alert(JsonObject.toJsonString(diamondInfo));
新版调用方式推荐
效果演示：
代码示例：
&div id=&videoCon& class=&video&&&/div&
&script src=&/tencentvideo_v1/js/tvp/tvp.player.js& charset=&utf-8&&&/script&
var video = new tvp.VideoInfo();
video.setVid(&q0011iyvdam&);//视频vid
var player = new tvp.Player(350, 190);//视频高宽
player.setCurVideo(video);
player.addParam(&autoplay&,&1&);//是否自动播放，1为自动播放，0为不自动播放
player.addParam(&wmode&,&opaque&);
player.addParam(&pic&,&http://ossweb-/images/roco/act/amovie/video_pic.jpg&);//默认图片地址
player.addParam(&flashskin&, &/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf&);//是否调用精简皮肤，不使用则删掉此行代码
player.write(&videoCon&);
使用说明：
调用tvp.player.js时必须加上charset="utf-8"以防止乱码问题
目前互娱大部分产品域名已添加至白名单，播放视频时不会再播放广告，如页面上的播放器依然播放广告，或者需要添加新域名到广告白名单，请联系rukkihuang或者banybai。
旧版调用方式
代码示例：
&object width="宽度" height="高度" align="middle" id="playerswf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-" codeBase="/get/flashplayer/current/swflash.cab#version=10,0,0,0"&
&param name="movie" value="http://static./TencentPlayer.swf?vid=r0101gvjgcm&autoplay=1&loadingswf=/minivideo_v1/vd/res/skins/web_small_loading.swf&skin=/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"&
&param name="wmode" value="opaque"&
&param name="quality" value="high"&
&param name="allowfullscreen" value="true"&
&param name="allowNetworking" value="all"&
&param name="allowscriptaccess" value="always"&
&embed width="宽度" height="高度" align="middle" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" id="_playerswf" name="_playerswf" quality="high" src="http://static./TencentPlayer.swf?vid=r0101gvjgcm&autoplay=1&loadingswf=/minivideo_v1/vd/res/skins/web_small_loading.swf&skin=/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf" wmode="opaque"&
由于未知安全漏洞，禁止添加outhost参数
由于旧版调用方式不支持多终端，已不再推荐使用
Milo版推荐
效果演示：
代码示例：
&p&弹出id为test1的div：&button onClick="TGDialogS('test1')"&点击弹出&/button&&/p&
&p>弹出id为test2的div：&button onClick="TGDialogS('test2')"&点击弹出&/button&&/p&
&!-- 弹出层test1 Start--&
&div class="dialog" id="test1" style="display:none"&
&div class="dia-con"&我是弹出层test1&/div&
&a class="dia-close" href="javascript:showDialog.hide()" title="关闭"&&&/a&
&!-- 弹出层test1 End--&
&!-- 弹出层test2 Start--&
&div class="dialog" id="test2" style="display:none"&
&div class="dia-con"&我是弹出层test2&/div&
&a class="dia-close" href="javascript:showDialog.hide()" title="关闭"&&&/a&
&!-- 弹出层test2 End--&
&script src="http://ossweb-/images/js/milo/milo-min.js"&&/script&
function TGDialogS(e){
need("biz.dialog-min",function(Dialog){
Dialog.show({
bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
opacity:50
//弹出“遮罩”的透明度，格式为｛10-100｝，可选
function closeDialog(){
need("biz.dialog-min",function(Dialog){
Dialog.hide();
使用说明：
在页面底部引入脚本http://ossweb-/images/js/milo/milo-min.js（必须放在页面底部，禁止放在head里面）
配置弹出层背景颜色和透明度，即function TGDialogS(e){showDialog.show({id:e,bgcolor:"这里填写背景颜色",opacity:这里填写透明度（0-100）});}，例如bgcolor:"#000",opacity:70
弹出id为test的divTGDialogS("test")，只要将GDialogS("test")中的test改为相应id即可
关闭弹出层closeDialog();
showDialog.js版
效果演示：
代码示例：
&a class=&dia-btn& href=&javascript:showDia();&&点击显示弹层&/a&
&div class=&dia& id=&dia& style=&display:none&&
&div class="dia-con"&弹出层内容&/div&
&a class=&dia-close& href=&javascript:showDialog.hide()& title=&关闭&>&&/a&
&script src=&http://ossweb-/images/js/comm/showDialog.min.js&&&/script&
function showDia(){
showDialog.show({
//需要弹出的id，如果是弹出页面上的div，则该选项为必选
bgcolor:&#e3e3e3&,//弹出“遮罩”的颜色，格式为"#FF6600"，可选，默认为"#fff"
opacity:50
//弹出“遮罩”的透明度，格式为｛10-100｝，可选
腾讯微博话题墙
效果演示：
代码示例：
//在页面相应位置嵌入腾讯微博开放平台生成的话题墙代码
&iframe frameborder=&0& scrolling=&no& src=&http://wall.v./index.php?c=wall&a=index&t=tguide%E8%AF%9D%E9%A2%98%E5%A2%99&ak=&w=345&h=300&n=&url=http%3A%2F%%2Fdemo%2Ftopicwall.htm&s=4&o=7& width=&345& height=&300&&&/iframe&
话题墙代码由腾讯微博开放平台生成，进入
在腾讯话题墙组件页面输入相应内容，设置颜色尺寸等，点击“获取代码”按钮即可生成话题墙代码，若不是开发者身份，需在腾讯微博开放平台申请成为开发者才可使用生成话题墙
腾讯微博、QQ空间分享
效果演示：
代码示例：
&a href=&javascript:share('qqwb')& title=&QQ微博转播&&QQ微博转播&/a&
&a href=&javascript:share('qqzone')& title=&QQ空间转播&&QQ空间转播&/a&
function share(site) {
var _url = encodeURI(document.location);//页面地址
var _title = encodeURI(document.title);//页面title
var _pic = encodeURI(&&);//图片：例如：var _pic='图片url1|图片url2|图片url3....
var _appkey = encodeURI(&&); //你从腾讯获得的appkey
var _summary = encodeURIComponent("请输入转播的内容");//转播内容，特殊字符"#"="%23"
if (site == &qqwb&) {
var _t = _summary + encodeURI(&地址：&);
var _u = 'http://v./share/share.php?title=' + _t + '&url=' + _url + '&appkey=' + _appkey + '&pic=' + _
if (site == &qqzone&) {
var _u = 'http://sns./cgi-bin/qzshare/cgi_qzshare_onekey?url=' + _url + '&title=' + _title + '&pics=' + _pic + '&summary=' + _
window.open(_u, '', 'width=700,height=680,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,location=yes,resizable=no,status=no');
腾讯微博一键收听
Milo版推荐
效果演示：
使用说明：
在页面&/body&前调用脚本http://ossweb-/images/js/milo/milo-min.js
将js模块中中括号里的内容修改为相应微博即可，如需收听多个微博则以","分隔微博账号，如lol与TGideas的微博下发如下["lol","TGideas"]
示例本地无法运行，具体使用方法查看页面源文件
checkAll.js版
效果演示：
代码示例：
&a href=& href=&javascript:void(0)& onclick=&checkAll()& title=&收听官方微博&>收听官方微博&/a&
&script&src=&http://ossweb-/images/js/login/loginmanagerv2.js&&charset=&gb2312&&&/script&
&script&src=&http://ossweb-/images/js/comm/checkAll.min.js&&charset=&gb2312&&&/script&
function checkAll(){
followAll([&livexiaozhihui&,&TGideas&],function(){
alert(&您已成功收听英雄联盟官方微博、TGideas官网微博&);
},function(){
alert(&收听失败，请刷新后重试~~&);
个人信息收集
效果演示：
代码示例：
&a&href=&javascript:openOneFloater();&&点击查看&/a&&/p&
&!--&个人信息填写&--&
&div&id=&personInfoContent&&class=&defaultContent&&style=&display:&&
&p&class=&infTxt&aRit&&&a&href=&javascript:FloaterManager.close();&&关闭&/a&&/p&
&p&class=&infTxt&&个人信息填写：为保证实物奖励能准确邮寄，下面所有项目务必详细填写！&span&class=&light&&未获得实物奖励请勿填写&/span&&/p&
&table&width=&422&&cellspacing=&0&&cellpadding=&0&&border=&0&&
&&&&&td&class=&tdCont&&&span&class=&litSpan&&*&/span&&姓名：&/td&
&&&&&td&&input&name=&sName&&type=&text&&class=&iKuang&&&/td&
&&&&&td&class=&tdCont&&&span&class=&litSpan&&*&/span&&身份证号码：&/td&
&&&&&td&&input&name=&sIdentity&&type=&text&&class=&iKuang&&&/td&
&&&&&td&class=&tdCont&&&span&class=&litSpan&&*&/span&&手机号码：&/td&
&&&&&td&&input&name=&sMobile&&type=&text&&class=&iKuang&&&/td&
&&&&&td&class=&tdCont&&&span&class=&litSpan&&*&/span&&详细地址：&/td&
&&&&&td&&input&name=&sAddress&&type=&text&&class=&iKuang&&&/td&
&&&&&td&class=&tdCont&&&span&class=&litSpan&&*&/span&&邮编：&/td&
&&&&&td&&input&name=&sPostCode&&type=&text&&class=&iKuang&&&/td&
&&&&&td&&/td&
&&&&&td&&input&id=&personSubmitBtn&&type=&button&&class='submitBtn'&/&&/td&
&!--&//个人信息填写&--&
&script&src=&http://ossweb-/images/script/bootmanager.js&&&/script&
$import('com.qq.basic.*');
var&openOneFloater&=&function(){
var&oneFloater&=&FloaterManager.init({
'type'&:&'dom',
'content'&:&'personInfoContent'&//页面ID
oneFloater.show();
使用说明：
在&/body&前调用本规范中的脚本
按示例编写结构、修改样式即可，功能由开发实现
不要更改弹出层ID以及input表单的name属性，可以用"li"或是"table"构建弹出层结构
打开弹出层的方法为openOneFloater()，关闭的方法为FloaterManager.close()
活动Tips订阅
代码示例：
&a href="javascript:doReg(59)"&活动开始时提醒我&/a&
&script src="http://ossweb-/images/comm/sign.js"&&/script&
使用说明：
在页面&/body&前调用http://ossweb-/images/comm/sign.js
调用方式为javascript:doReg(59)，59为活动id，请产品接口人提供id号
示例本地无法运行，具体使用方法参考代码示例
效果演示：
具体代码请参考
使用说明：
在页面&/body&前调用脚本http://ossweb-/images/js/milo/milo-min.js
need("biz.scroll",function(s){})中调用相应的滚动js模块，设置相应参数即可
效果演示：
具体代码请参考
使用说明：
按示例拷贝脚本和构建容器，修改容器、左右箭头ID、设置显示框、翻页宽度等参数
图片命名形成有序列表，大小图片命令是有规律的对应关系
效果演示：
具体代码请参考
使用说明：
在页面&/body&前调用脚本http://ossweb-/images/js/milo/milo-min.js
need("biz.tabs",function (tabs){})中调用相应的滚动js模块，设置相应参数即可
效果演示：
具体代码请参考
使用说明：
在页面&/body&前调用脚本http://ossweb-/images/js/milo/milo-min.js
need("biz.loveWall-min",function(loveWall){})中调用爱墙js
样式要求love-wall-wrap为容器id，可以自定义；爱墙显示的class名必须为love-walls，关闭的样式名为close-walls，样式的内容根据稿调整；
详情请查看源文件，一般情况下爱墙个数不能小于3个，大于12个（即&div class="love-walls"&的个数）。
页游官网规范
Include页面片
目的：方便维护修改，只改一处，其它相同处都能得到相应的同步更改。
标准：在页面中出现三次或三次以上的模块，一般出现在页面的底部版权模块、头部导航模块及内页侧栏模块。另有特殊情况，选区页的侧栏模块仅出现两次就需要使用include页面片。
选区页侧栏模块截图：
底部版权模块截图：
头部导航模块截图：
内页侧栏模块截图：
格式：&!--#include virtual="/官网的文件夹名称/inc/文件名.inc"--&
底部版权：&!--#include virtual="/web201310/inc/footer.inc"--&
头部导航：&!--#include virtual="/web201305/inc/header.inc"--&
内页侧栏：&!--#include virtual="/web201308/inc/sidebar.inc"--&
选区页侧栏：&!--#include virtual="/web201308/inc/server.inc"--&
文件命名方式
文件夹/文件
官网文件夹
web+年份+月分
2013年10月份做的官网：web201310
选区页文件夹
server/website
二级目录，跟服务器目录一致
新闻模板文件夹
样式文件夹
脚本文件夹
页面片文件夹
图片文件夹
包含图片、flash、视频文件
登录前（开始游戏）选区页
startgame.shtml
登录后（选择服务器）选区页
services.shtml
活动专区页
新闻列表页
news-list.shtml
新闻详情页
news-detail.shtml
新闻模板列表页
list-产品英文名-年份月份.shtml
list-s3-201207.shtml
新闻模板详情页
detail-产品英文名-年份月份.shtml
detail-s3-201207.shtml
新闻模板首页
index-产品英文名-年份月份.shtml
index-s3-201207.shtml
注意事项：
如有增加其它文件，请向重构同学咨询命名方式。
Flash和视频文件放置图片文件夹中。
新闻列表页和新闻详情页重构好之后再套用新闻模板列表页和新闻模板详情页，再加上新闻模板首页（不需重构页面，直接套用模板），共有三个模板。在套用模板之前，请先咨询重构同学套用模板时需要注意的事项，模板中的代码谨慎操作，不可随意删除，重构完页面后仔细检查核对。见附件中的模板和说明文档：
文件存放目录总是相对web2014xxxxx，比如引用css：/web201309/css/style.css，引用inc文件：/web201309/inc/footer.inc
具体查看附件：
注：该附件中的页面代码是虚拟的，只关注目录结构，不参考此代码。
分离文件的路径地址及一些链接入口的地址
服务器上图片地址：
http://ossweb-/images/产品名英文/官网文件夹名称/图片名.图片格式后缀名
例如蜀山产品：
http://ossweb-/images/s3/web201207/bg.jpg
服务器上页面地址：
首页：http://产品名英文.qq.com/
Cdkey页：http://产品名英文.qq.com/官网文件夹名称/cdk.shtml
活动中心页：http://产品名英文.qq.com/官网文件夹名称/act.shtml
开始游戏选区页：http://产品名英文.qq.com/server/website/startgame.shtml
选择服务器选区页：http://产品名英文.qq.com/server/website/services.shtml
例如蜀山产品：
Cdkey页：/web201207/cdk.shtml
活动中心页：/web201207/act.shtml
开始游戏选区页：/server/website/startgame.shtml
选择服务器选区页：/server/website/services.shtml
（新闻模板页忽略文件地址，待重构提供，有则加上，无则不加）
选区页模板文件（要求设计稿按照此模板设计）
模板文件：/webgame_login/website/
该文件还在测试阶段，暂未对外开放，重构选区页之前，务必主动与重构同学沟通该模板的重构方法。html结构（index.tpl）代码保持不变，只改css样式（server.css）代码，改变风格。见附件：
初稿如图：
注：该模板只适用于自研产品接入webgame-login系统时使用；代理产品走开平渠道，主动咨询重构提供其它模板。重构选区页之前，先主动与产品沟通，确认是自研产品还是代理产品，务必及时沟通相关事项后再开始重构。
title举例（标红字为产品中文名）
新闻详情页模板
$sTitle.DATA$-真王官方网站-腾讯游戏
新闻列表页模板
新闻中心-真王官方网站-腾讯游戏
首页-七雄Q传官方网站-腾讯游戏
CDKEY兑换中心-蜀山传奇官方网站-腾讯游戏
活动中心页
活动中心-宠物牧场官方网站-腾讯游戏
开始游戏选区页
开始游戏-勇者之塔官方网站-腾讯游戏
选择服务器选区页
服务器选区-宠物牧场官方网站-腾讯游戏
官网换肤相关：
请和产品人员索要官网最新文件包
在此文件包的基础上修改，不用新建类似web2014xx文件夹
返回修改过的文件即可。
其它注意事项：
轮播广告和中栏广告，统一调用milo脚本，title和统计代码需要延迟加载，见附件实例：
内页背景要求可延伸，支持可扩展内容，尤其是新闻详情页和选择服务器页。
footer的样式，主动咨询产品或参考其它官网，设计稿中的footer不一定适用官网，官网中每个页面的footer都一样，包括选区页。
文件的后缀名为.shtml，而非htm/html，文件包中没用到的文件、样式、图片等要删除，样式和脚本如果有共用的需要提取出来，官网上所有的链接必须补全，如有不懂之处，多问产品和重构，检查主流浏览器的兼容性。
需要在本地装上虚拟服务器，方便预览.shtml文件。
手游项目页面临时重构规范
1.页面设计稿大小1000px，可视区域做成640px宽，用于适配iPhone以及一般的Android机型。如下图：
2.按钮大小尽量做大，高度尽量为44px，刚好为人手指按下的区域。
3.不需要设计hover效果。
4.尽量使用按钮链接而不是文字链接，方便用户点击。
5.使用渐变，纯色等设计页面，避免大量使用图片。
1.页面可视区域均以320px，并居中布局，切图的时候按照640宽度的设计稿，将各元素减半重构,特殊要求和自适应布局除外。
2.不需要设置默认字体，终端浏览器会自动将字体设置为终端上的字体。
3.为页面设置viewPort：
&!doctype html&
&html lang=&zh-cn&&
&meta charset=&gbk&&
&meta name=&Description& content=&& /&
&meta name=&Keywords& content=&& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1, maximum-scale=1& /&
&title&专题名-XXX官网-腾讯游戏&/title&
&!-- 设计：cp | 重构：cp | 创建： | 更新：| 团队博客：/ --&　
&div class=&foot&&
&script type=&text/javascript& src=&http://ossweb-/images/js/mfoot.js&&&/script&
&script src=&/ping_tcss_ied.js&&&/script&
&script type=&text/javascript&&
if(typeof(pgvMain) == 'function')
pgvMain();
使用2倍图来展现页面效果。假设切出来的banner宽高为：640x200。背景图可利用background-size来调整图片，img标签的图片可将其width和height减半。参考代码：
&div style=&background-img:url(images/banner_2x.jpg);background-size:320px 100&&&/div&
&img width=320 height=100 src=&images/banner_2x.jpg&/&
能用CSS3体现的图片，尽量使用CSS3，如圆角按钮，渐变背景等。
浏览器兼容性测试
兼容UC、Chrome，Safari，QQ浏览器，Android原生浏览器。
手游登录接口
Gesture组件
这是对移动端复杂手势的封装组件。如：您需要实现一个右滑动的事件，那么您仅需要在页面引入
&script src=&http://ossweb-/images/js/comm/gesture.min.js&&&/script&
之后，添加以下代码
gesture(document).on('swiperight', function(e){
//document可换成您需要绑定事件的节点
//此处处理您的业务逻辑
一、事件支持
Gesture目前内置支持的事件有以下常用的几个：
touchstart、touchmove、touchend、touchup、touchdown、touchleft、touchright、swipeup、swipedown、swipeleft、swiperight、tap(日新增)；
二、组件使用
本插件使用非常简单，仅需两步完成
1、生成gesture对象
//document可换成您需要绑定的节点
第二个参数为可选
var gst = gesture(document,{
preventDefault : false
//默认组织默认事件，不想阻止的情况下，设置该值为false
2、绑定事件
var handler = function(e){
console.log(e)
gst.on('swiperight', handler);
多个事件绑定支持链式写法
gst.on('swiperight', handler).on('swipeleft', handler);
如果您实际的业务情况和上面一样，多个事件绑定了同一个函数，那么，您的代码可以精简为下面的这种方式
gst.on('swipeleft swiperight', handler);
//多个事件之间用空格进行分隔
3、事件卸载
和绑定事件方法的使用完全一致，调用的方法为off
gst.off('swiperight', handler);
&script src=&http://ossweb-/images/js/comm/film.min.js&&&/script&
1、每一帧为单独的一张图片。
2、sprite合并后的单张图片。
使用起来非常简单，只需要进行如下的操作
//node为逐帧动画播放的节点，第二个参数则为一些简单的配置参数
var spritePic = film(node,{resource : [],totalFrame : 15})
创建好了逐帧动画播放组件后，就可以通过一些简单API的使用，来对这个组件进行操作。 如：
spritePic.next()
spritePic.prev()
再介绍这些API使用之前，还是先给大家介绍下Film组件的配置参数
配置参数：
resource : 必填
描述：帧图片资源
如果采用的是单帧单图片的形式，那么该值为数组，从第一帧到第N帧按顺序排列，每个值均为对应帧的url地址。如：['1.png','2.png','3.png'];
如果采用的是sprite的形式，那么该值为字符串。为sprite图的url地址。如：’/aiden/sprite.png’。(PS:当然了，你要是不闲麻烦，硬要写成一个数组也是可以的['/aiden/sprite.png'])
totalFrame: 选填
描述：总的帧数
默认值为10
sprite形式下必填
单帧单图片形式下该值无效，通过resource长度计算得出
spriteDirect: 选填
描述：雪碧图平铺方向
默认值为0。
单帧单图片形势下该值无效
0 ：根据长度进行计算。如果长度>宽度，认为为横向平铺
1 ：横向平铺
2 ：纵向平铺
index：选填
描述：默认显示的帧
playTime：选填
描述：完成持续转动的时间长度
默认值为1000ms
比如说你想要直接从当前的帧播放到最后一帧，那么中间需要的时间数即为playTime
aniType：选填
描述：动画运行轨迹
默认值linear
内置支持linear、easeIn、easeOut、easeInOut；
如果您觉得上面的四种效果达不到您想要的效果，可以直接传递一个常见的算法函数
aniType : function(t,b,c,d){return c*(t/=d)*t*t + b}
onPlaying : 选填
描述：播放到某一帧的时候执行的回调函数，该函数中可获得当前的帧的index
onLoading：选填
描述：资源加载时候的回调，每次加载完一个资源机会执行一次，在该函数中可获得当前加载完成的资源个数，总的资源个数以及当前加载的图片宽高
PS：资源仅限于图片。该方法为的是让大家可以轻松实现loading效果
onComplete：选填
描述：所有的资源加载完成后的回调，该函数中可获得最后一张资源的宽度
aniComplete：选填
描述：动画自动播放完成后的回调，如果调用pause方法手动停止的话，不会被执行
具体的用法如下：
var myFilm = film(myNode, {
resource : '/aiden/sprite.png',
//如果传递的为一张图片，那么认为是采用sprite的形式进行
totalFrame : 15,
spriteDirect : 0, //使用sprite图片的时候，可以指明sprite平铺方向
那么根据长宽比进行判断
index : 0, //默认显示第几帧
playTime : 1000, //滚动执行时间
aniType : 'linear', //运算轨迹
//资源加载时的回调
onLoading : function(){
console.log(arguments);
//资源加载完成后的回调
onComplete : function(){
console.log(arguments);
//每次完成一张图片切换时的回调
onPlaying : function(){
console.log(arguments);
//每次自动完成一次动画播放后的回调
aniComplete : function(){
上面看起来貌似挺复杂的，其实可能很多时候你的一些参数根本就不需要去配置。
可能，您更多的时候是像下面这样的
var myFilm = film(myNode, {
resource : '/aiden/sprite.png'})
为了方便大家对这个帧播放组件的控制，提供了一系列的API可供大家调用：
描述：跳转到指定的帧，接收唯一参数，即需要跳转到的帧数
myFilm.jumpTo(2)
//跳转到第第三帧，从0开始计算
描述：播放下一帧
myFilm.next();
描述：播放上一帧
myFilm.prev()
playByIndex：
描述：通过指定帧的下标，完成帧的播放
myFilm.playByIndex(2,"forward")
//向前播放到第二帧 //同时也支持临时的参数值修改 myFilm.playByIndex(2,{
direction : "forward",
playTime : 100,
aniType : 'easeIn'})
playByNum：
描述：通过指定一个运动步数，来完成帧的播放
myFilm.playByNum(10,"forward")
//向前播放10帧 //和playByIndex一样，同时也支持临时的参数值修改 myFilm.playByIndex(2,{ direction : "forward", playTime : 100, aniType : 'easeIn'});
描述：完成逐帧动画的自动播放，通过使用该方法…可以让你简单地实现png24半透明动画，也基本上可以解决手机端对gif支持不好的情况
myFilm.play(5,'backward');
//每帧之间间隔5ms的速度自动向前播放视频
描述：停止视频播放
myFilm.pause();
本指南从格式编码、文字、图片、链接以及发布五个方面给出指引，请按照本指南制作您的EDM邮件模板。
格式编码：
写上xhtml 的DOCTYPE声明
html编码请使用utf-8
页面宽度请设定在600到800px（像素）以内（考虑到主流显示器分辨率和邮件界面的侧栏），重要信息放在300-500px高度以内
HTML代码在15kb以内（各个邮箱的收件标准不一样，如果超出15kb您的邮件很有可能会进入垃圾邮件箱）
请使用table表格来布局；通过嵌套table来实现分列，避免使用colspan/rowspan；给你的单元格指定宽度
若使邮件网页在邮箱里居中显示，请在table里设定align=”center”
不可将word类文件直接转换为html格式
不要使用Flash、Java、Javascript、iframe、ActiveX、CSS滤镜，如onmouseover等，将会被过滤；如果页面中的图片一定要是动态的，请将FLASH文件转换成GIF动画使用，但在Outlook 里，GIF将不能正常显示
不要使用外链的css样式（包括页面中的&style&&/style&）定义文字和图片，正确的写法&td style=”color:#000000;” &文字&/td&”
一些老旧的邮箱对style支持也不是很好（主流邮箱没有这个问题），可以使用标签的属性来代替style属性。例如，可以使用bgcolor=”#ffffff”来代替style=”background:#ffffff”；
不要缩写css属性，例如，应该使用padding-top:10padding-right:5padding-bottom:10padding-left:5来代替padding:10px 5
不要缩写hex格式的颜色值。例如，应该使用#ffffff来代替#fff
尽量不要使用背景图片，各大邮箱服务提供商对背景图片显示处理不一致，特殊情况需要写的话，建议用table属性background来写，如下：&table background=”background.gif” cellspacing=”0″ cellpadding=”0″&，但请注意，outlook 对背景图片不识别。 对CSS的支持程度，参考：/css/
避免使用div/p/h1/h2/h3…等标签，涉及到reset问题
空td标签里面请写上 &（注意不是一个英文空格）
页头请尽量加入提示文字，如：“您之所以收到这封邮件，是因为…”
页尾请尽量加入收尾文字，也可以加上一些导航链接，如：“商品价格如有调整，请以xxx为准”、“如果您有其他任何建议和意见，请点击这里反馈”、“xxx祝您工作顺利、生活愉快”、“如果您不希望收到此类邮件，请点击此处取消订阅”
邮件主题字数避免过多（通常控制在18个字以内）；避免使用――！……等特殊符号，容易产生乱码；避免使用很多个感叹号；如果为英文主题，避免使用主题全部为大写字母
邮件主题和内容都不要加入带有网站地址的信息， 如果客户的品牌知名度比较高，主题上可加入一下公司的名称，比如：“NIKE运动时尚”
文字内容、版面尽量简洁，突出主题，以达到更高的点击率
不使用类似如下敏感及带促销类的文字：免费、优惠、特惠、特价、低价、便宜、廉价、视频、赚钱、群发、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典、秘密、情报、机密、保密、绝密、神秘、秘诀等。如果一定需要，请把敏感字制做成图片
如果发送超过20万封，主题内容要更换，发送超过200万封，要考虑重新设计。否则可能被邮件服务提供商列入黑名单
在同一个主题内容的邮件，可以通过加入混淆代码的方式，来使其代码在邮件服务提供商看来是一封“全新”和“不同”的邮件
需要特殊字体效果的请使用图片，以避免文字在各个主流邮箱中的显示有所不同
写上alt属性，尽管不同的邮件服务提供商对在图像加载失败时候的处理方式不一样。但是应该注意避免因为alt值里面的敏感文字而被判定为垃圾邮件
所有的图片都要指定宽和高。例如&img width=”100″ height=”100″ src=”book.jpg” alt=”" /&
为了消除图片之间的间距可以使用align=”top”，消除默认的border可以使用border=”0″
图片数量避免过多，尽量压缩图片大小
图片名称不能含有ad字符，否则容易被判定为广告
使用较短和更有意义的图片名称，否则容易判定为垃圾邮件，例如 campaign_054_design_0x0_v6_email-link.gif 与 email.gif
如果整个邮件模板只有一张图，一定要裁成2-3张小图，并适当保留一些文字（只有图片的邮件容易被判定为垃圾邮件）
为避免用户收到的邮件图片无法浏览，请制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话：“如果您无法查看邮件内容，请点击这里”， 链接到放有同样内容的web页面
链接数量避免过多，如果所有图片的链接地址一样，请将所有的小图合并成一张大图
链接地址的长度不能超过255个字符，中间不要包含空格
不要使用地图功能（map）链接图片，此功能会使邮件被多数邮箱划分为垃圾邮件！
文字中出现网站地址链接被屏蔽为垃圾邮件的风险是极高的，建议写成文字加链接，或是将网址做成图片加链接。
文字链接的颜色会被一些邮件服务提供商重置为默认的蓝色，为了避免这个问题，在a标签里面多嵌套一层，并设置为同样的颜色，例如&a href=”” style=”color:#0000000;”&&font style=”color:#0000000;”&文字&/font&&/a&
为确保收信人在点击链接时能够正常浏览您的内容，发布时，还要进行下列处理：
将所有图片地址换成绝对路径，写法应该是&img width=”10″ height=”10″ src=”http://…../images /1.jpg” alt=”" /&
链接请写成绝对地址}