(小安娜：失蹤人口已上線，大家快來噴噴噴他！)，sorry++，最近身邊發(fā)生太多事情，導(dǎo)致這最關(guān)鍵的實(shí)戰(zhàn)開篇都未寫，（小安娜-分身1：懶就是懶，不負(fù)責(zé)任，我之前學(xué)的都忘了），(小安娜-分身2：上一篇雙11發(fā)完就消失了，不會是兼職送快遞去了吧)，(小安娜-分身3：退訂差評，再也不跟你學(xué)了)…，好了好了，有事回了趟老家才回來，不說這個，咋們繼續(xù)小程序開發(fā)。（小安娜：是回去相親了吧?。?/span>

效果圖（也可直接跳過）

效果圖太長，影響閱讀，自行戳開鏈接

開發(fā)前熱身

打開B站移動版網(wǎng)站：http://m.bilibili.com/index.html，打開應(yīng)該是個這樣的畫面，也是我們今天要完成的界面：

（小安娜：不對啊，我打開的是電腦版的），不會吧「我呆住一分鐘」，哦直接打開網(wǎng)站會跳轉(zhuǎn)到PC版本，要用手機(jī)或Chrome開發(fā)工具中的Toggle device toolbar打開才可正常訪問，（小安娜：不可能用手機(jī)打開調(diào)試吧，Toggle device toolbar是什么？），Toggle device toolbar是我們開發(fā)移動網(wǎng)頁必備工具，可以模擬各種移動設(shè)備，Chrome自帶無需另外安裝，整個調(diào)試界面是這樣的：

（小安娜：原來如此，6個箭頭成功吸引了本小姐的注意）

接著來分析下頁面結(jié)構(gòu)，看項目需要怎么創(chuàng)建模板，下圖是首頁和直播頁對比：