重构外包页面规范

代码规范

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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 -->
</head>
<body>
<script src="http://ossweb-img.qq.com/images/js/foot.js"></script>
<script src="http://ossweb-img.qq.com/images/js/title.js"></script>
<script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
<script>if(typeof(pgvMain) == \'function\') pgvMain();</script>
</body>
</html>

doctype

<!DOCTYPE html>

注：文档类型统一使用html5的doctype

页面编码

<meta charset="gbk" />

注：编码统一使用gbk

Author

<meta name="author" content="Tencent-CP" />

Copyright

 <meta name="Copyright" content="Tencent" />

Description和Keywords（可选）

 <meta name="Description" content="" />

 <meta name="Keywords" content="" />

注：Description值一般为页面标题或主题，针对该页面主题的说明。Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开。

title

官网通用格式：产品中文全称-产品英文缩写-官方网站-腾讯游戏-产品slogin，例如

 <title>穿越火线-CF-官方网站-腾讯游戏-三亿鼠标的枪战梦想</title>

专题通用格式：专题主题（标题）-产品中文全称官方网站-腾讯游戏，例如

 <title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>

页面说明注释

在head区域中加上对页面相关人员注释：CP，不能为其他内容。方便在产品环境中的查看

 <!-- 页面设计：cp | 页面制作：cp | 创建：xxxx-xx-xx -->

CSS引入方式

单页面专题统一使用写入页面头部方法，例如

<head>
<style>
//这里是具体CSS代码
</style>
</head>

多页面专题或其他类型重构需求统一使用外链CSS文件方法，例如

 <link href="css/comm.css" rel="stylesheet" />

注：无论是何种引入方式，必须在head区域内引用

reset示例

注意！使用时，按需配置，去除冗余

精简版（适用于一般的游戏类官网、专题）推荐

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: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:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;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:inherit;font-size:inherit;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:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;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:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

JS框架的引用

jQuery

需要用到jQuery的地方统一引用以下路径：（禁止链接到其他地址，必须使用1.9以上版本）

 <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>

Milo

 <script src="http://ossweb-img.qq.com/images/js/milo/milo-min.js"></script>

Zepto

 <script src="http://ossweb-img.qq.com/images/js/zepto/zepto-1.1.6.min.js"></script>

include的使用

多页面专题，子页超过2个以上，使用include提取页面相同元素，为了便于本地预览，请在图片分离后进行include，示例：

 <!--#include file=“/inc/文件名.inc”-->

页面文字

基本字体

body{font:12px/1.5 tahoma,\'\5b8b\4f53\',sans-serif;}

中文字体

说明：出于有可能乱码而导致字体解析错误的原因，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: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'image.png\', sizingMethod=\'crop\');
}

此方案适用于页面透明png24较少的情况下使用，并且不可以是聚合图

方案3： DD_belatedPNG

使用示例：

<!--[if IE 6]>
<script src="http://ossweb-img.qq.com/images/js/comm/DD_belatedPNG-min.js"></script>
<script>
DD_belatedPNG.fix(\'.example1,.example2\');
</script>
<![endif]-->

说明：建议优先选择方案1，如方案1不行，选择方案2，方案3为最后的方案

其他：

代码内不可有过多无意义空格、换行，tab缩进允许。

文件规范

文件目录

存放图片/CSS文件夹命名规范：ossweb-img
CSS文件命名如：comm.css（单面页css放在同一个页面中，css的reset采用范例规定的格式）
JS文件(非必须，框架、公用js的放到该目录)：js
JS文件命名如：comm.js
inc文件(include页面片)：inc

专题目录命名

a+日期+专题英文或拼音简写 (例如：a20090817avatar，统一使用小写字母)，文件名禁止以数字开头

文件命名

html首页、引导页命名为index.htm或index.shtml（不要用.html，只有页面使用了include时，后缀名才用.shtml）
html内页，有明显分类的，按英文或拼命首字母命名，无明确意义的，可用page01.htm、page02.htm
所有文件名统一使用小写

图片规范

图片标签

图片标签必须写上宽度、高度和alt属性，宽高为图片的原大小，例如：

<img src="" width="500" height="200"  alt="活动奖品建筑排程卡"/>

图片质量

图片体积不能超过150K，图片格式包括.jpg/.gif/.png
jpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%
透明PNG32图片必须用压缩工具压缩后提供，点击下载工具。

切图要求

合并当前页面中出现的小图片，尽可能减少页面请求数；
辅助图片（修饰、间隔、提醒的图片）作为背景图处理，通过css的background定义；
各类按钮、文字、标题要尽量从背景中分离；能重复利用的部分尽量提取；
页面需具有扩展性，特殊情况除外；
合理切图，需要程序后台动态生成的图片，必须单独切割出来；

图片分离

专题完成测试，经过确认后，进行图片分离；
所有样式文件（含CSS、图片）发布到图片服务器后，请使用game.gtimg.cn进行访问（有跨域操作或cookie读写操作的js文件请勿替换）
例如专题名是a20090817avatar

该专题的图片都会在http://game.gtimg.cn/images/xiangqi/cp/a20150730avatar/下，
需要将css、页面中的图片连接路径修改为绝对路径：http://game.gtimg.cn/images/xiangqi/cp/a20150730avatar/
图片路径格式举例说明：http://game.gtimg.cn/images/xiangqi/cp/a20150730avatar/bg.jpg

http://game.gtimg.cn/是图片服务器域名
xiangqi是产品名简写，详情查询所有产品top条地址
a20090817avatar是专题名。

转盘抽奖组件模板和抽奖使用的图片不要替换，保留http://ossweb-img.qq.com/切记不要替换成http://game.gtimg.cn/请参考转盘抽奖

测试标准

浏览器兼容性测试

兼容IE6、IE7、IE8、IE9、Firefox、chrome，TT浏览器。并且拖大和缩小窗口，页面布局不会发生错位；

显示器分辨率测试

1024x768、1440x900

可读性测试

在屏蔽js、css后，页面要仍然具有良好的可读性。
表现与结构分离，代码中不要涉及表现元素，如：style、font、bgColor、border等。
选用恬当的元素，标题使用h1~h6，h1为网页一级标题，一个页面中只出现一次；
分大块使用div，段落使用p。数据列表使用table/ul/ol/dd等，关键字使用strong

检查工具

chrome插件检查工具

页面完成后，请先使用互娱cp页面检测插件对完成页面自检，无问题后再进行后续流程。

cpexp插件功能：

检测页面标题规范
页面关键字、描述、编码
专题目录是否符合规范
检查页面链接是否为空连接，图片是否分离，是否添加alt和width、height属性
检查点击流、top条、foot是否添加
腾讯视频参数是否添加outhost等

exe程序检查工具推荐

exe检测程序功能：

检测页面标题规范
检测页面关键字、描述、编码
检测页面链接是否为空连接，图片是否分离，是否添加alt属性
检测点击流、top条、foot是否添加
检测样式图片是否分离
...

常用组件

通用top

需要在</body>前添加，根据产品不同，调用不同的js。示例：

<body>
<script src="http://ossweb-img.qq.com/images/js/title.js"></script>
</body>

所有产品top条地址

通用foot

需要在</body>前添加，所有产品（除洛克王国、机甲旋风）专题统一调用：

<body>
<script src="http://ossweb-img.qq.com/images/js/foot.js"></script>
</body>

对于洛克王国：在</head>前调用js文件，在</body>前调用具体方法：

<head>
<script src="http://roco.qq.com/js/foot.js"></script>
</head>
<body>
<script>foot()</script>
</body>

对于机甲旋风，按如下方式调用：

<body>
<script src="http://jjxf.qq.com/js/foot.js"></script>
</body>

【新增】对于火影忍者OL各活动专题页，按如下方式调用：

<body>
<script src="http://huoying.qq.com/foot/foot.js"></script>
</body>

详细说明：http://huoying.qq.com/foot/index.htm

通用统计代码

所有页面都需要添加统计代码，需要在</body>前添加，示例：

<body>
<script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
<script>if(typeof(pgvMain) == \'function\')pgvMain();</script>
</body>

转盘抽奖

圆盘抽奖组件：


<body>
<div class="flash"><div id="swfcontent" >
<script src="http://ossweb-img.qq.com/images/js/basic/flashmanagerv5.js"></script>
<script>
//点击开始抽奖 通知js  flash->js
function callJsToStart(){
//测试
	callFlashToRoll(1);
}
//开发获得抽奖结果 通知flash开始播放效果 js->flash
function callFlashToRoll(id){
	//通知转盘转到对应的中奖产品的id （序号从0,1,2.....，0是指针初始指示的位置，沿着顺时针的方向递增）
	if(SWFOBJ)SWFOBJ.stopRoll(id);
}
//3、flash动画完成通知js  flash->js
function callJsToComplete(){
	alert(\'恭喜你获得大奖哟！！\');
}
	//初始化抽奖对象的SWFOBJ
	//转盘的中心点坐标为（0,0））
var SWFOBJ= FlashManager.init({
		\'flashUrl\' : \'http://game.gtimg.cn/images/flash/lottery/circle/lotteyround_2015_v1.swf\',
		\'r\':8,//奖品总数
		\'width\':660,//flash宽度
		\'height\':660,//flash高度
		\'b\':\'http://ossweb-img.qq.com/images/flash/lottery/circle/g.png\',//圆盘的图片 文件格式可以是swf、png、jpg（建议swf 可以压缩）
		\'s\':\'http://ossweb-img.qq.com/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 //对应上面接口
	});
</script>
</body>

方形抽奖组件：

效果演示：

代码示例：

<head>
<style>
.flash{background:url(lotterybg.jpg) no-repeat;width:421px; height:300px;overflow:hidden;}
</style>
</head>
<body>
<div class="flash"><div id="swfcontent"></div></div>
<script src="http://ossweb-img.qq.com/images/js/basic/flashmanagerv5.js"></script>
<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  flash->js
function callJsToComplete(){
	alert(\'恭喜你获得大奖哟！！\');
}
//初始化抽奖对象的SWFOBJ 可以不知道内部
var SWFOBJ = FlashManager.init({
		\'flashUrl\' : \'http://ossweb-img.qq.com/images/flash/lottery/lotterybox_2015_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 //对应上面接口
	});
</script>
</body>

使用说明：

flash抽奖组件模板说明及下载：抽奖模板
flashUrl在本地测试时可使用本地flash文件，上传至服务器时请修改为规范中的统一地址
当电脑本地页面要访问网上的flash的时候可能会受到本地的安全限制,如遇此问题请查看《本地安全设置》
Flash抽奖组件模板和抽奖使用的图片不要替换，保留http://ossweb-img.qq.com/ 切记不要替换成 http://game.gtimg.cn/

登录组件

Milo版推荐

效果演示：milo登录组件

代码示例：

<body>
<!--登录前状态 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-img.qq.com/images/js/milo/milo-min.js"></script>
<script>
milo.addEvent(g("dologin"), "click", function() {
	need("biz.login-min",function(LoginManager){
		LoginManager.init({
			needReloadPage:true
		});
		LoginManager.login();
	});
	return false;
});
milo.addEvent(g("dologout"), "click", function() {
	need("biz.login-min",function(LoginManager){
		LoginManager.logout();
	});
	return false;
});
milo.ready(function() {
	need("biz.login-min",function(LoginManager){
		LoginManager.checkLogin(function(){
			g("login_qq_span").innerHTML = LoginManager.getUserUin();//获取QQ号
		});
	});
});
</script>
</body>

专题使用示例：洛克王国两周年线上活动介绍

使用说明：

在页面尾部，在页面</body>前调用脚本http://ossweb-img.qq.com/images/js/milo/milo-min.js
登录前的ID名为unuulogin、登录后的ID名logined，登录按钮ID名为dologin，注销按钮ID名为dologout
请充分测试登录前、后的页面效果，预留足够的位置。

loginmanagerV3版

效果演示：loginmanagerV3版登录组件

代码示例：

<body>
<div class="login">
    <p id="unlogin">亲爱的用户，请<a href="javascript:LoginManager.login();">登录</a></p>
    <p id="logined" style="display:none;">欢迎您，<span id=\'login_qq_span\'></span>，<a href="javascript:LoginManager.logout();">注销</a></p>
</div>
<script src="http://ossweb-img.qq.com/images/js/login/loginmanagerv3.js" charset="gb2312"></script>
<script>
//检查是否已登录，已登录则获取QQ号显示已登录状态
LoginManager.checkLogin(function(){
    document.getElementById("login_qq_span").innerHTML = LoginManager.getUserUin();//获取QQ号
});
</script>
</body>

使用说明：

/* 打开登录 */
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));
});

腾讯视频

2.0视频推荐

效果演示：


    <script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js; charset="utf-8"></script>
    <script>
    var video = new tvp.VideoInfo();
    video.setVid("i001216370f");
    var player =new tvp.Player();
    player.create({
        width:480,
        height:360,
        video:video,
        modId:"mod_player",
        pic:"http://ossweb-img.qq.com/images/roco/act/a20120925movie/video_pic.jpg",        //视频封面地址
        vodFlashSkin:"http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf",  //精简皮肤        
        autoplay:true   //是否自动播放
    });
        //视频接口，tvp.Player()下
        /*
            pause()	暂停播放
            play()	play接口无参数时，表示继续播放，一般用于pause()以后的继续播放
            getPlaytime()	获取当前播放的时间，返回单位是秒
            getPlayer().mute() //开启静音
            getPlayer().mute() //关闭静音

        */

        //tvp.Player()对象提供的事件列表
        /*
            onwrite	当输出播放器时
            oninited	当播放器初始化完毕时，flash播放器在swf文件加载完毕触发，html5播放器在视频载入完毕触发
            onchange	播放器播放的视频发生变化时
            onplay	播放器开始播放时，触发了播放请求单不一定播放视频，有可能视频在缓冲中或者在播放广告
            onplaying	播放器真正开始播放视频第一帧画面时
            ongetnext	当播放器播放视频完毕，准备获取下一个视频时
            onallended	播放器播放完毕时
            onpause	播放器触发暂停时，目前只针对HTML5播放器有效
            onresume	暂停后继续播放时触发
            onfullscreen(isfull)	播放器触发全屏/非全屏时，参数isfull表示当前是否是全屏
            onerror	当播放器发生错误时
        */
    </script>

旧版

效果演示：

代码示例：

<body>
<div id="videoCon" class="video"></div>
<script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>
<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-img.qq.com/images/roco/act/a20120925movie/video_pic.jpg");//默认图片地址
    player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");//是否调用精简皮肤，不使用则删掉此行代码
    player.write("videoCon");
</script>
</body>

使用说明：

调用tvp.player.js时必须加上charset="utf-8"以防止乱码问题
目前互娱大部分产品域名已添加至白名单，播放视频时不会再播放广告，如页面上的播放器依然播放广告，或者需要添加新域名到广告白名单，请联系rukkihuang或者banybai。
腾讯视频统一播放页调用代码自动生成工具

弹出层

Milo版推荐

效果演示：

代码示例：

<body>
<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>
</div>
<!-- 弹出层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>
</div>
<!-- 弹出层test2 End-->
<script src="http://ossweb-img.qq.com/images/js/milo/milo-min.js"></script>
<script>
function TGDialogS(e){
	need("biz.dialog-min",function(Dialog){
		Dialog.show({
			id:e,
			bgcolor:\'#000\', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
			opacity:50      //弹出“遮罩”的透明度，格式为｛10-100｝，可选
		});
	});
}
function closeDialog(){
	need("biz.dialog-min",function(Dialog){
		Dialog.hide();
	});
}
</script>

腾讯互娱重构外包页面规范 V1.0

代码规范

示例

doctype

页面编码

Author

Copyright

Description和Keywords（可选）

title

页面说明注释

CSS引入方式

reset示例

精简版（适用于一般的游戏类官网、专题）推荐

通用版（基本适用于所有的页面）

通用版（支持html5）

JS框架的引用

jQuery

Milo

Zepto

include的使用

页面文字

基本字体

中文字体

文本内容

样式名

链接

IE6下半透明png24图片的处理

方案1： png8

方案2： AlphaImageLoader滤镜

方案3： DD_belatedPNG

其他：

文件规范

文件目录

专题目录命名

文件命名

图片规范

图片标签

图片质量

切图要求

图片分离

测试标准

浏览器兼容性测试

显示器分辨率测试

可读性测试

检查工具

chrome插件检查工具

exe程序检查工具推荐

常用组件

通用top

通用foot

通用统计代码

转盘抽奖

圆盘抽奖组件：

方形抽奖组件：

登录组件

Milo版推荐

loginmanagerV3版

腾讯视频

2.0视频推荐

旧版

弹出层

Milo版推荐