剑灵剑灵专题页面制作规范

专题命名及目录规范

统一上传到蜘蛛:zz.ied.com
bns.qq.com/cp/axxxx(年)xx(月)xx(日)xx(专题名字)/
专题目录: bns/cp/a20161201threeyear/
  1. index.htm
  2. css/(如果需要的话,建立此文件夹。否则直接写在页面中)
  3. js/(如果需要的话,建立此文件夹。否则直接写在页面中)
图片目录: //game.gtimg.cn/images/bns/cp/a20161201threeyear/

如果此活动下还有手机端页面:
  1. m.htm
  2. css/(如果需要的话,建立此文件夹。否则直接写在页面中)
  3. js/(如果需要的话,建立此文件夹。否则直接写在页面中)
图片目录: //game.gtimg.cn/images/bns/cp/a20161201threeyear/m/

并修改PTT相对应的参数为:m 、首页h5

页面中的资源统一去掉协议名如下

图片
background:url(//game.gtimg.cn/images/bns/cp/a20161201threeyear/bg.jpg);
<img src="//game.gtimg.cn/images/bns/cp/a20161201threeyear/bg.jpg" alt="">
css外链:
<link rel="stylesheet" href="css/style.css">
js外链:
<script src="js/index.js"></script>

页面中的引用的js库查看是否支持https协议

如若不支持请慎用

页面点击流

查看如何使用

页面头部、底部

查看如何使用

剑灵二级顶部导航栏

查看如何使用

带获奖记录的导航

HTML:

<!--[if lt IE 8]><p class="browser-tips">您的浏览器版本过低,请升级浏览器获得更好的体验<p><![endif]-->
<!--Global topbar-->
<h1>
  <a href="//bns.qq.com" target="_blank" class="logo ti pa spr" id="logo" title="点击打开剑灵官方网站">剑灵官方网站</a>
</h1>
<div class="topbar spr" id="topbar">
  <ul class="topnav">
    <li class="spr lborder"><a target="_blank" href="//bns.qq.com">进入官网</a></li>
    <li class="spr"><a target="_blank" href="//lz.bns.qq.com">灵值中心</a></li>
    <li class="spr"><a target="_blank" href="//e.t.qq.com/bns">官方微博</a></li>
    <li class="rborder c1">微信号:<em class="wechat">LOVEBNS</em></li>
  </ul>
  <div class="login" id="unlogin">
    <a class="login-btn pr spr" href="javascript:;" id="dologin">登录
      <span class="icon-user spr pa"></span>
    </a>
  </div>
  <div class="login" id="logined" style="display:none;">
    <a class="login-btn logout pr spr" href="javascript:;" id="dologout">注销
      <span class="icon-out spr pa"></span>
    </a>
    <p class="login-text pr">
      <span class="icon-user spr pa"></span>
      <span id="login_qq_span">-</span>,欢迎您!
      <span id="spanNotBind">
        <a href="javascript:;">绑定大区</a>
      </span>
      <span id="spanBind" style="display:none">
        <span id="area_info"></span>
        <span id="role_info"></span>
        <a href="javascript:;">更改绑定</a>
      </span>
      <span>
        <a href="javascript:TGDialogS('popupRecord');">领奖记录</a>
      </span>
    </p>
  </div>
</div>
<!--Global topbar-->
<!-- lottery -->
<div class="popup" id="popupRecord">
  <a href="javascript:void(0);" onclick="closeDialog();" class="popup-close">&times;</a>
  <h3 class="popup-hd">获奖记录</h3>
  <div class="popup-bd">
    <h4 class="popup-tip-hd">温馨提示</h4>
    <p class="popup-tip-para">虚拟道具奖品在24小时内发送到您的游戏内仓库,请耐心等候,谢谢你的理解和支持</p>
    <table class="popup-list">
      <thead>
        <tr><th>获奖时间</th><th>获奖大区</th><th>所获奖品</th></tr>
      </thead>
      <tbody>
        <tr><td>2016.11.27</td><td>一叶知秋</td><td>洪门神快速成长护符</td></tr>
        <tr><td>2016.11.27</td><td>一叶知秋</td><td>洪门神快速成长护符</td></tr>
        <tr><td>2016.11.27</td><td>一叶知秋</td><td>洪门神快速成长护符</td></tr>
        <tr><td>2016.11.27</td><td>一叶知秋</td><td>洪门神快速成长护符</td></tr>
        <tr><td>2016.11.27</td><td>一叶知秋</td><td>洪门神快速成长护符</td></tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <a href="javascript:void(0);">上一页</a>
            <span><span class="cur">4</span>/10</span>
            <a href="javascript:void(0);">下一页</a>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
CSS:

/*reset css*/
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}
body,button,input,select,textarea{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\9ed1\4f53',tahoma,'\5b8b\4f53';}
body{min-width: 1100px;padding-top:42px;_width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1102?'1100px':'');}
a{text-decoration:none;outline: none;}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,th,var,em,i{font-style:normal;font-weight:normal}
b,strong{font-weight:bold;}
caption,th{text-align:left}
abbr,acronym{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input{background:none;border:none;outline:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
ol,ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
iframe{position:absolute;}
.hide{display:none;}
.ti{text-indent:100%;white-space: nowrap;overflow: hidden;}
.pr{position:relative;}
.pa{position:absolute;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{display:block;visibility: hidden;font-size:0px;content: "";clear: both;height: 0;}
.clearfix{zoom:1;}
.wm{width:1000px;margin:0 auto;}
.browser-tips{background: #000;color: #f00;padding: 10px 0;text-align: center;width: 100%;font-size: 14px;}
.browser-tips a{color:#f00;}
/*Global topbar for bns*/
.spr{background: url(//ossweb-img.qq.com/images/bns/act/a20131030repair/spr24.png) no-repeat;_background: url(//ossweb-img.qq.com/images/bns/act/a20131030repair/spr8.png) no-repeat;}
.logo{height: 104px;width: 150px;top: 42px;left: 0;z-index: 10;}
.topbar{width: 100%;height: 48px;background-repeat: repeat-x;background-position: 0 -104px;overflow: hidden;}
.topnav{float: left;height: 30px;padding: 10px 0 0 130px;}
.topnav li{float: left;height: 30px;padding: 0 10px;line-height: 27px;background-position: -82px -154px;color: #FFF;}
.topnav a{display: inline-block;zoom: 1;}
.topnav .wechat{font-family: '\5b8b\4f53', tahoma;font-size: 12px;color: #fff;}
.login{float: right;padding: 8px 25px 0 0;}
.login-btn{float: right;background-position: 0 -218px;width: 92px;height: 32px;padding-right: 15px;line-height: 30px;text-align: center;}
.login-btn:hover{color:#E82E0F;}
.logout{background-position: 0 -218px;width: 87px;padding-right: 20px;}
.login-text{float: right;color: #fff;font-family: '\5b8b\4f53', tahoma;font-size: 12px;padding: 8px 10px 0 14px;}
.icon-user{background-position: 0 -154px;width: 9px;height: 13px;overflow: hidden;left: 70px;top: 9px;}
.login-text .icon-user{left: 0;top: 9px;}
.icon-out{background-position: -10px -159px;width: 11px;height: 8px;overflow: hidden;left: 60px;top: 11px;}
.topnav li.rborder,.topnav li.rborder .wechat{color: #5b834e;}
.topnav li a{color: #fff;}
.topnav li a:hover{color:#E82E0F;}
.login a{color: #5b834e;}
/* lottery++ */
.popup{display:none;background-color:#fff;width:640px;height:420px;overflow:hidden;position:fixed;z-index:10000;top:50%;left:50%;margin:-210px 0 0 -315px;color:#333;}
.popup-close{position:absolute;right:0;top:0;background-color:#aa0006;color:#fff;font-size:50px;width:60px;height:60px;line-height:54px;text-align:center;}
.popup-hd{font-weight:bold;font-size:24px;color:#c50000;padding:30px 0 10px;text-align:center;}
.popup-bd{padding:10px 50px;}
.popup-tip-hd {font-weight:bold;font-size:18px;padding:5px 0;}
.popup-list{padding:20px 0;width:100%;}
.popup-list th{font-weight:bold;font-size:16px;padding:10px 0;text-align:left;}
.popup-list th,
.popup-list tbody td{width:180px;}
.popup-list tbody td{padding:5px 0;border-bottom:1px dotted #bbb}
.popup-list tfoot td{text-align:center;padding:20px 0;}
.popup-list tfoot a{margin:0 20px;color:#333;}
.popup-list tfoot .cur,.popup-list tfoot a:hover{color:#c50000;}
Javascript:
NEW:新增了关于延长账号cookie时间的函数delayCookie(),检查登录态模块checkLogin()函数里 (登陆成功) 需要添加
执行delayCookie函数。
<script src="//ossweb-img.qq.com/images/bns/title/bns.js"></script> <script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script> <script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script> <script> //handleCookie var cookieUin; function delayCookie(){ cookieUin = milo.cookie.get('uin',''); if(cookieUin){ milo.cookie.set('uin',cookieUin,365*24*60*60,'qq.com','/',false); milo.cookie.set('uin_cookie',cookieUin,365*24*60*60,'qq.com','/',false); milo.cookie.set('ied_qq',cookieUin,365*24*60*60,'qq.com','/',false); } } //login <mark>milo.addEvent(g("dologin"), "click", function() {</mark> need("biz.login",function(LoginManager){ LoginManager.init({ needReloadPage:true }); LoginManager.login(); }); return false; }); milo.addEvent(g("dologout"), "click", function() { need("biz.login",function(LoginManager){ LoginManager.logout(); }); return false; }); milo.ready(function() { need("biz.login",function(LoginManager){ LoginManager.checkLogin(function(){ g("login_qq_span").innerHTML = LoginManager.getUserUin();//获取QQ号 //获取微信号class="wxhide" if(LoginManager.getUserUin() == '' || LoginManager.getUserUin() == undefined) { alert("端游的活动需要用QQ登录才可以参与哦"); return ; } delayCookie(); },function(){ LoginManager.login(); }); }); }); // Dialog function TGDialogS(e){ need("biz.dialog",function(Dialog){ Dialog.show({ id:e, bgcolor:'#000', //弹出“遮罩”的颜色,格式为"#FF6600",可修改,默认为"#fff" opacity:70 //弹出“遮罩”的透明度,格式为{10-100},可选 }); }); } function closeDialog(){ need("biz.dialog",function(Dialog){ Dialog.hide(); }); } </script>

活动若要求内嵌在游戏中则alert()弹框信息要自定义如下(选择性了解)

js文件
<script src="//bns.qq.com/comm/js/realert.js"></script>
调用方法
reAlert(e,callback);
reConfirm(msg,yesCallBack,noCallBack);