(小安娜：失蹤人口已上線，大家快來噴噴噴他！)，sorry++，最近身邊發(fā)生太多事情，導(dǎo)致這最關(guān)鍵的實(shí)戰(zhàn)開篇都未寫，（小安娜-分身1：懶就是懶，不負(fù)責(zé)任，我之前學(xué)的都忘了），(小安娜-分身2：上一篇雙11發(fā)完就消失了，不會(huì)是兼職送快遞去了吧)，(小安娜-分身3：退訂差評(píng)，再也不跟你學(xué)了)…，好了好了，有事回了趟老家才回來，不說這個(gè)，咋們繼續(xù)小程序開發(fā)。（小安娜：是回去相親了吧！）
效果圖（也可直接跳過）
開發(fā)前熱身
打開B站移動(dòng)版網(wǎng)站：http://m.bilibili.com/index.html，打開應(yīng)該是個(gè)這樣的畫面，也是我們今天要完成的界面：
（小安娜：不對(duì)啊，我打開的是電腦版的），不會(huì)吧「我呆住一分鐘」，哦直接打開網(wǎng)站會(huì)跳轉(zhuǎn)到PC版本，要用手機(jī)或Chrome開發(fā)工具中的Toggle device toolbar打開才可正常訪問，（小安娜：不可能用手機(jī)打開調(diào)試吧，Toggle device toolbar是什么？），Toggle device toolbar是我們開發(fā)移動(dòng)網(wǎng)頁必備工具，可以模擬各種移動(dòng)設(shè)備，Chrome自帶無需另外安裝，整個(gè)調(diào)試界面是這樣的：