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

专题命名及目录规范

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

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

图片
background-image: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="/cp/a20161201threeyear/css/main.css">
js外链:
<script src="/cp/a20161201threeyear/js/index.js"></script>

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

如若不支持请慎用

页面点击流

查看如何使用

页面头部、底部

查看如何使用

剑灵二级顶部导航栏

查看如何使用

带获奖记录的导航

HTML:

<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="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">925436853</span>,欢迎您!

      <!-- 如果有绑定大区、获奖记录则要添加下面的dom结构,没有的话直接删掉 -->
      <span id="spanNotBind"><a href="#">绑定大区</a></span>
      <span id="spanBinded" style="display:none">
        <span id="areaInfo">烈沙地带(与铁傀王互通) 葡萄籽</span>
        <span id="roleInfo">xx角色名字</span>
        <a href="#">更改绑定</a>
      </span>
      <span id="spanRecord"><a href="javascript:void(0);">获奖记录</a></span>
      <!-- 绑定大区、获奖记录end -->

    </p>
  </div>
</div>
<!-- 如果有获奖记录则要添加下面的弹层结构,没有的话直接删掉 -->
<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*/
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
.yh{font-family:"\5fae\8f6f\96c5\9ed1",arial,"\5b8b\4f53"}
a{text-decoration:none}
a:hover{text-decoration:none}
img{border:0; vertical-align:top;}
td,th,ul,ol{padding:0}
ul,li{list-style:none; }
.clearfix:after { display:block; visibility:hidden; height:0; content:'.'; clear:both; }
.clearfix { zoom:1; }
.hide{display:none;}

/* topbar */
.pr{position:relative;}
.pa{position:absolute;}
.ti{text-indent:-999em;}
.hid{display:none;}
.spr{background:url(//ossweb-img.qq.com/images/bns/act/a20131030repair/spr24.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:'宋体',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;}
.logout{background-position:0 -218px;width:87px;padding-right:20px;}
.login-text{float:right;color:#fff;font-family:'宋体',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;}
.login a{ color:#5b834e;}
body{padding-top:42px;min-width:1000px; font: 12px/150% 'microsoft yahei',tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif; color:#333; background:#fff;}

/* 如果有获奖记录,则增加弹层样式,没有则删掉 */
.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:

  <script src="//ossweb-img.qq.com/images/js/milo/milo.js"></script>
  <script>
  // 登录
  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号
      });
    });
  });
// 弹窗
function TGDialogS(e){
  need("biz.dialog-min",function(Dialog){
    Dialog.show({
      id:e,
      bgcolor:'#000', //弹出“遮罩”的颜色,格式为"#FF6600",可修改,默认为"#fff"
      opacity:50      //弹出“遮罩”的透明度,格式为{10-100},可选
    });
  });
}
function closeDialog(){
  need("biz.dialog-min",function(Dialog){
    Dialog.hide();
  });
}

</script>