蓝钻PC端活动规范

文件规范

专题目录名称

a+日期+专题英文或拼音简写 (例如：a20090817avatar)
专题英文或拼音简写必须是有意义的，看到就能明白是什么活动

文件目录

图片文件：/images/
CSS文件：/css/，文件命名如：comm.css
JS文件（非必须，框架、公用js的放到该目录）：/js/，文件命名如：comm.js

文件编码

一般默认为gb2312

文件格式

除特殊情况外（如某些模版文件要求格式为shtml），文件格式统一为html

文件命名

html首页（引导页）命名为index.html,html内页，有明显分类的，按英文或拼命首字母命名

代码规范

页面标题(title)格式

专题主标题名 - 蓝钻官网 - 腾讯游戏VIP（如：<title>QQ仙灵大招募- 蓝钻官网 - 腾讯游戏VIP</title>）

meta部分

注意meta标签的设置，keywords description不能空着，可以找产品提供
<meta name="description" content="活动描述" />
<meta name="keywords" content="活动关键词" />

通用代码

1、所有xhtml标签、css、class、id都需小写
2、class、id命名要有意义。可以是英文或拼音的缩写。能通过名称看出元素的大概用途。
3、给重要的<a>标签加上title，特别是需要联调的专题。
4、注意HTML语义化标签；选用恬当的元素，标题使用h1~h6，h1为页面一级标题(一般一个页面只有一个h1)，一个页面中只出现一次分大块使用div，段落使用p，数据列表使用table/ul/ol/dd等，关键字使用strong等
5、所有页面使用html5的标准（）来制作。
6、代码内不可有过多无意义空格、换行，tab缩进允许。

css reset

通用css reset代码，使用时可以按需配置，去除冗余。
基本字体：Tahoma,Helvetica Neue,\5b8b\4f53 （第一个是优先数字；中间字体是兼容apple系统；最后一个是宋体，一般默认使用它）

css 写法

一般我们使用类属性(如：.class{})，尽量不用id属性（如：#id{}）来写css

注意CSS安全沙箱，这也是审核的重点
例如指对a img等的定义，不要污染到其他模块下的 a img，所以这里把它们限定在.applist里面
建议写样式的时候要有这种模块的思想，否则很容易污染到页面其他组件。

页面文字

1.页面上没有做特殊效果，后期需要修改的内容，如：活动时间、活动方式、活动规则、奖品内容等，尽量用“微软雅黑”、“宋体”等来实现，不要切在背景中；（font-family:"Microsoft Yahei","微软雅黑";宋体） 2.对于比较重要的标题或关键字，切到背景图里后再代码中要表示出来，然后hidden的形式隐藏文字。

链接

根据需求，必须把链接加上（同风格的内页，直接刷新本页，不用打开新链接，功能型的按钮不要打开新窗口）

图片规范

分离路径

http://ossweb-img.qq.com/images/gamevip/act/文件名（a+日期+专题名称）; (因为经常和其他几个项目组的路径,请注意)
如：活动页 http://gamevip.qq.com/act/a20140609wzjz/index.html 的图片分离地址为：http://ossweb-img.qq.com/images/gamevip/act/a20140609wzjz/图片文件

图片标签

图片标签必须写上宽度、高度和alt属性，如：<img src="" width="500" height="200" alt="活动奖品建筑排程卡"/>

图片质量

图片体积不能超过120K，图片格式包括.jpg/.png；jpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%

切图规范

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

jQuery js 路径

高版本：
<script type="text/javascript" src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>

低版本：
<script type="text/javascript" src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.min.js"></script>

注释规范

采用“S（start）和E(end)”这种形式：html代码
<script src="http://gamevip.qq.com/js/act_module/top_int_nobtn_v2.js" type="text/javascript"></script>

提交方式

打包提交

提供相应的js、css、html、设计稿的jpg文件。
页面通过审核给到我方时，必须包括分立前和分离后的html和css文件，请用两个文件夹分别存放，并且命名为“分离前”和“分离后”。

审核规范

浏览器兼容性测试

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

显示器分辨率测试

1024x768、1400x900

可读性测试

1、在屏蔽js、css后，页面要任然具有良好的可读性。
2、表现与结构分离，代码中不要涉及表现元素，如：style、font、bgColor、border等。
3、选用恬当的元素，标题使用h1~h6，h1为网页一级标题，一个页面中只出现一次；
4、分大块使用div，段落使用p。数据列表使用table/ul/ol/dd等，关键字使用strong
5、关于抽奖模块：一般的九宫格图片跟文字要单独切出来，可配置。同时要切一张整图，可参照下面demo。

样式作用域

1、除了reset样式，不要全局设置标签的属性，如：img设置为block
2、模块统一前缀，如：
.m-lottery .list{..}
.m-lottery .item{..}
.m-lottery .item .title{..}
.m-lottery .m-lottery-flash{..}

其他要点(重要)

1、全局定义中设置了img为block属性，导致头部的蓝钻图片换行；
2、统一使用页面模板，代码见底下页面模板说明；
3、不能将主体区域的宽度设置超过1000px，会出现滚动条，调用蓝钻通用弹框的时候会出现问题；
5、body{position :relative} 导致开通蓝钻弹框在ie6下出现问题，不要设置body的该属性；
6、专题命名和分离地址。

header条

头部已经封装好在js里，只需要引用该js就行了。（一般采用后加载的方式）；
<script src="http://gamevip.qq.com/js/act_module/top_int_nobtn_v2.js" type="text/javascript"></script>

footer条

通用footer有2个，第一个为白色版本，第二个为黑色版本，请根据页面的具体情况选择。

<script src="http://qqgame.qq.com/public/footer/footer_lz.js?c=b" id="lib_js_footer"></script>

登陆模块

依赖的js：http://gamevip.qq.com/js/act_module/top_int_nobtn_v2.js（公共头部js）

视频播放

1、两种常用方式：自动播放视频、点击弹框播放视频；
2、新增直播视频调用方式；

DEMO地址：
视频播放组件

查看源码

通用统计+点击统计代码

统一放在body最底下，页面的点击需要加上点击统计，规范见下面代码

抽奖（九宫格+转盘+老虎机+翻牌）

新增加了翻牌效果的抽奖类型

DEMO地址：
九宫格
 圆形转盘
 老虎机翻牌组件

获奖轮播

几点注意事项

1、用ul,li的表现形式
2、每个li只能包括一条获奖记录
3、获奖的QQ号码和礼包名称必须单独用标签包裹。并且不同长度的礼包长度做到自适应（排版勿乱）
4、ul的外层需要有一个div包裹轮播区域，并设置高度后隐藏（不能直接用ul设置高度后隐藏）