版本专题内页响应式规范

Note：

页面参考：2015年3月版本专题 >下载模板文件 >

重构完成之后用chrome开发者工具测试移动版是否正常展现

文件名命名规则为：page_0*.shtml

有问题请咨询：allanglwang

css相关规范：

请按照模板文件里面的注释位置修改色值和背景图片（模板文件中包含图片源文件，请严格按照位置替换背景图片）

如果当前的内容不适合在移动端显示请加单独的类： noshow_in_mobile，如果不适合在PC端显示请加：show_in_mobile

默认引入:css/inside.css

如有模板文件不包含的页面结构请及时联系allanglwang

JS引入规范：

需要在inc/inside_comm.inc更改配置文件，默认下方的JS不做更改

/*响应式相关参数设定*/
var mVersionArg = {
    title: 'QQ飞车新版本 - 风云战绩', // 对外分享标题
    desc: 'QQ飞车新版本 - 风云战绩', // 对外分享描述
    imgUrl: 'http://ossweb-img.qq.com/images/speed/act/a20141217v/img/con_bg.jpg', // 分享图标尺寸为：120x120
    ping:'a20150311v',//点击流上报，一般为当前版本专题文件夹名（重要）
    actUrl:'http://speed.qq.com/act/a20150311v/'//网址（重要）

}

下方为结构规范 (也可从模板文件中复制更改)

内页结构嵌套规范 其中具体内容请替换为当前版本的内容：
<div id="wrapper" style="visibility:hidden">
   <div class="inside_header">
      <!--导航Start-->
      <div class="nav_box inside_nav_box">
          <div class="nav_box_wp">
             <ul>
              <li class="in_00 show_in_mobile"><a href="index.shtml" title="首页">首页</a></li>
              <li class="in_03 cur"><a href="page_01.shtml" title="极速穿梭">极速穿梭</a></li>
              <li class="in_02 noshow_in_mobile"><a href="http://speed.qq.com/act/a20141218jscy/index.shtml" target="_blank" title="版本活动">版本活动</a></li>
              <li class="in_01 noshow_in_mobile"><a href="http://speed.qq.com/act/a20141219xjcy/" target="_blank" title="星际穿越">星际穿越</a></li>
              <li class="in_04 noshow_in_mobile"><a href="http://speed.qq.com/act/a12141212zjlzjsfyr/" target="_blank" title="最爱周杰伦">最爱周杰伦</a></li>
              <li class="in_05"><a href="page_05.shtml" title="新赛道">新赛道</a></li>
              <li class="in_06"><a href="page_06.shtml" title="极品道具">极品道具</a></li>
              <li class="in_07"><a href="page_07.shtml" title="新品展示">新品展示</a></li>
             </ul>
          </div> 
        </div>
        <!--导航END-->
   </div><!--头部END-->
   <!--主要内容Start-->
   <div class="content_wp">
     <div class="inside_con_box">
      <!--这里是主要内容-->
     </div>
   </div>
   <!--主要内容END-->
选项卡实例化方法： 新地图选项卡、页面内容选项卡一致
//Tab切换   arg1:UL选项卡  arg2:选项卡对应的BOX  arg3:Tab当前类名
cTab('.tab_title','.tc_box','cur');
一级标题：

01急速穿梭

< 返回首页
二级标题：

玩法入口

二项选项卡：
  • 主题穿梭
  • 随机穿梭
1
三项选项卡：
  • 快速进入
  • 创建房间
  • 小橘子桌面
1
四项选项卡：
  • 赛车
  • 双人座椅
  • 极品宠物
  • 魔法套装
1
小二项选项卡：
  • 新赛车
  • 新滑轮
1
地图选项卡：
  • 1
  • 1
美洲大峡谷
新音乐列表：

单人舞

  • Counting Stars - OneRepublic

    Counting Stars - OneRepublic

  • I will - Chelsy

    I will - Chelsy

  • ideal white - 綾野ましろ

    ideal white - 綾野ましろ

  • Never Be the Same - 艾怡良

    Never Be the Same - 艾怡良

  • Play 我呸 - 蔡依林

    Play 我呸 - 蔡依林

  • Warriors - Imagine Dragons

    Warriors - Imagine Dragons

  • Zero-G - 岚

    Zero-G - 岚

  • 浪漫来袭 - 萧亚轩

    浪漫来袭 - 萧亚轩

  • 鸭梨大 - 至上励合

    鸭梨大 - 至上励合

双人舞

  • All About You - Hilary Duff

    All About You - Hilary Duff

  • Animals - Maroon 5

    Animals - Maroon 5

  • This Is How We Do - Katy Perry

    This Is How We Do - Katy Perry

  • 不眠之夜 - Crush

    不眠之夜 - Crush

  • 萌萌哒 - 童可可

    萌萌哒 - 童可可

  • 我们相爱吧 - 李圣杰

    我们相爱吧 - 李圣杰

  • 幼稚園の先生 - AKB Team Surprise

    幼稚園の先生 - AKB Team Surprise

  • 越难越爱 - 吴若希

    越难越爱 - 吴若希

  • 这样的世界,我不想知道 - 沢井美空

    这样的世界,我不想知道 - 沢井美空

新背景音乐

  • 帽子戏法 - 魏晨

    帽子戏法 - 魏晨

  • 星座恋人 - 徐良

    星座恋人 - 徐良

  • 女孩,站出来! - 安心亚

    女孩,站出来! - 安心亚

带序号的列表：
  1. 1

    带序号的列表

  2. 2带序号的列表
带点符号的列表：
直接嵌入的图片规范（懒加载）：
<div class="pic_center">
<img class="lazy" src="http://ossweb-img.qq.com/images/speed/act/a20141217v/img/loadpic.png" 
data-original="http://ossweb-img.qq.com/images/speed/act/a20141217v/images/01/05.jpg" alt="单局新内容">
</div>     
单局新内容