使用H5搭建webapp主頁面
前言：
在一個h5和微信小程序火熱的時代，作為安卓程序員也得涉略一下h5了，不然就要落后了，據說在簡歷上可以加分哦，如果沒有html和css和js基礎的朋友，可以自行先學習一下，很簡單的。推薦0基礎能力一般的，我建議可以看傳智播客的韓順平老師的視頻或者畢向東老師的視頻，能力強的同學可以在w3c文檔自學。
主頁面搭建
思路分析：
Meta標簽中的ViewPort屬性：ViewPort是承載代碼層的一個View視圖，而手機瀏覽器看到網頁是承載ViewPort視圖。因此，手機看到的層級關系，從上到下：代碼View視圖->ViewPort視圖->瀏覽器視圖。
所以我們只需要修改ViewPort這一層的屬性，比如縮放等，即可對手機進行響應式布局，即安卓的自適應布局。
實現的效果圖：（左右拖拽即可實現自動調整大小）
步驟一：搭建工程目錄結構
步驟二：在index.html中聲明ViewPort，輸入meta：vp按下tab鍵自動生成，規定寬度為手機寬度，縮放比例為1
步驟三：由於每個瀏覽器的默認邊距，默認屬性的不同，我們需要全部初始化一遍，達到適應不同瀏覽器。
編寫我們的common.css文件，記得在index.html中導入
步驟四：編寫index.html文件
步驟五：編寫index.css，來對這個layout類進行布局
實現效果圖：
輪播圖和導航欄的搭建
思路分析：
1、導航欄實現：導航欄使用css的position=fixed和z-index=1000，使它固定在頂部並在網頁的最上層，左邊的icon和右邊登陸按鈕使用絕對位置來調整距離左邊右邊上邊的距離，而中間的form表單只要Padding-Left和Padding-Right就可以隨屏幕伸縮。
2、自動輪播效果實現：這里使用了JQuery的一個js開源庫unslider。
3、十個選項按鈕實現：使用一個列表，設置每一個li為塊元素，寬度為20%，並且讓10個選項左浮動，就可以自動排好兩行。
實現的效果圖：
導航欄實現
步驟一：編寫html文件，將導航欄做成一個盒子，並放置需要的組件，並為它們取好類名，方便css的編寫
步驟二：編寫css文件，將放置的東西設置好寬高，寬用百分比可以自適應，高度則是自己測量
自動輪播實現
步驟一：根據官網編寫自動輪播html文件
步驟二：根據官網導入js文件，需要下載unslider.js，它是基於JQuery.js的，所以需要下載2個，導入到項目中
步驟三：為了使圖片能讓我們手動滑動，還需要導入2個JQuery的庫，導入之后就能手動滑動了
步驟四：為了讓圖片能剛好100%顯示出來，並且實現自動輪播導航圓點，需要在css中加入實現
十個選項按鈕實現
步驟一：編寫html文件
步驟二：編寫css文件
商品區塊的搭建
思路分析：
1、秒殺模塊：可以分為頭部的倒計時和內容部分三個li存放三個圖，並且右邊界為1px。
2、左一大圖、右兩小圖：這里使用模塊化開發，在css寫好width=50%、中老年左右兩邊1px的border和左浮動右浮動的類，直接在html創建好后使用即可。左大圖采用左浮動，右小圖采用右浮動，大小都為50%。
3、左兩小圖、右一大圖：左小圖采用左浮動，右大圖采用有浮動。
實現的效果圖：
准備工作
編寫common.css，用於模塊化開發，只要在class里面放置需要的類名即可：
秒殺區塊、左大圖右小圖、左小圖右大圖
步驟一：編寫html文件
步驟二：編寫css文件