道聚城介绍

道聚城是腾讯游戏的官方B2C道具和周边品牌售卖平台。以互联网多终端联动的产品形态，打造游戏增值服务平台，挖掘腾讯游戏用户的潜在需求，提供优惠、特权、丰富多样化的游戏道具和周边购买服务。

注：

重构规范了解请联系：angelsli

设计规范了解请联系：williamlian

感谢中心的同事dannydai和brookeliu的大力支持和帮助！

编码规范

为了增强团队的协作、减少沟通时间，提高代码质量，提供各种logo和设计图片资源，减少开发流程中相关人员的开发时间，本文档主要存放道聚城的设计、重构等相关规范分享文档等

PC页面制作规范

序言：

1）运营活动统一使用GBK编码，特性统一使用UTF-8编码，除非是旧站点而且需要用到include顶条的用GBK(GB2312)。

2）针对IE老板本浏览器请加顶部条提示浏览器更新或使用其它浏览器的友好提示。

3）所以命名使用英文小写，词组用'-'连接，避免使用驼峰或'_'下划线等连接。

4）所有图片jpg保留60%品质的渐进式图片，如实在需要可以适当提高图片品质，单张图片建议150kb以下，png格式图片必须压缩。

5）代码要添加必要的注释，注释有意义且易懂，方便其他人员阅读和维护。

6）代码版本管理统一使用svn和线上蜘蛛。

HTML规范

编写规则

  • 遵循w3c标准，代码有良好的结构和语义；
  • 使用html5的doctype；
  • css文件请放在以css命名的文件夹下，在头部head引入防止页面加载时裸奔；
  • js文件请放在以js命名的文件夹下，在页面底部引入；
  • 图片文件请放在以ossweb-img命名的文件夹下，不要和css、js放在同一目录中；
  • 静态页面必须做详细的注释方便其他人员阅读和维护。

doctype文档类型

                    
                        <!DOCTYPE html>
                        <!--文档类型统一使用html5的doctype，切记文档类型一定不要忘记写，防止IE低版本浏览器按照其他标准来运行js文件，造成页面报错等等-->

页面编码

                    
                        <meta charset="gbk">
                        <!--注：运营活动统一使用GBK编码，特性统一使用UTF-8编码-->

页面title规则

页面类型 title
官网页面 商城名+商城solgan
专题页首页 专题名+道聚城官方网站-腾讯游戏
专题页内页 内页名+道聚城官方网站-腾讯游戏

页面title,keywords,description

相关信息请产品同学提供，如果未提供，请填写默认信息

                    
                        <title>腾讯游戏道聚城-集道具聚欢乐</title>
                        <meta name="Description" content="道具商城，腾讯游戏道聚城，提供腾讯游戏一站式购物平台，更多优惠道具购买，尽在腾讯游戏道聚城，支持Q币Q点、财付通、网银各种支付方式，提供安全交易保障，让你全面安心享受游戏购物的乐趣！" />
                        <meta name="Keywords" content="道具商城，腾讯游戏,道聚城，游戏商城，网上买，网络购物，打折，优惠，团购，拍卖,穿越火线，
                        英雄联盟，QQ飞车，QQ炫舞，地下城与勇士" />

CSS加载

css一律在head中引用，防止页面出现裸奔的情况。特性统一使用外链CSS文件方法，一般常用和复用的样式放在同一个css中，所有页面统一引入，个别页面允许单独css文件如下：

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

