专题创建

专题命名:专题文件夹的命名为:a+年月日+专题英文或拼音小写简写,如:a20200320lol

文件命名:html首页文件必须命名为”index”,文件名禁止特殊字符。统一使用英文小写

通用头尾部:公共头部组件JS,

<script src=”//cdn.tgp.qq.com/wegame/header/js/init.js”>


公共尾部组件JS,

<script src=”//game.gtimg.cn/images/js/2018foot/foot.js”>



Meta使用:统一使用运营活动Meta,注意区分PC和H5端,如:

<meta charset="gbk" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />

Html协议

http协议:引用http或https地址时,需要补全http协议信息,如:

<style>
//CSS背景图片 
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

TDK

页面标题:页面名称-产品中文全称-WeGame,如:

<title>WeGame游戏商店 - 发现更大的游戏世界</title>



页面关键字:为产品名、专题名、专题相关名,之间用英文半角逗号隔开,如:

<meta name="keywords" content="WeGame,游戏商店,WeGame平台,游戏发行,游戏平台,游戏评测,单机游戏,游戏购买,游戏下载,腾讯游戏平台,游戏助手,游戏加速,LOL助手,LOL官方盒子,CF助手,DNF助手,免费网络加速">



页面描述:不超过120字,描述内容要和页面内容相关,如:

<meta name="description" content="WeGame游戏商店,致力于发现全球好游戏,提供游戏资讯、购买、下载、助手、直播和社区等一站式游戏服务,满足优质汉化、社交互动、稳定国服等更贴心的本地化需求,同时连接全球开发者与游戏玩家,构筑玩家与开发者的沟通桥梁。">


CSS

样式命名:使用标准、通用的英文单词进行命名,全部使用小写,遵循BEM规则,如:

.wrap{}                    //外层容器
.mod-box{}                 //模块容器
.btn-start{}               //开始按钮
.btn-download-ios          //IOS下载按钮
.btn-download-andriod      //安卓下载按钮
.btn-head-nav1             //头部导航链接按钮
.btn-news-more             //更多新闻按钮
.btn-play                  //播放视频按钮
.side-nav{}                //侧栏导航

选择器层级:禁止使用层级过深的选择器,最多3级,如:

正确示范:

.hot-game .hot-game-user-name{}

错误示范:

.page-lol .hot-game .hot-game-hd .hot-game-user-box .hot-game-user-name{}



使用Class进行定义:除非有特定的功能、组件要求等,禁止使用id来定义元素样式

禁止对纯元素选择器设置特定样式:错误示范:

a{background: url("xxx");}