使用H5搭建webapp主頁面

使用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類進行佈局

 

 

 

實現效果圖：

輪播圖和導航欄的搭建

 

思路分析：

一、導航欄實現：導航欄使用css的position=fixed和z-index=1000，使它固定在頂部並在網頁的最上層，左邊的icon和右邊登錄按鈕使用絕對位置來調整距離左邊右邊上邊的距離，而中間的form表單只要Padding-Left和Padding-Right就能夠隨屏幕伸縮。

二、自動輪播效果實現：這裏使用了JQuery的一個js開源庫unslider。

三、十個選項按鈕實現：使用一個列表，設置每個li爲塊元素，寬度爲20%，而且讓10個選項左浮動，就能夠自動排好兩行。

 

實現的效果圖：

 

導航欄實現

步驟一：編寫html文件，將導航欄作成一個盒子，並放置須要的組件，併爲它們取好類名，方便css的編寫

 

 

 

步驟二：編寫css文件，將放置的東西設置好寬高，寬用百分比能夠自適應，高度則是本身測量

 

自動輪播實現

 

步驟一：根據官網編寫自動輪播html文件

 

步驟二：根據官網導入js文件，須要下載unslider.js，它是基於JQuery.js的，因此須要下載2個，導入到項目中

 

 

步驟三：爲了使圖片能讓咱們手動滑動，還須要導入2個JQuery的庫，導入以後就能手動滑動了

 

 

 

 

步驟四：爲了讓圖片能恰好100%顯示出來，而且實現自動輪播導航圓點，須要在css中加入實現

 

 

十個選項按鈕實現

步驟一：編寫html文件

 

 

 

步驟二：編寫css文件

 

商品區塊的搭建

 

思路分析：

一、秒殺模塊：能夠分爲頭部的倒計時和內容部分三個li存放三個圖，而且右邊界爲1px。

二、左一大圖、右兩小圖：這裏使用模塊化開發，在css寫好width=50%、中老年左右兩邊1px的border和左浮動右浮動的類，直接在html建立好後使用便可。左大圖採用左浮動，右小圖採用右浮動，大小都爲50%。

三、左兩小圖、右一大圖：左小圖採用左浮動，右大圖採用有浮動。

 

實現的效果圖：

 

準備工做

編寫common.css，用於模塊化開發，只要在class裏面放置須要的類名便可：

 

 

 

秒殺區塊、左大圖右小圖、左小圖右大圖

 

步驟一：編寫html文件

 

步驟二：編寫css文件

 

 

 

 

源碼下載