运营活动可允许在页面head中style内写css样式，如下：

                    
                        <style>
                        .footer_ied{min-width:1200px;background:#333;color:#757575;text-align:center;line-height:19px;font-family:Tahoma;font-size:12px}
                        .footer_ied .wrap_ied{width:1200px;margin:0 auto;padding:30px 0;background:#333;}
                        .footer_ied p.e{font-size:10px}
                        .footer_ied a{color:#757575;text-decoration:none}
                        .footer_ied a:hover{color:#fff;text-decoration:underline}
                        </style>

JS加载

Js文件一般在dom结构之后引用，特性项目中一般会引用公用头部和底部，运营活动中会引用道聚城的头部和底部。

基本字体

在IEG的代码规范中定义通用游戏官网和主题专题活动字体规定如下：

                    
                        body{min-width:1000px;font:14px/1.5 arial,"\5FAE\8F6F\96C5\9ED1",sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}

版权

版权一般在foot中定义了，所以页面只要引入foot.js和样式即可，由于历史原因，css标签的样式用了id定义。

                    
                        <style>
                        #footer_ied{min-width:1200px;background:#333;color:#757575;text-align:center;line-height:19px;font-family:Tahoma;font-size:12px}
                        #footer_ied .wrap_ied{width:1200px;margin:0 auto;padding:30px 0;background:#333;}
                        #footer_ied p.e{font-size:10px}
                        #footer_ied a{color:#757575;text-decoration:none}
                        #footer_ied a:hover{color:#fff;text-decoration:underline}
                        </style>
                    
                
                    
                        <script src="https://ossweb-img.qq.com/images/js/foot.js"></script>

IE低版本浏览器提示

为了给使用IE低版本浏览器的用户一个友好的用户体验，所以页面中提供一个顶部提示条，提示用户升级浏览器版本或者使用其它浏览器浏览页面。

                    
                        <style>
                        .chromeframe{background:#ffc225;color:#000;padding:10px 0;text-align:center;width:100%;border-bottom:1px solid #000;font-size:13px;}
                        .chromeframe a{color:#fd463a;font-weight:bold;}
                        </style>
                    
                
                    
                        <!--[if lt IE 9]>
                        <p class="chromeframe">您使用的IE浏览器版本过低，本站不再支持，<a href="//windows.microsoft.com/">升级您的IE浏览器</a>，或使用<a href="//www.google.com/chromeframe/?redirect=true">Google Chrome</a>、<a href="https://dldir1.qq.com/invc/tt/QQBrowser_Setup_QB10beta.exe">QQ浏览器</a>等高级浏览器，将会得到更好的体验！</p>
                        <![endif]-->

链接

  • 链接地址为同一个专题，或同风格页面之间的跳转，当前页打开
  • 不同产品，不同专题，不同页面风格之间跳转，新标签打开，链接添加target="_blank"
  • 链接如果是触发js函数的，禁止使用#号，而需要用javascript:void(0)代替
  • 如果链接地址暂时没有或者未发布的建议点击提示"敬请期待！"，代码统一用href="javascript:alert('敬请期待！')"的形式
  • 链接形式的按钮，为了给用户更好的体验建议至少添加hover或者active的样式反馈

标签规范提示

  • 所有的a标签，都要添加title属性值
  • 所有的img标签，都要添加alt属性值，防止图片加载不出来给用户一个友好的提示

CSS规范

文件目录规范

1、所有的css文件统一放入以css命名的文件夹中，按照功能分类：通用类和业务类，例如：

css分类目录

2、文件引入可通过外联或内联方式引入，link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。

注释规范

1、顶部注释

顶部注释是为了提供文件作用以及文件版本信息等，让使用者能快速了解文件作用。如下：

                    
                        /*
                         * @description:中文说明
                         * @author:xxxxx
                         * @update : xxxx (2018.08.02)
                         */

2、模块注释

                    
                        /** 通用底部样式模块 **/

3、单行注释与多行注释

                    
                        /*我是注释…*/

命名规范

  • 使用有意义的或通用class命名，不推荐使用id命名
  • 一律采用英文小写，词组用'-'连接，做到见名知意，简洁易懂，不建议使用太长的class名称，连接不要超过三层
  • 选择器分类可以使用特殊公用标签分类，例如：.a-，具体按个人使用喜好

css属性书写顺序

建议遵循：布局定位属性 自身属性 文本属性 其他属性 CSS3属性

css浏览器私有前缀书写格式

私有在前，标准在后。先写带有浏览器私有标志的，后写W3C标准的。

                    
                        -webkit-animation:tada .8s .2s ease;
                        -moz-animation:tada .8s .2s ease;
                        animation:tada .8s .2s ease;

代码性能优化

  • 尽量简化css书写，常用的margin、padding、border、animation等等;
  • 命名尽量简短、嵌套不要超过三层
  • 用16进制表示颜色时，尽量简化，比如#ffffff可以简化#fff
  • 没有边框，不要写border：0，应该写border：none
  • 布局方便尽量避免使用绝对定位和相对定位这种脱离文档流的布局
  • 相同的模块的样式尽量复用，避免冗余的代码

Hack注意事项

  • 根据市场统计我们所有pc页面现在对于IE8以下不再去花时间支持，页面加入友好的提示用户升级浏览器等去访问页面，如有特殊情况，参考IEG的规范来进行hack代码书写！
                    
                        .element{
                            color:#000;             /*w3c标准*/
                            [;color:#f00;];         /*Webkit(chrome和safari)*/
                            color:#666\9;           /*IE8*/
                            *color:#999;            /*IE7*/
                            _color:#333;            /*IE6*/
                        }
                        :root .element{color:#0f0\9;}  /*IE9*/
                        @media all and (-webkit-min-device-pixel-ratio:10000), not all and (
                        -webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
                        @-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

图片规范

运营类活动图片统一放在ossweb-img文件夹中，特性活动中图片可放在images命名的文件夹中

图片格式/大小

  • 图片格式：图片允许采用jpg/png，平衡图片质量与文件大小，适当运用css sprite理念合并修饰类图片，不过分损失质量情况下尽量减小页面下载数据量。
  • 背景图过大，建议切成多张小图加载。
  • 图片单张体积不能超过150K，jpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%，推荐选择“连续”而非“优化”，这样页面在加载时会从模糊状态变清晰，否则会自上而下一帧一帧加载，影响页面布局，体验很不好。png格式图片必须压缩。

图片命名

  • 图片命名以有含义的英文或拼音命名，一律采用小写。
  • 使用间隔符-进行连接，背景图bg-开头，按钮已btn-开头、图标已icon-开头、聚合图以spr-开头等，名字尽量短

注意事项

  • 图片路径需要使用绝对路径方式(运营类活动必须绝对路径);
  • 使用css sprite技术合并小的背景图片，尽可能减少页面http的请求数。
  • 能用CSS样式实现的尽量使用背景图。

JS规范

相关JS规范请参考https://tguide.qq.com/main/base.htm#js-title

SEO规范

  • 页面的title值，一般为2到3个，例如：腾讯游戏道聚城-集道具聚欢乐、道聚城2018CJ季-道聚城官方网站-腾讯游戏等；
  • a标签加上title值、所有img图片必须添加alt属性；
  • 根据超链接SEO权重优先级选用链接。链接SEO权重：域名>目录>文件 如：https://act.daoju.qq.com/act/a20180801djccj/index.html 改成https://act.daoju.qq.com/act/a20180801djccj/;
  • h1 h2 h3 标签用在页面最重要的关键词上；
  • flash尽量少用；

设计稿高保真规范

基本原则

  • 页面没有样式错误、脚本错误、标签未闭合等等；
  • 页面切图未出现明显的像素缺失；
  • 页面元素宽、高、内外间距要与设计稿保持一致；
  • css样式与html结构分离，禁止在html标签中写样式；
  • 文字大小、粗细与设计稿保持一致，如有特殊字体可切图否则禁止把文字切在图片中；
  • 所有小图标要合并雪碧图；

浏览器兼容性

  • 兼容chrome、QQ、safari、Firefox等以及IE8以上浏览器。

屏幕适配

  • 需兼容的屏幕分辨率包括：1366X768、1440x900、1680x1050、1920x1080

注意事项

  • 拖大和缩小窗口，页面布局不会发生错位;
  • flash在浏览器缩放情况下，能居中显示;
  • 其中有些样式例如圆角、阴影对于IE9、IE0不支持的情况可采取优雅降级;
  • 大屏浏览器中整体页面内容要水平居中。

交互规范

  • 所有连接和按钮都要有hover前后交互状态。
  • 文字链接必须有hover时交互状态，若设计稿无提供，给文字链接hover状态添加下划线示意。
  • 同一个专题，或同风格页面之间的跳转，当前页打开。
  • 不同产品，不同专题，不同页面风格之间跳转，可新窗口打开。
  • 信息提示尽量避免alert系统弹层。