(小安娜：失踪人口已上线，大家快来喷喷喷他！)，sorry++，最近身边发生太多事情，导致这最关键的实战开篇都未写，（小安娜-分身1：懒就是懒，不负责任，我之前学的都忘了），(小安娜-分身2：上一篇双11发完就消失了，不会是兼职送快递去了吧)，(小安娜-分身3：退订差评，再也不跟你学了)…，好了好了，有事回了趟老家才回来，不说这个，咋们继续小程序开发。（小安娜：是回去相亲了吧！）

效果图（也可直接跳过）

效果图太长，影响阅读，自行戳开链接

开发前热身

打开B站移动版网站：http://m.bilibili.com/index.html，打开应该是个这样的画面，也是我们今天要完成的界面：

（小安娜：不对啊，我打开的是电脑版的），不会吧「我呆住一分钟」，哦直接打开网站会跳转到PC版本，要用手机或Chrome开发工具中的Toggle device toolbar打开才可正常访问，（小安娜：不可能用手机打开调试吧，Toggle device toolbar是什么？），Toggle device toolbar是我们开发移动网页必备工具，可以模拟各种移动设备，Chrome自带无需另外安装，整个调试界面是这样的：

（小安娜：原来如此，6个箭头成功吸引了本小姐的注意）

接着来分析下页面结构，看项目需要怎么创建模板，下图是首页和直播页对比：