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