心悦俱乐部

the users of this guideline

the admins of this guideline

1. 使用html5的doctype

2.页面编码使用gbk

3. 文件名（.html 或.shtml）

当页面需要用到include文件时，文件名后缀必须是.shtml

4. 当需求中包含多个页面，且页面之间有公共部分，需要独立出来用include的方式插入

（例：导航，视频列表，右侧栏等）

1. pc端页面中文字体默认使用 Microsoft YaHei

2. 移动端中文字体默认使用STHeiTi

3. 样式文件合理使用注释，模块间注释及页面间的注释

（/*素材*/   或   /*轮播图*/）

4. 移动端样式精简版

body,ul,li,dl,dt,dd,p,div{margin:0;padding:0; font-family:STHeiTi, Arial, sans-serif,"Droid Sans Fallback";} ol,ul{list-style:none;} a{text-decoration:none;} img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; padding:0; margin:0}; table{border-collapse:collapse;border-spacing:0} a{ text-decoration:none;outline:none;} .clear { clear:both; height:0; line-height:0; font-size:0} .hidden { display:none} .blk{display:block} .fl{float:left;} img{display:block} body { background:#fff; font-size:14px} table{border-collapse:collapse;border-spacing:0} .clearfix:after{clear:both; height:0; line-height:0; font-size:0;} .anim-none{-webkit-transition: 0ms; transition: 0ms;} .col-left{float:left;} .col-right{float:right;}

5. 响应式className = widthSize1000

6. 全局样式文件basic.css 包含重置样式、vip icon、头部top条、登录、头部导航条、底部、弹框，所有页面必须引用，除非特殊需要，页面不需要再单独定义字体样式

图片格式：图片采用jpg/png ，平衡图片质量与文件大小，适当运用 css sprite 理念合并修饰类图片

不过分损失质量情况下尽量减小页面下载数据量。 图片单张体积不能超过150K，jpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%

1. 头部inc文件引用

2. 心悦底部文件引用

3. 

rightbar文件包含二维码、绑定手机、修改手机等弹窗以及官网页面需要引用的js文件（大家不必再单独引用下类js文件）

4. 官网响应式

官网页面需要同时适应1200以上和1000以下屏幕分辨率，目前只适应了以下公共模块（basic.css）

公共js文件common.js已经对屏幕分辨率做了判断

大家只需要在自己的独立页面上添加1000分辨率下其余样式即可。

5. 所有页面都需要添加统计代码，需要在前添加

if(typeof(pgvMain) == 'function') pgvMain();

1. PC top通栏

    引用js：

    引用css：

      (页面不需要再单独定义字体样式，除非有特殊展示需求)

2.PC bottom通底

    引用js：

3.移动端 TOP通顶

    引用js：

4. 点击流统计需同时加上这两行代码

         if(typeof(pgvMain) == 'function') pgvMain();

5. 带登录功能的活动页面，需加上下述代码

     页面头部带登录功能

    comm.load();

    页面中间带登录模块

     //登录

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号         });     }); });

http://xinyue.qq.com/web201410/webgame.shtml?ADTAG=gw.home.gamezone.webgame

http://xinyue.qq.com/web201410/newgame.shtml?ADTAG=gw.home.gamezone.newgame

http://xinyue.qq.com/web201410/mobgame.shtml

轮播图、模块间间距、登录统一

所有页面都需要添加统计代码，需要在前添加

if(typeof(pgvMain) == 'function') pgvMain();

1. 指定按钮统计规范 - hottag

官网基础页面命名规则：

onclick="pgvSendClick({hottag:'gw.全局模块.按钮名'});"

(例：onclick="pgvSendClick({hottag:'gw.nav.home'});"）

或

onclick="pgvSendClick({hottag:'gw.页面.区域.按钮名'});"

(例：onclick="pgvSendClick({hottag:'gw.home.news.按钮名'});"）

活动页面命名规则：

onclick="pgvSendClick({hottag:'act.页面名.区域.按钮名'});"

2. 页面来源统计 - adtag

1. 官网

官网页面统一放在http://xinyue.qq.com/web201410/ 路径下

图片统一放在 http://ossweb-img.qq.com/images/tgclub/web201410/模块名/   路径下,例如http://ossweb-img.qq.com/images/tgclub/web201410/webgame/

样式文件统一放在 http://xinyue.qq.com/web201410/css/ 路径下，样式文件和页面文件同名

2. 微官网

页面统一放在 http://xinyue.qq.com/m3.0/   下 

3. 游戏专区

游戏专区例如新游页游专区的页面、样式、图片存放路径和官网一致

4. 活动专题

页面统一放在http://xinyue.qq.com/act/专题目录名 下，专题目录名以a+日期+专题英文或拼音简写 (例如：a20090817avatar，统一使用小写字母)，文件名禁止以数字开头

官网页面：

心悦俱乐部 - 腾讯游戏

活动专题页面：

替换成所属专题游戏的信息，例如

最萌伙伴来袭-剑灵官方网站-腾讯游戏

1. 模版文件代码示例：

$sTitle.DATA$

$sSubContent.DATA$

                    发表:$dtReleaseTime.DATA$                 

2. 页面代码示例：

$(".warpper").delegate('.page', 'click', function(){     var _this = this;     $.get("http://xinyue.qq.com"+$(this).attr("data-url"),function(req) {         $(_this.parentNode.parentNode).replaceWith(req)     }); })​

问题：

手指长时间摁住H5页面，会出现游戏或者是native应用闪退现象。

解决方案：

.line_clamp {             line-height: 20px;             word-break: break-all;             text-overflow: ellipsis;             display: -webkit-box;             -webkit-line-clamp: 2;             -webkit-box-orient: vertical;             overflow: hidden;             width:200px;             }

1. 页面html代码：

攻略公里

攻略公里

2. 页面js代码：

loadScript("http://game.qq.com/time/qqadv/Info_new_14541.js", function (){     var ADarr = {"ob1":[         {"aUrl":oDaTaNew14541.pos12246[1],"imgName":decodeURIComponent(oDaTaNew14541.pos12246[0]),"imgSrc":oDaTaNew14541.pos12246[2]},         {"aUrl":oDaTaNew14541.pos12247[1],"imgName":decodeURIComponent(oDaTaNew14541.pos12247[0]),"imgSrc":oDaTaNew14541.pos12247[2]}     ] }         var obj = eval(ADarr);           var site = obj.ob1;         $(".con li").each(function(i){             $(this).find("a").eq(0).attr("href",site[i].aUrl);             $(this).find("p").eq(0).html(site[i].imgName);             $(this).find("img").eq(0).attr("src","http://ossweb-img.qq.com/upload/adw/"+site[i].imgSrc);}         ) }) function loadScript(url, callback) {     var script = document.createElement('script');     script.type = "text/javascript";     if (script.readyState) {         script.onreadystatechange = function() {             if (script.readyState == "loaded" || script.readyState == "complete") {                 script.onreadystatechange = null;                 if (callback) {                     callback()                 }             }         }     } else {         script.onload = function() {             if (callback) {                 callback()  }         }     }     script.src = url;     document.body.appendChild(script) };

$(function(){     window.tab1 = new mo.Slide({         target: $('#slide01 .con li'),         wrapWidth: '300%',         autoPlay: 0     }); });

content 参数：

微信浏览器高度为  960-状态条与浏览器的头部 = 832

但为了考虑到iphone5的尺寸，页面高度设计需考虑到1008尺寸的视觉呈现